微信小程序播放视频-小程序video组件播放视频功能示例

版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156182.html

前段时间闲来无事就做了一个糗事段子类的微信小程序。小程序用到了微信小程序播放视频的功能。就用小程序提供的video组件实现了一个多视频播放的功能。播放下一个视频自动暂定上一个播放的视频。小程序已经提供了video组件相关的API，参照文档，实现起来就简单的多了。

主要用到的API大概有这些（具体详细参数可以看官方API文档）

VideoContext wx.createVideoContext(string id, Object this)
创建 video 上下文 VideoContext 对象。
VideoContext.play()
播放视频
VideoContext.pause()
暂停视频
VideoContext.stop()
停止视频
VideoContext.seek(number position)
跳转到指定位置
VideoContext.sendDanmu(Object data)
发送弹幕
VideoContext.playbackRate(number rate)
设置倍速播放
VideoContext.requestFullScreen(Object object)
进入全屏
VideoContext.exitFullScreen()
退出全屏
VideoContext.showStatusBar()
显示状态栏，仅在iOS全屏下有效
VideoContext.hideStatusBar()
隐藏状态栏，仅在iOS全屏下有效

下面来看具体的代码吧！！

wxml代码

<scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%">
  <block wx:for="{{list}}" wx:for-item="item">
      <!-- 视频组件 -->
      <video id="video-{{index}}" bindplay= 'playVideo' bindpause='pauseVideo' src="{{item.videouri}}" binderror="error" style="width: 100%; margin-top: 15rpx" />
  </block>
</scroll-view>

js代码

Page({
  data: {
    list: [],
    playId:'',
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },

  /**
   * 视频格式出错
   */
  error: function (e) {
    console.log(e.detail);
  },


  //视频播放
  playVideo:function(e){
      var that = this;
      var id = e.currentTarget.id
      if (that.data.playId==id){
      }else if (that.data.playId == ''){
      }else{
        var prevV = wx.createVideoContext(that.data.playId);
        prevV.pause()
      }
      var prevV2 = wx.createVideoContext(id);
      prevV2.play()
      that.setData({
        playId: id
      })
 
  },
  
  pauseVideo:function(e){
    var that = this;
    if (e.currentTarget.id == that.data.playId){
      var prevV = wx.createVideoContext(that.data.playId);
      prevV.pause()
      that.setData({
        playId: ''
      })
    }
    
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    
    // 页面显示
  },
  onHide: function () {
    var that = this;
    if (that.data.playId != '') {
      var prevV = wx.createVideoContext(that.data.playId);
      prevV.pause()
    }
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

效果如下

祝生活愉快！

「创作不易，你的支持是本站持续更新最大的动力！」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝

微信

赏 1

谢谢你请我喝奶茶*^_^*

支付宝

微信