周到的网站建设推广,最强大的wordpress,网站设计建设步骤,营销型企业网站名词解释目录 需求实现原理实现代码页面展示 需求 视频列表#xff1a;点击某个视频进行播放#xff0c;其余视频全部暂停#xff08;同时只播放一个视频#xff09; 实现原理 在 video 标签添加 自定义属性 id (必须唯一)给每个 video 标签 添加 play 视频播放事件播放视频时… 目录 需求实现原理实现代码页面展示 需求 视频列表点击某个视频进行播放其余视频全部暂停同时只播放一个视频 实现原理 在 video 标签添加 自定义属性 id (必须唯一)给每个 video 标签 添加 play 视频播放事件播放视频时触发 play 事件通过添加的自定义属性 id 判断将 非当前播放视频都暂停 实现代码
!-- 查看视频 --
templateel-drawertitle查看视频size70%:visible.syncdrawerVisibledestroy-on-close:before-closehandleClosediv classlistdiv v-foritem in videoList :keyitem.id!-- 【主要代码】添加自定义属性 id --video width100% controlscontrols :data-iditem.idsource src./video.mp4 typevideo/mp4 //video/div/div/el-drawer
/templatescript
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}}
}
/scriptstyle langscss 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
页面展示
