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

}

}

相关推荐
Fantasydg21 小时前
Request Response对象
前端
Wect21 小时前
学习React-DnD:核心组件与Hooks
前端
humors22121 小时前
前端开发案例(不定期更新)
前端·vue.js·elementui·ruoyi·若依
菠萝+冰21 小时前
npm中-d -g 和默认安装的区别
前端·npm·node.js
心随雨下21 小时前
Flutter Material 3设计语言详解
javascript·flutter·设计语言
一路向北North1 天前
网页版预编译SQL转换工具
前端·javascript·sql
拿不拿铁191 天前
Vite 5.x 开发模式启动流程分析
前端
fruge1 天前
设计稿还原技巧:解决间距、阴影、字体适配的细节问题
前端·css
把csdn当日记本的菜鸡1 天前
js查缺补漏
开发语言·javascript·ecmascript
BBB努力学习程序设计1 天前
了解响应式Web设计:viewport网页可视区域
前端·html