微信小程序视频弹幕效果和设置方法

　　想要在微信小程序上开发弹幕功能主要是利用小程序视频，也就是在小程序视频播放器上面带上弹幕。那么微信小程序视频弹幕怎么做呢?以下是视频弹幕的效果及制作代码。

　　先看效果图

　　1，模拟器

　　2，真机运行效果

　　3，选择弹幕颜色

　　vidao

　　我们之前看到的官方文档是不带danmu(弹幕)属*的，之前是有的，不过现在这个属*还可以生效。控制视频的状态可以根据video标签的唯一id得到一个对象实例。video组件并不具备action属*，不能通过action来控制。

　　.wxml

　　?获取视频

　　获取视频 发送弹幕

　　.js

　　?

　　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: '', data: { src: '', danmuList: [ { text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 }, { text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 } ] }, bindInputBlur: function(e) { this.inputValue = e.detail.value }, bindButtonTap: function() { //视频下载 var that = this wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: ['front','back'], success: function(res) { that.setData({ src: res.tempFilePath }) } }) }, bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }) }, videoErrorCallback: function(e) { console.log('视频错误信息:'); console.log(e.detail.errMsg); }})

　　效果

　　参照上述代码，你也可以进行微信小程序视频弹幕的设置了，是不是觉得很好玩呢?开发者们赶紧来试试吧，微信小程序商店还有更多素材可供参考。

　　微信小程序弹幕功能开发实例

　　微信小程序弹幕效果实现代码

　　微信小程序video层级设置教程