需求
视频列表:点击某个视频进行播放,其余视频全部暂停(
同时只播放一个视频
)文章来源:https://www.toymoban.com/news/detail-739964.html
实现原理
- 在 video 标签添加
自定义属性 id
(必须唯一)- 给每个 video 标签
添加 play 视频播放事件
- 播放视频时,触发 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>
页面展示
文章来源地址https://www.toymoban.com/news/detail-739964.html
到了这里,关于视频列表:点击某个视频进行播放,其余视频全部暂停(同时只播放一个视频)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!