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

}

}

相关推荐
江城开朗的豌豆3 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆8 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan11 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程20 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴9 小时前
Mix
前端·webgl
代码续发10 小时前
前端组件梳理
前端
试图让你心动10 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery