uniapp 多个视频可以同时播放解决方法

使用video视频组件时主要遇到一个问题, 一个页面的多个视频可以同时播放, 这明显是不合理的. 解决办法是获取视频的上下文对象videoContext

获取到上下文对象之后, 就可以操作视频

数据:

// 预告片数据
trailer: [{
          "id": "123",
          "src": "http://trailer1.mp4"
        }, {
          "id": "456",
          "src": "http://trailer2.mp4"
        }]

页面

<view class="movies">
// 视频播放时会触发playing事件(要获得视频上下文对象必须绑定id),同时通过data属性传入当前id
        <video v-for="(item,index) in trailer" :key="index" class="Trailer" :data-id="item.id" :src="item.src" @play="playing" :id="item.id"></video>
      </view>

playing(e) {
        // 获取当前视频id
        let currentId = e.currentTarget.dataset.id
        // uni.createVideoContext获取视频上下文对象
        this.videoContent = uni.createVideoContext(currentId)
        // 获取json对象并遍历, 停止非当前视频
        let trailer = this.trailer
        for (let i = 0; i < trailer.length; i++) {
          let temp = trailer[i].id
          if (temp !== currentId) {
            uni.createVideoContext(temp).pause()
          }
        }
      }