功能:使用video视频组件时,遇到一个问题,,一个页面的多个视频可以同时播放。
获取获取视频的上下文对象createVideoContext
<template>
<view>
<!-- 视频播放时会触发playing事件(要获得视频上下文对象必须绑定id),同时通过data属性传入当前id -->
<view class="movies">
<video v-for="(item,index) in videoList" :key="index" :src="item.src" :id="item.id" :data-id="item.id"
@play="playClick"></video>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 视频列表
videoList: [{
"id": "1",
"src": "http://video1.mp4"
}, {
"id": "2",
"src": "http://video2.mp4"
}]
}
},
methods: {
// 播放视频
playClick(e) {
console.log(e);
// 获取当前视频id
let currentId = e.currentTarget.dataset.id;
// uni.createVideoContext获取视频上下文对象
this.videoContent = uni.createVideoContext(currentId);
// 获取json对象并遍历, 停止非当前视频
let videoList = this.videoList;
for (let i = 0; i < videoList.length; i++) {
let temp = videoList[i].id;
if (temp !== currentId) {
uni.createVideoContext(temp).pause();
}
}
}
}
}
</script>
<style>
</style>