微信小程序 vidao实现视频播放和弹幕的功能

微信小程序 vidao实现视频播放和弹幕的功能

微信小程序 vidao视频播放及弹幕的功能的实现。

vidao

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

.wxml

获取视频

获取视频

发送弹幕

.js

function getRandomColor () {

let rgb = []

for (let i = 0 ; i < 3; ++ihttp://){

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,

cameHSnSCra: ['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);

}

})

效果

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。