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));
  });
}
相关推荐
xptwop26 分钟前
05-ES6
前端·javascript·es6
Heo32 分钟前
调用通义千问大模型实现流式对话
前端·javascript·后端
前端小巷子1 小时前
深入 npm 模块安装机制
前端·javascript·面试
qq_三哥啊2 小时前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
深职第一突破口喜羊羊2 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
肥or胖2 小时前
【音视频协议篇】WebRTC 快速入门
ffmpeg·音视频·webrtc
cypking2 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵2 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆3 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
aqi003 小时前
FFmpeg开发笔记(七十八)采用Kotlin+Compose的NextPlayer播放器
android·ffmpeg·音视频·直播·流媒体