微信小程序开发—(十六)video视频播放

一.知识点

1.video



video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

2.wx.createVideoContext(videoId)：创建并返回
video 上下文 

videoContext

 对象

videoContext：

videoContext

 通过
videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。



二.操作

1.视频播放：发送弹幕

<
4000
p>wxml
<view class="section">
<video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<button type="primary" bindtap="videoPlay">播放</button>
<button type="primary" bindtap="videoPause">暂停</button>
<input bindblur="bindInputBlur" placeholder="请输入弹幕内容"/>
<button bindtap="bindButtonTap">获取视频</button>
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>

js

var util = require('../../utils/util.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: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?
filekey=30280201010421301f0201690402534804102ca905ce620b1241b72
6bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c0
20101042530230204136ffd93020457e3c4ff02024ef202031e8d7f020
30f42400204045a320a0201000400',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
//播放
videoPlay:function(){
this.videoContext.play();
},
//暂停
videoPause:function(){
this.videoContext.pause();
},
//写弹幕
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()
})
}
})



2.监听视频加载错误状态

<!--监听button点击事件-->
<button bindtap="listenerButton">点击显示视频组件</button>

<!--视频组件src资源地址，binderror为监听错误信息-->
<video
src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
style="width: 100%; height: 100%"
hidden="{{hiddenVideo}}"
binderror="listenerVideo" />

Page({
data:{
// text:"这是一个页面"
hiddenVideo: true
},
/**
* 监听视频加载错误状态
*/
listenerVideo:function(e) {
console.log(e.detail.errMsg);
},
/**
* 监听button点击事件
*/
listenerButton:function() {
this.setData({
hiddenVideo: !this.data.hiddenVideo
})
}

})