微信小程序 视频连续自动播放，播放暂停其他视频，播放浮层（亲测可用）

---

微信片段

一次开发时小程序时，碰到以下功能，分享一下
1.视频连续自动播放
2.播放暂停其他视频
3.有播放浮层

图片视频资源来自懂视生活

---

//初始化
页面启动 => 视频加载完成 => 初始化每个视频的实例(wx.createVideoContext)

//播放
=> 取消浮层 => 显示视频 => 暂停其他视频

//播放完毕
=> 显示浮层 => 隐藏视频 => 播放下一个视频

---

js

/**
 * 2020-08-20
 * https://blog.csdn.net/qq_39816586/article/details/108093714
 */
Page({
  data: {
    videos: [],
  },

  onLoad() {
    setTimeout(() => {
      // 模拟网络请求视频
      this.setData({
        videos: [
          {
            // 用于区分实例绑定
            id: 1,
            // 视频地址
            src: "https://1251129115.vod2.myqcloud.com/d2cdbe06vodtranscq1251129115/b34eb1bc5285890806599704576/v.f30.mp4",
            // 视频实例
            myVideo: '',
            // 是否隐藏视频
            videoHidden: true
          },
          {
            id: 2,
            src: "https://1251129115.vod2.myqcloud.com/d2cdbe06vodtranscq1251129115/58703abd5285890805788468508/v.f30.mp4",
            myVideo: '',
            videoHidden: true
          },
          {
            id: 3,
            src: "https://1251129115.vod2.myqcloud.com/d2cdbe06vodtranscq1251129115/411d16085285890804312565075/v.f30.mp4",
            myVideo: '',
            videoHidden: true
          },
        ]
      })
    }, 1000);
  },

  play(e) {
    this.videoEven('点击播放', e)
  },

  bindloadedmetadata(e) {
    this.videoEven('监听加载完成', e)
  },

  bindpause(e) {
    this.videoEven('监听暂停', e)
  },

  bindended(e) {
    this.videoEven('监听播放完毕', e)
  },

  bindplay(e) {
    this.videoEven('监听播放', e)
  },

  // 视频事件总控制
  videoEven(type, e) {
    let videos = this.data.videos
    let id = e.currentTarget.dataset.id
    let index = e.currentTarget.dataset.index

    switch (type) {
      case '点击播放':
        videos[index].myVideo.play()
        break;
      case '监听加载完成':
        videos[index].myVideo = wx.createVideoContext('myVideo' + id)
        break;
      case '监听暂停':
        videos[index].videoHidden = true
        break;
      case '监听播放完毕':
        videos[index].videoHidden = true

        // 播放下一个视频逻辑----------------------
        if (index+1 != videos.length) { // 不是最后一个视频
          this.data.videos[index+1].myVideo.play() // 继续播放下一个
        }
        // 播放下一个视频逻辑----------------------

        break;
      case '监听播放':
        videos[index].videoHidden = false

        // 暂停其他视频逻辑----------------------
        for (let item of videos) {
          if (item.id != id) {
            item.myVideo.pause()
          }
        }
        // 暂停其他视频逻辑----------------------

        break;
    }
    this.setData({ videos })
  },

})

wxml

<view class="sam" wx:for="{{videos}}" wx:key="index" wx:if="{{videos.length>0}}">
  <block wx:if="{{ item.videoHidden }}">
    <!-- 背景 -->
    <image class="bg" src="https://img.51dongshi.com/20200813/82bc3bd90dcbab201ce9e7a714830677.jpg" mode="aspectFill" />
    <!-- 开始按钮 -->
    <view class="play" catchtap='play' data-index="{{index}}">
      <image src="https://js.51dongshi.com/index/images/icon_play_smaller.png"></image>
    </view>
    <!-- 标题 -->
    <view class="title">懂你更懂生活！</view>
  </block>
  <!-- 视频 -->
  <video id="myVideo{{item.id}}" src="{{item.src}}" style="left: {{ item.videoHidden ? '-2000rpx': '0rpx' }};" poster="" controls catchloadedmetadata="bindloadedmetadata" catchpause="bindpause" catchended="bindended" catchplay="bindplay" data-index="{{index}}" data-id="{{item.id}}"></video>
</view>

wxss

.sam {width:750rpx;height:360rpx;position:relative;top:0;left:0;margin-bottom:100rpx;}
.sam .bg {width:100%;height:100%;position:absolute;top:0;left:0;}
.sam .play{width:100%;height:100%;position:absolute;top:0;left:0;}
.sam .play image{width:120rpx;height:120rpx;position:absolute;top:50%;left:50%;margin-top:-60rpx;margin-left:-60rpx;}
.sam .title{width:640rpx;height:auto;position:absolute;left:55rpx;bottom:30rpx;font-size:30rpx;color:#ffffff;text-align:left;}
.sam video {width:100%;height:100%;}