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

这篇具有很好参考价值的文章主要介绍了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

页面文章来源地址https://www.toymoban.com/news/detail-511538.html


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