vue视频播放暂停代码_vue.js_脚本之家 vue视频播放暂停代码

vue + video.js实现视频列表页（多个视频） - 简书 vue + video.js实现视频列表页（多个视频）

隐藏未静音的自动播放视频

video[autoplay]:not([muted]) {    
    display: none;  
}

安装video.js

$ npm install video.js

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

Vue.prototype.$video = Video

跳转某个时间段 

 jumpToTime(time) {
      this.player.currentTime(time);
    },

<div class="rvideos-box" v-for="(item,i) in dataList" :key="i">
    <div class="rvideos-item" @click="changePlay">
        <video :id="item.id" :src="item.video_url" muted></video>
        <img :data-id="item.id" class="video-icon" 
         src="../../../assets/image/play.png"/>
    </div>
 </div>

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;
    }