html页面多个视频标签时设定只能播放一个视频

html页面经常会出现存在多个视频的情况,点击单个视频时,该视频播放,点击另外一个视频时,需要让正在播放的视频停止,开始播放所点击的新视频。如果不单独设置,就会出现页面同时播放多个视频的情况。

设置代码如下:

var videos = document.getElementsByTagName('video');

for (var i = videos.length - 1; i >= 0; i--) {

(function(){

var p = i;

videos[p].addEventListener('play',function(){

pauseAll(p);

})

})()

}

function pauseAll(index){

for (var j = videos.length - 1; j >= 0; j--) {

if (j!=index) videos[j].pause();

}

}

相关推荐
Hi_kenyon16 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
起名时在学Aiifox16 小时前
Vue 3 响应式缓存策略:从页面状态追踪到智能数据管理
前端·vue.js·缓存
李剑一17 小时前
uni-app实现本地MQTT连接
前端·trae
EndingCoder17 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript
oden17 小时前
代码高亮、数学公式、流程图... Astro 博客进阶全指南
前端
GIS之路17 小时前
GDAL 实现空间分析
前端
JosieBook18 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
pusheng202518 小时前
算力时代的隐形防线:数据中心氢气安全挑战与技术突破
前端·安全
起名时在学Aiifox18 小时前
前端文件下载功能深度解析:从基础实现到企业级方案
前端·vue.js·typescript