微信小程序視頻組件控制,videoContext通過(guò)videoId跟一個(gè)video組件綁定

2020-09-27

導(dǎo)讀：wx.createVideoContext(videoId) 創(chuàng)建并返回 video 上下文 videoContext 對(duì)象 videoContext videoContext 通過(guò) videoId 跟一個(gè) video 組件綁定，通過(guò)它可以操作一個(gè) video 組件。 videoContext對(duì)象的方法列表：方法...

wx.createVideoContext(videoId)

創(chuàng)建并返回 video 上下文videoContext對(duì)象

videoContext

videoContext通過(guò) videoId 跟一個(gè) video 組件綁定，通過(guò)它可以操作一個(gè) video 組件。

videoContext對(duì)象的方法列表：

方法	參數(shù)	說(shuō)明	最低版本
play	無(wú)	播放
pause	無(wú)	暫停
seek	position	跳轉(zhuǎn)到指定位置，單位 s
sendDanmu	danmu	發(fā)送彈幕，danmu 包含兩個(gè)屬性 text, color。
playbackRate	rate	設(shè)置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5	1.4.0
requestFullScreen	無(wú)	進(jìn)入全屏	1.4.0
exitFullScreen	無(wú)	退出全屏	1.4.0

示例代碼：

<view class="section tc">  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"   enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">發(fā)送彈幕</button>
  </view>
</view>

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({
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

更多微信小程序開(kāi)發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開(kāi)通一個(gè)小商店