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));
  });
}
相关推荐
荔枝味-1 小时前
html详细知识
前端·javascript·html
猿大撒3 小时前
Spring-data-redis
前端·bootstrap·html
帅过二硕ฅ4 小时前
uniapp点击跳转到对应位置
前端·javascript·uni-app
正小安7 小时前
URL.createObjectURL 与 FileReader:Web 文件处理两大法宝的对比
前端·javascript
程序猿阿伟7 小时前
《C++移动语义:解锁复杂数据结构的高效之道》
数据结构·c++·html
A黄俊辉A7 小时前
vue3中把封装svg图标为全局组件
前端·javascript·vue.js
老贾爱编程7 小时前
VUE实现刻度尺进度条
前端·javascript·vue.js
F2E_Zhangmo7 小时前
vue如何做到计算属性传参?
前端·javascript·vue.js
叫我小鹏呀9 小时前
vue3中el-table中点击图片放大时,被表格覆盖
前端·javascript·vue.js
我命由我123459 小时前
2.使用 VSCode 过程中的英语积累 - Edit 菜单(每一次重点积累 5 个单词)
前端·javascript·ide·vscode·学习·编辑器·学习方法