html限制仅有一个音/视频可播放

html限制仅有一个音/视频可播放

js 复制代码
/** 多个音频仅能播放一个 */
function audiosPlay() {
  const audios = document.getElementsByTagName('audio');
  const videos = document.getElementsByTagName('video');

  function pauseAll() {
    var self = this;
    [].forEach.call(audios, function (i) {
      if (i !== self) i.pause();
    });
    [].forEach.call(videos, function (i) {
      i.pause();
    });
  }

  [].forEach.call(audios, function (i) {
    i.addEventListener('play', pauseAll.bind(i));
  });
}

/** 多个视频仅能播放一个 */
function videosPlay() {
  const audios = document.getElementsByTagName('audio');
  const videos = document.getElementsByTagName('video');

  function pauseAll() {
    var self = this;
    [].forEach.call(videos, function (i) {
      if (i !== self) i.pause();
    });
    [].forEach.call(audios, function (i) {
      i.pause();
    });
  }

  [].forEach.call(videos, function (i) {
    i.addEventListener('play', pauseAll.bind(i));
  });
}
相关推荐
花菜会噎住3 分钟前
Vue3 路由配置和使用与讲解(超级详细)
开发语言·javascript·ecmascript·路由·router
细节控菜鸡6 分钟前
【2025最新】ArcGIS for JavaScript 快速实现热力图渲染
开发语言·javascript·arcgis
Dontla6 分钟前
React惰性初始化函数(Lazy Initializer)(首次渲染时执行一次,只执行一次,应对昂贵初始化逻辑)(传入一个函数、传入函数)
前端·javascript·react.js
Cherry Zack1 小时前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
来知晓1 小时前
语音处理:音频移形幻影,为何大振幅信号也无声
开发语言·音视频
阿酷tony1 小时前
开源项目:FlyCut Caption智能视频字幕裁剪工具
音视频·智能视频字幕裁剪·视频字幕裁剪
CodeJourney.1 小时前
Sora引爆AI视频革命
人工智能·音视频
2501_920955571 小时前
MP4格式视频无法播放怎么修?4个修复方法,解决难题
音视频
ZEGO即构开发者1 小时前
【ZEGO即构开发者日报】谷歌推出新款视频生成模型 Veo 3.1;腾讯开源通用文本表示模型Youtu-Embedding;AI 陪伴赛道观察……
人工智能·音视频·实时音视频·业界资讯
颜酱2 小时前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法