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

}

}

相关推荐
下辈子再也不写代码了2 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷3 分钟前
AntV X6 常用方法
前端
LucianaiB11 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502817 分钟前
D3.js - 基本用法
前端·d3.js
Mr.Liu634 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
76756047935 分钟前
useDateFormat源码解析
前端·源码
Mintopia35 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52035 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖36 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia36 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js