wx选择视频并可以发送弹幕

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')  
  },
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值