小程序视频播放

1.轮播视频

<swiper scroll-x class='scroll-view'>
  <swiper-item class='opt' wx:for="{{vedio_data}}" wx:key>
    <video src="{{url}}{{item.video}}" wx:if="{{_index == index}}" id="{{index}}"></video>
      <view class="controls" bindtap='videoPlay' id='{{index}}' style="display: {{ _index == index ? 'none' : 'block' }};">
        <view class="play">
          <image class="img" src="/images/coll_work_01.png"></image>
        </view>
        <view class="pause">
          <image class="img" src="/images/coll_work_02.png"></image>
        </view>
      </view>
  </swiper-item>
</swiper>

videoPlay: function (e) {
  let that = this
  var _index = e.currentTarget.id
  this.setData({
    _index: _index
  })
  //停止正在播放的视频
  var videoContextPrev = wx.createVideoContext(this.data._index)
  videoContextPrev.stop();
  setTimeout(function () {
    //将点击视频进行播放
    var videoContext = wx.createVideoContext(_index)
    videoContext.play();
  }, 500)
},

.video{width: calc(100% -20rpx);height: 380rpx;margin-bottom:30rpx;padding: 0 20rpx; margin-top:30rpx}
.video>.title{color: #333;font-size: 30rpx;text-align: center;line-height: 80rpx;}
.video video{width: 100%;height: 300rpx;}
.scroll-view,.scroll-view .opt,.controls, .controls .play{width: 100%;height: 300rpx;}
.controls{position: relative;z-index: 999999}
.controls .play>image{width: 100%;height: 100%}
.controls .pause{position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items: center;justify-content: center;}
.controls .pause .img{width: 90rpx;height: 90rpx;}

2. 单个视频

<view class='video'>
    <video wx:if="{{_index == 1}}" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" id="myVideo"></video>
      <view class="controls" bindtap='videoPlay' data-id='1'  style="display:{{_index == 1? 'none' : 'block'}};">
        <view class="play">
          <image class="img" src="/images/icon/parent1.png"></image>
        </view>
        <view class="pause">
          <image class="img" src="/images/icon/parent2.png"></image>
        </view>
      </view>
  </view>

.video{width: 100%;height: 420rpx;}
.video video{width: 100%;height: 420rpx;}
.controls .play{width: 100%;height: 420rpx;}
.controls{position: relative;z-index: 999999}
.controls .play>image{width: 100%;height: 100%}
.controls .pause{position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items: center;justify-content: center;}
.controls .pause .img{width: 90rpx;height: 90rpx;}

// 播放视频
  videoPlay: function (e) {
    let that = this
    console.log(e)
    var _index = e.currentTarget.dataset.id
    this.setData({
      _index: _index
    })
      //将点击视频进行播放
    var videoContext = wx.createVideoContext('myVideo')
      videoContext.play();
  },