当前位置: 首页 > article >正文

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


http://www.kler.cn/a/155535.html

相关文章:

  • aws(学习笔记第十二课) 使用AWS的RDS-MySQL
  • 从 MySQL 5.7 到 8.0:理解 GROUP BY 的新规则与实战优化20241112
  • 单例模式详解:如何优雅地实现线程安全的单例
  • 常见error集合
  • 华为大咖说 | 浅谈智能运维技术
  • git初始化和更新项目中的子模块
  • 视频智能分析国标GB28181云平台EasyCVR加密机授权异常是什么原因?
  • Java数据结构 之 包装类简单认识泛类
  • 操作系统进程与线程篇
  • 【Unity动画】什么是动画蒙版(Avatar Mask)
  • 【面试经典 150 | 二分查找】搜索插入位置
  • 【STL】手撕 string类
  • Python练习题(二)
  • re:Invent 构建未来:云计算生成式 AI 诞生科技新局面
  • IO_D3(231205)
  • Python datetime 字符串 相互转 datetime
  • C#网络编程System.Net.WebClient 类vs System.Net.Http.HttpClient 类
  • windows下docker环境搭建与运行实战
  • UCore-OS实验Lab0
  • 说一说MySQL中的锁机制
  • 通过Python Flask快速构建应用程序
  • 计算机视觉各个方向概述
  • JavaWeb 带条件的分页查询
  • 视图层与模板层
  • React如何像Vue一样将css和js写在同一文件
  • Rust多线程任务,发现有些线程一直获取不到锁【已解决】