vue-video-player在移动端点击视频画面不会暂停的问题

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();
								}
							}
						}
					});
				}
			});
		},

在视频全屏的情况下也是可以的。

你可能感兴趣的:(javascript,前端,vue.js,音视频,javascript)