点击视频数组，只播放一个视频，其他视频暂停播放
<template>
<view class="demoPage">
<video :src="item" :id="'video'+index" @play="playVideo(index)" v-for="(item,index) in videoList" :key="index"></video>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
videoList: [https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/0ebceb4d-72ef-4b7b-81e7-7e4edd818247.mp4,https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/b838dd89-6b48-4e02-ad24-292350f1e5fa.mp4,https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/ed5e6037-5ea1-49e5-a906-8b3fdeed2234.mp4,https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/09ac4e92-f8b5-49bd-aa24-e5ae3eeaaf17.mp4], //视频数组
changePlay: false,
}
},
// 侦听器
watch: {
},
// 计算属性
computed: {
},
// 页面加载
onLoad(e) {
},
// 页面显示
onShow() {
},
// 方法
methods: {
//通过索引知道点击的是第几个视频
playVideo(index) {
console.log(index, 'index')
let _this = this;
//全局变量changePlay表示正在切换。每次切换完播放等一秒在恢复，解决Android下的问题
if (this.changePlay) {
return
}
_this.changePlay = true
let currentIndex = 'video' + index; // 获取当前视频索引
console.log("playVideo currentIndex ", currentIndex)
// 获取视频列表
this.videoList.forEach((item, index) => {
// 获取json对象并遍历, 停止非当前视频
let temp = 'video' + index;
if (temp != currentIndex) {
//判断名字是否一致
// 暂停其余视频
console.log(temp, currentIndex, '暂停播放');
uni.createVideoContext(temp, _this).pause(); //暂停视频播放事件
}
})
setTimeout(() => {
_this.changePlay = false
}, 1000)
}
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
},
// 页面上拉触底事件的处理函数
onReachBottom() {
},
}
</script>