vue 控制video视频的播放暂停（多个视频）

https://www.jb51.net/article/173792.htm vue视频播放暂停代码

https://www.jianshu.com/p/d5ff26717cd5 vue + video.js实现视频列表页（多个视频）

 

安装video.js

$ npm install video.js

 

import Video from 'video.js'
// import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

    

        
        
    
 

data(){
  old_id:
}
//控制单个视频的播放暂停(独立)
methods: {
    changePlay(e){
      var idx = e.target.id ? e.target.id : e.target.dataset.id;
      var vide= document.getElementById(idx);
      if(vide.paused){
       vide.play();
      }else if(vide.play()){
        vide.pause();
       }
     }
  
}

//播放当前视频，上个视频暂停播放
changePlay(e) {
      var idx = e.target.id ? e.target.id : e.target.dataset.id;
      var newVis = document.getElementById(idx);
      if (this.old_id == idx) {
        if (newVis.paused) {
          newVis.play();
        } else if (newVis.play()) {
          newVis.pause();
        }
      } else {
        if (this.old_id && document.getElementById(this.old_id).play()) {
          document.getElementById(this.old_id).pause();
        }
        if (newVis.paused) {
          newVis.play();
        }
      }
      this.old_id = idx;
    }