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));
  });
}
相关推荐
无责任此方_修行中5 分钟前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
灵感素材坊1 小时前
解锁音乐创作新技能:AI音乐网站的正确使用方式
人工智能·经验分享·音视频
dorabighead2 小时前
JavaScript 高级程序设计 读书笔记(第三章)
开发语言·javascript·ecmascript
modest —YBW2 小时前
视频大小怎么计算?视频码率是什么,构成视频清晰度的核心要素!
音视频
cuijiecheng20182 小时前
音视频入门基础:RTP专题(10)——FFmpeg源码中,解析RTP header的实现
ffmpeg·音视频
AI服务老曹2 小时前
运用先进的智能算法和优化模型,进行科学合理调度的智慧园区开源了
运维·人工智能·安全·开源·音视频
林的快手3 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
bug总结4 小时前
新学一个JavaScript 的 classList API
开发语言·javascript·ecmascript
网络安全-老纪4 小时前
网络安全-js安全知识点与XSS常用payloads
javascript·安全·web安全
yqcoder4 小时前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript