uniapp视频数组,点击播放-播放当前视频,其余暂停demo效果(整理)
数组 视频 效果 整理 当前 点击 Demo 播放
2023-09-14 09:04:05 时间
点击视频数组,只播放一个视频,其他视频暂停播放
<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>