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();

}

}

相关推荐
码事漫谈11 分钟前
手把手带你部署本地模型,让你Token自由(小白专属)
前端·后端
ZC跨境爬虫16 分钟前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html
爱上好庆祝17 分钟前
svg图片
前端·css·学习·html·css3
橘子编程28 分钟前
JavaScript与TypeScript终极指南
javascript·ubuntu·typescript
王夏奇34 分钟前
python中的__all__ 具体用法
java·前端·python
叫我一声阿雷吧1 小时前
JS 入门通关手册(45):浏览器渲染原理与重绘重排(性能优化核心,面试必考
javascript·前端面试·前端性能优化·浏览器渲染·浏览器渲染原理,重排重绘·reflow·repaint
大家的林语冰1 小时前
《前端周刊》尤大开源 Vite+ 全家桶,前端工业革命启动;尤大爆料 Void 云服务新产品,Vite 进军全栈开发;ECMA 源码映射规范......
前端·javascript·vue.js
jiayong232 小时前
第 8 课:开始引入组合式函数
前端·javascript·学习
田八2 小时前
聊聊AI的发展史,AI的爆发并不是偶然
前端·人工智能·程序员
zhanghongbin012 小时前
AI 采集器:Claude Code、OpenAI、LiteLLM 监控
java·前端·人工智能