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));
  });
}
相关推荐
辰风沐阳15 分钟前
JavaScript 的宏任务和微任务
javascript
晚霞的不甘41 分钟前
CANN 编译器深度解析:TBE 自定义算子开发实战
人工智能·架构·开源·音视频
愚公搬代码41 分钟前
【愚公系列】《AI短视频创作一本通》016-AI短视频的生成(AI短视频运镜方法)
人工智能·音视频
夏幻灵1 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星1 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_1 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
那个村的李富贵2 小时前
CANN赋能AIGC“数字人”革命:实时视频换脸与表情驱动实战
aigc·音视频
程序员猫哥_2 小时前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
晚霞的不甘2 小时前
CANN 支持强化学习:从 Isaac Gym 仿真到机械臂真机控制
人工智能·神经网络·架构·开源·音视频
杨超越luckly2 小时前
HTML应用指南:利用GET请求获取中国500强企业名单,揭秘企业增长、分化与转型的新常态
前端·数据库·html·可视化·中国500强