必要
ビデオ リスト: 再生するビデオをクリックすると、他のすべてのビデオが一時停止されます (
同时只播放一个视频
)
実施原則
- ビデオ タグに
自定义属性 id
を追加します (一意である必要があります)- 各動画にタグを付けます
添加 play 视频播放事件
- ビデオを再生すると、再生イベントがトリガーされ、追加されたカスタム属性 ID によって判断されます。
非当前播放视频都暂停
コードを実装する
<!-- 查看视频 -->
<template>
<el-drawer
title="查看视频"
size="70%"
:visible.sync="drawerVisible"
destroy-on-close
:before-close="handleClose"
>
<div class="list">
<div v-for="item in videoList" :key="item.id">
<!-- 【主要代码】添加自定义属性 id -->
<video width="100%" controls="controls" :data-id="item.id">
<source src="./video.mp4" type="video/mp4" />
</video>
</div>
</div>
</el-drawer>
</template>
<script>
export default {
name: 'VideoListDrawer',
data() {
return {
drawerVisible: false,
drawerType: '',
videoList: [...Array(20).keys()].map((item) => {
return {
id: item
}
}),
currentVideo: ''
}
},
methods: {
open(type, rowData) {
this.drawerType = type
setTimeout(() => {
this.getVideoDom()
}, 500)
this.drawerVisible = true
},
// 【主要代码】视频播放暂停处理函数
getVideoDom() {
const videoList = document.querySelectorAll('video')
videoList.forEach((item) => {
// 每个 video 添加 play 监听事件
item.addEventListener('play', (e) => {
// 获取当前播放视频的自定义属性 id 的值
this.currentVideo = e.target.dataset.id
// 遍历所有 video 标签,将非当前播放视频都暂停
videoList.forEach((i) => {
if (i.dataset.id !== this.currentVideo) {
i.pause() // 暂停视频
}
})
})
})
},
handleClose() {
this.drawerVisible = false
}
}
}
</script>
<style lang='scss' scoped>
::v-deep .el-drawer {
.el-drawer__header {
text-align: left;
}
.el-drawer__body {
padding: 10px 20px;
text-align: left;
.btns {
margin-bottom: 10px;
}
.list {
display: flex;
flex-wrap: wrap;
> div {
width: calc(50% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
}
}
}
</style>