vue 项目中使用video实现视频播放效果暂停播放（多个视频）

<video :src="video_url"  controls="controls" style="width:100%;height:100%;" ref="vueMiniPlayer"></video>

根据ref判断是否暂停状态返回true false

this.$refs.vueMiniPlayer.paused;  //true  false
this.$refs.vueMiniPlayer.pause();//暂停
this.$refs.vueMiniPlayer.play();//播放

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

安装video.js

npm install video.js

在main.js中引用

import Video from 'video.js'
import 'video.js/dist/video-js.css' 
Vue.prototype.$video = Video

页面

<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>//自动播放属性,muted:静音播放
        <img :data-id="item.id" class="video-icon"
        src="../../../assets/image/play.png"/>
    </div>
</div>
data(){
    
    
    old_id:0,
    dataList:[]
}
//控制单个视频的播放暂停(独立)
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;
}