小程序播放視頻（彈幕案例）
2021-07-28 11:14:56

<!--index.wxml-->
<video src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4"></video>

使用video標簽即可顯示視頻，src為視頻地址。

video微信小程序官網(wǎng)開發(fā)文檔地址 https://developers.weixin.qq.com/miniprogram/dev/component/video.html
里面很詳細的介紹了各種視頻控制，及事件處理。
如常用的
指定視頻初始播放位置 initial-time
是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間） controls
彈幕列表 danmu-list ，是否自動播放 autoplay ，是否循環(huán)
loop ，靜音播放muted ，是否開啟手勢 enable-progress-gesture，視頻封面poster 。

視頻API的使用

視頻調用比較簡單，微信還推出了相關的API以方便我們使用視頻播放組件。我們可以通過VideoContext接口來控制當前視頻，在使用該接口之前，需要使用wx.createVideoContext()創(chuàng)建對象。創(chuàng)建完對象后，我們可以使用下面的方法去做視頻的基本控制。

官方開發(fā)文檔 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

發(fā)送彈幕的一個例子：

<!--index.wxml-->
<video id="myVideo" src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4" enable-danmu danmu-btn controls ></video>

<view >
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">發(fā)送彈幕</button>
</view>

//index.js
//獲取應用實例
const app = getApp()
function getRandomColor() {
  let rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}
Page({

  inputValue: '',
  onReady:function(){
    this.videoContext = wx.createVideoContext('myVideo')
  },
  
  bindSendDanmu:function() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  }
 

})

更具體一點的

<!--index.wxml-->
<video id="myVideo" src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4" enable-danmu danmu-btn controls ></video>

<input placeholder="在這里輸入你要發(fā)送的彈幕內(nèi)容" bindblur="bindInputBlur"/>
<button type="warn" bindtap="bindSendDanmu">發(fā)送彈幕</button>
<button type="primary" size="mini" bindtap="videoPlay">播放</button>
<button type="primary" size="mini" bindtap="videoPause">暫停</button>
<button type="primary" size="mini" bindtap="videoPlayBackRate">1.25倍快進</button>
<button type="primary" size="mini" bindtap="videorequestFullScreen">全屏</button>
<button type="primary" size="mini" bindtap="videoSeek0">重新播放</button>

//index.js
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },
  videoPlay() {
    this.videoContext.play()
  },

  videoPause() {
    this.videoContext.pause()
  },

  videoPlayBackRate() {
    this.videoContext.playbackRate(1.5)
  },

  videorequestFullScreen() {
    this.videoContext.requestFullScreen()
  },

  videoSeek0() {
    this.videoContext.seek(0)
  },

  bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },

  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: "#FFFFF"
    })
  },
  onReady: function () {
    this.videoContext = wx.createVideoContext('myVideo')
  }
})

效果：