视频列表：点击某个视频进行播放，其余视频全部暂停（同时只播放一个视频）
目录
- 需求
- 实现原理
- 实现代码
- 页面展示
需求
视频列表：点击某个视频进行播放，其余视频全部暂停（
同时只播放一个视频）
实现原理
- 在 video 标签添加
自定义属性 id(必须唯一)- 给每个 video 标签
添加 play 视频播放事件- 播放视频时，触发 play 事件，通过添加的自定义属性 id 判断，将
非当前播放视频都暂停
实现代码
<!-- 查看视频 -->
<template><el-drawertitle="查看视频"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 = typesetTimeout(() => {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>页面展示
