这次说下,小程序的视频组件,之前在说小程序基础的时候视频组件没说,现在说下。从属性和api都说下。https://github.com/limingios/wxProgram.git 中No.15

视频组件官网介绍

>https://developers.weixin.qq.com/miniprogram/dev/component/video.html

AAffA0nNPuCLAAAAAElFTkSuQmCC

demofunction getRandomColor() {

let rgb = []

for (let i = 0; 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()

})

}

})

获取视频

发送弹幕

PS: 最后补充一下video的注意事项:

1. video 组件是由客户端创建的原生组件,它的层级是最高的。

2. 请勿在 scroll-view 中使用 video 组件。

3. css 动画对 video 组件无效。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐