微信小程序(六)视频组件的应用--播放下一个关闭上一个

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/y_z_w123/article/details/86305261

仔细看文档

https://developers.weixin.qq.com/miniprogram/dev/component/video.html 视频组件video
https://developers.weixin.qq.com/miniprogram/dev/api/VideoContext.html 视频原生API

直接上代码可执行

wxml

<view wx:for="{{courseList}}" wx:for-index="index" wx:for-item="course" class='course-pannle-item' >
  <view class='video-item'>
     <video  id='{{index}}'  show-center-play-btn="false" src='{{course.videoUrl}}' controls="true" objectFit="cover" bindtap='videoPlay'>
    </video>
  </view>

wxss

.video-item{ position: relative;width: 100%;height: 420rpx;}
video{width: 100%;height: 100%}
.video-cover{position: absolute;left: 0; top: 0}
.video-play-btn{position: absolute;width: 120rpx;height: 120rpx left: 0;right: 0;top: 0;bottom: 0;margin: auto}
.video-duration{  position: absolute; right: 10px; bottom: 10px;color: #fff;}

js

Page({
 data: {
	playIndex: null,//用于记录当前播放的视频的索引值
	courseList: [{
 	 videoUrl: 'xxxx',//视频路径
	 }, {
    videoUrl: 'xxx',
	 }],
},
videoPlay: function (e) {
    console.log(e)
    var curIdx = e.target.id;
    console.log(curIdx)
    // 没有播放时播放视频
    if (!this.data.playIndex) {
      this.setData({
        playIndex: curIdx
      })
      var videoContext = wx.createVideoContext(curIdx) //这里对应的视频id
      videoContext.play()
         //进入全屏模拟器不可以手机可以
      // videoContext.requestFullScreen({ direction: 0 })
	 } else { 
	      // 有播放时先将prev暂停，再播放当前点击的current
	      var videoContextPrev = wx.createVideoContext(this.data.playIndex)
	      if (this.data.playIndex != curIdx) {
	        //跳转到初始位置进行暂停
	        videoContextPrev.seek(0)
	        videoContextPrev.pause()
	      }
      this.setData({
        playIndex: curIdx
      })
      var videoContextCurrent = wx.createVideoContext(curIdx)
      //全屏模式播放
      videoContextCurrent.play()
      //进入全屏模拟器不可以手机可以
      // videoContextCurrent.requestFullScreen({ direction: 0 })
	}
	}
})

觉得好的可以点个赞关注下。也可以加群共同学习