wxml
<view class="title">视频管理</view>
<view class="demo-box">
<view class="title">视频综合应用管理</view>
<button bindtap="chooseVideo">选择视频</button>
<video id="myVideo" src="{{src}}" enable-danmu danmu-btn controls></video>
<button type="primary" size="mini" bindtap="play">播放</button>
<button type="primary" size="mini" bindtap="pause">暂停</button>
<button type="primary" size="mini" bindtap="saveVideo">保存视频</button>
<input placeholder="请在此处填写弹幕" bindblur="bindInputBlur"></input>
<button type="primary" bindtap="bindSendDanmu">发送弹幕</button>
</view>
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({
data: {
},
//选择视频
chooseVideo:function(){
var that=this
wx.chooseVideo({
camera: 'back',
maxDuration: 60,
sourceType: ['album','camera'],
success:function(res){
that.setData({
src:res.tempFilePath
})
}
})
},
//开始播放
play:function(){
this.videoContext.play()
},
//暂停播放
pause:function(){
this.videoContext.pause()
},
//保存视频
saveVideo:function(){
var src=this.data.src
wx.saveVideoToPhotosAlbum({
filePath: src,
success:function(res){
wx.showToast({
title: '保存成功',
})
}
})
},
inputValue:'',//弹幕文本内容
//更新弹幕文本
bindInputBlur:function(e){
this.inputValue=e.detail.value
},
//发送弹幕
bindSendDanmu:function(){
this.videoContext.sendDanmu({
text:this.inputValue,
color:getRandomColor()
})
},
onLoad:function(options){
this.videoContext=wx.createVideoContext('myVideo')
},
}