使用video视频组件时主要遇到一个问题, 一个页面的多个视频可以同时播放, 这明显是不合理的. 解决办法是获取视频的上下文对象videoContext
获取到上下文对象之后, 就可以操作视频
image
数据:
// 预告片数据
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()
}
}
}
