index.wxml代码如下
<!-- 弹幕小案例 -->
<view>
<!-- 视频 -->
<video
id="vi"
danmu-list="{{danmuList}}"
style="width: 100%;"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023hy=SHfileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"/>
</view>
<!-- 发送弹幕 -->
<view style="border: 1rpx solid;">
<!-- model 双向绑定 -->
<input model:value="{{danmuVal}}" type="text"/>
</view>
<button bind:tap="sendDanmu">发送弹幕</button>
index.js代码如下
Page({
data:{
danmuList:[
// 颜色 时间 文本
{color:'red',time:1,text:'第一个弹幕'}
],
danmuVal:""
},
onReady(){
// 创建video上下文
this.videoContext = wx.createVideoContext('vi')
},
// 点击发送弹幕
sendDanmu(){
// 调用video上下文的sendDanmu方法
this.videoContext.sendDanmu({
text:this.data.danmuVal,
color:'pink'
})
}
})
以上代码便能实现功能