1.vue-video-player在web端的时候点击视频画面是可以正常的暂停的,但是在h5端不行
2.解决办法1:在视频元素上加一层自己的蒙版,通过点击蒙版控制视频的播放与暂停,但是这个办法在视频全屏的时候会出现问题,且在视频元素渲染多个或是层级较多的时候代码会写的复杂
3.解决办法2:
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="it.playerOptions"
@pause="onPlayerPause($event, it)"
@play="onPlayerPlay($event, it)"
></video-player>
onPlayerPause(player, it) {
if (it.id == this.isPlayID) {
this.isPlayID = this.currentPlayer.isPlayID;
}else{
this.currentPlayer.isPlay = false // 视频暂停了
}
},
onPlayerPlay(player, it) {
//解决视频可以多个并行播放的问题,实现唯一视频播放,使用中间变量存放当前播放视频,播放其他视频时,暂停当前视频即可
if (this.currentPlayer && this.currentPlayer.id() != player.id()) {
// console.log('暂停正在播放的视频');
this.currentPlayer.pause();
} else {
}
//当视频播放时,显示蒙层
this.isPlayID = it.id;
player.isPlay = true// 正在播放视频
player.isPlayID = it.id;
this.currentPlayer = player;
},
// 给所有视频元素添加事件,点击视频画面可以暂停
addEvent: function() {
this.$nextTick(() => {
let _this = this;
let videoDoms = document.querySelectorAll('.video-js');
if (videoDoms.length == 0) {
return;
}
for(let i = 0;i<videoDoms.length;i++){
videoDoms[i].addEventListener('touchstart', e => {
if (_this.currentPlayer) {
if (_this.isPlayID == _this.currentPlayer.isPlayID) {
if(_this.currentPlayer.isPlay){
_this.currentPlayer.isPlayID = '';
_this.currentPlayer.pause();
}
}
}
});
}
});
},
在视频全屏的情况下也是可以的。