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

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