小程序之发送弹幕——wx.createVideoContext（）

小程序之发送弹幕

这个是官方定义：

wx.createVideoContext(videoId, this)

创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video/> 组件

二、下面是效果图，这时候在开发工具中的样子，希望能理解

页面代码：

< 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">发送弹幕 </ button >

</ view >

</ view >

js代码

一、生成videoContext 对象，绑定myVideo；

onReady: function (res) {

this.videoContext = wx.createVideoContext( 'myVideo')

},

inputValue: '',

二、input失去焦点时的方法，获取input的值

bindInputBlur: function (e) {

this.inputValue = e.detail.value

},

三、发送弹幕API,设置的文本，颜色

bindSendDanmu: function () {

this.videoContext.sendDanmu({

text: this.inputValue,

color: getRandomColor()

})

},

四、调用随机生成颜色函数

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( '')

}

大家，快快去试试吧