小程序----视频播放

我们小程序的视频播放和弹幕微信团队已经帮我们封装的非常好了

<view class="section">
  <video class="videoc" src="{{src}}"></video>
</view>
<button bindtap='chooseVideo'>选取视频</button>

这里我们用了封装好的APIchooseVideo

chooseVideo:function(){
    var that=this;
    wx:wx.chooseVideo({
      sourceType: ['album','camera'],/*选取的视频可以是相机拍摄,也可以是相册*/
      compressed: '',
      maxDuration: 60,
      camera:['front','back'],
      success: function(res) {
        that.setData({
          src:res.tempFilePath
        })
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  }

有弹幕功能的视频播放器:

<view>
  <video id="myVideo" class="videoc" src="demo.mp4" danmu-list='{{danmuList}}' danmu-btn='true'></video>
 <view>
  <input bindblur='bindblur' placeholder='一起发吐槽吧'></input>
  <button bindtap="upText">发布弹幕</button>
 </view>
</view>
data: {
    src:"",
    inputValue:'',
    danmuList:[
      {
        text:"第一个弹幕",
        time:2
      }
      ,
      {
        text:"第二个弹幕",
        time:3
      }
    ]
  },
bindblur:function(e){
    this.inputValue=e.detail.value;
  },
  upText:function(){
    this.videoContext.sendDanmu({
      text:this.inputValue,
      color:getRandomColor()
    })
  },
onReady: function (res) {
    this.videoContext = wx.createVideoContext("myVideo", this);
  },

猜你喜欢

转载自blog.csdn.net/scwMason/article/details/82822531
今日推荐