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

小程序之发送弹幕

这个是官方定义：

wx.createVideoContext(videoId, this)

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

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

页面代码：

<

view

class

“section tc”>

<

video

id

“myVideo”

src

“

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

}

大家，快快去试试吧