解决video标签播放在微信浏览器中自动全屏的坑（vue-video-player使用后续）

解决video标签播放在微信浏览器中自动全屏的坑（vue-video-player使用后续）

属性熟悉

下面是微信video中几个Attribute的作用

• poster=“loadbg.jpg” : 视频封面
• x-webkit-airplay=“allow” : 允许iOS的airplay
• x5-video-player-type=“h5” : 启用x5内核的播放器,是微信安卓版特性,另外在X5内核里，video是单独的一个view，会覆盖在任何元素之上,据说是为了统一用户体验，加上这个属性之后，也可以让其他元素浮在video上面了
• x5-playsinline=“true”: 在x5内核的播放器中小屏播放
• x5-video-player-fullscreen=“true”: 全屏设置，设置为 true 是防止横屏
• x5-video-orientation=“portraint”: 播放方向，landscape横屏，portraint竖屏，默认值为竖屏
• webkit-playsinline=“true”: 这个属性是iOS中设置可以让视频在小窗内播放，也就是不是全屏播放
• playsinline=“true”: IOS微信浏览器支持小窗内播放

思路与初尝试

上面属性熟悉后,有了些思路, 不就是把上面要的属性都写一遍吗,这样iOS端和android端微信都能起作用, 然鹅, 实际情况并非如此。 经过我无数次尝试, 总结出就是得分开写!!

代码修改

1. 之前:playsinline="playsinline"这里是true写死的,现在改为计算属性playsinline(),代码如下

<video-player  class="video-player-box"
	                 ref="videoPlayer"
	                 :options="playerOptions"
	                 :playsinline="playsinline" 
	                 customEventName="customstatechangedeventname"
					 
	                 @play="onPlayerPlay($event)"
	                 @pause="onPlayerPause($event)"
	                 @ended="onPlayerEnded($event)"
	                 @waiting="onPlayerWaiting($event)"
	                 @playing="onPlayerPlaying($event)"
	                 @loadeddata="onPlayerLoadeddata($event)"
	                 @timeupdate="onPlayerTimeupdate($event)"
	                 @canplay="onPlayerCanplay($event)"
	                 @canplaythrough="onPlayerCanplaythrough($event)"
	                 @statechanged="playerStateChanged($event)"
	                 @ready="playerReadied">
	    </video-player>

2. 添加playsinline()这个计算属性,原因是在安卓和iOS端微信使用的内核不同,所需要的attribute也不同,尝试后,采用x5内核返回false,反之为true

computed: {
    playsinline(){
    		var ua = navigator.userAgent.toLocaleLowerCase();
       //x5内核
    if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
    	return false
    }else{
    	//ios端
		return true				
    }
    }
  },

3. 配合jq工具,继续添加两个端所需的属性

//在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调
onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
        //解决自动全屏
        var ua = navigator.userAgent.toLocaleLowerCase();
        //x5内核
	    if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
	    	
	        $('body').find('video').attr('x-webkit-airplay',true).attr('x5-playsinline',true).attr('webkit-playsinline',true).attr('playsinline',true)
	    }else{
	    	//ios端
	        $('body').find('video').attr('webkit-playsinline',"true").attr('playsinline',"true") 
			
	    }

      }

总结

1. 以区分两个端内核的不同,按需添加所需的Attribute
2. ":playsinline"组件中自定义属性按内核不同按需传值, x5内核为false,反之为true然后来渲染组件(具体原理有待挖掘)