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 小时前
Electron桌面应用聊天(续)
前端·javascript·electron
KevinCyao1 小时前
java视频短信接口怎么调用?SpringBoot集成视频短信及回调处理Demo
java·spring boot·音视频
哟哟耶耶2 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
是罐装可乐2 小时前
深入理解“句柄(Handle)“:从浏览器安全到文件系统访问
前端·javascript·安全
华科易迅3 小时前
Vue如何集成封装Axios
前端·javascript·vue.js
不是az3 小时前
CSS知识点记录
前端·javascript·css
昵称暂无13 小时前
.NET 高级开发 | i18n 原理、实现一个 i18n 框架
javascript·c#·.net
EasyDSS3 小时前
私有化视频会议系统/私有化音视频系统EasyDSS在社交娱乐领域实时互动场景中的应用
实时互动·音视频·娱乐
h_jQuery3 小时前
vue使用gm-crypto对数据进行sm4加密处理
前端·javascript·vue.js
阿赛工作室4 小时前
Vue中onBeforeUnmount不触发的解决方案
前端·javascript·vue.js