手绘风网站360识图

需求

视频列表：点击某个视频进行播放，其余视频全部暂停（同时只播放一个视频）

实现原理

1. 在 video 标签添加 自定义属性 id (必须唯一)
2. 给每个 video 标签 添加 play 视频播放事件
3. 播放视频时，触发 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>

页面展示