video, audio同时播放问题

场景: 页面有多个音频和视频, 要求一个开始播放其他所有的音视频都要暂停.

<template>

  <div class="cardFilePreview">
    <div class="video"
      v-if="videoLists.length >= 1">
      <video :src="videoLists[0].previewUrl"
        :id="videoLists[0]['fid']"
        controls controlslist="nodownload"></video>
      <span class="num"
        v-if="videoLists.length>1">{{videoLists.length}}</span>
    </div>
    <div class="audio"
      v-show="audioLists.length >= 1">
      <task-audio v-for="(item,index) in audioLists"
        :key="index"
        :auditoSrc='item' :ref="'audio'+item" />
    </div>
  </div>
</template>
<script>
import taskAudio from './audio.vue'
mounted () {
    this.onlyPlay();
},
methods: {
   // 同一时间只能有一个视频或者音频播放
    onlyPlay () {
      let videoobjs = document.getElementsByTagName('video'),
          audioobjs = document.getElementsByTagName('audio'),vm=this;

      function pauseFun(i,type){
          for(let j=0;j<videoobjs.length;j++){
            if(type==='video'){ // 如果当前播放为视频, 则关闭自身以外的所有视频加所有音频
              if(i!=j){
                videoobjs[j].pause();
              }
            }else{
              videoobjs[j].pause();
            }
          }
          for(let k=0;k<audioobjs.length;k++){
            if(type==='audio'){ // 如果当前播放为音频, 则关闭自身以外的所有音频加所有视频
              if(i!=k){
                audioobjs[k].pause();
                if(vm.$refs[`audio${audioobjs[k].src}`]){
                  vm.$refs[`audio${audioobjs[k].src}`][0].audioPlayShow=true;
                }
              }
            }else{
              audioobjs[k].pause();
              if(vm.$refs[`audio${audioobjs[k].src}`]){
                vm.$refs[`audio${audioobjs[k].src}`][0].audioPlayShow=true;
              }
            }        
          }
      }
      if(videoobjs.length >0 || audioobjs.length){
        for(let i=0;i<videoobjs.length;i++){
          videoobjs[i].addEventListener('play',function(){
            pauseFun(i,'video')
          })
        }
        for(let i=0;i<audioobjs.length;i++){
          audioobjs[i].addEventListener('play',function(){
            pauseFun(i,'audio')
          })
        }
      }
    },
}

</scrip>

由于audio是自己封的组件, 播放按钮的样式要自己去改, 所以用ref来处理