X5內核瀏覽器,video兼容

使用vue-video-player在移動端微信內置瀏覽器打開,點擊視頻自動全屏問題。 參考官方 API 是 H5 同層瀏覽器的緣由,可經過設置video屬性來處理。 html

 <video-player class="video-player vjs-custom-skin "
        ref="videoPlayer"
        :playsinline='true'
        :options='videoOptions'
        @canplay="onPlayerCanplay($event)"
       >
 </video-player>

 

onPlayerCanplay (player) {    
            let 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')  // 設置android在微信中內聯播放視頻
                
                .attr('x5-video-player-type','web') // 關閉同層X5內核播放器    x5-video-player-type='h5' 啓用H5同層播放器
                // .attr('x5-video-player-fullscreen','true')  // 進入全屏通知
                .attr('x5-video-orientation','portrait')  //控制橫豎屏 可選值: landscape 橫屏, portraint豎屏  默認值:portraint
            } else {
                // ios端
                // alert('ios')
                $('body').find('video')
                .attr('webkit-playsinline', 'true')  //設置ios在微信中內聯播放視頻 ios9
                .attr('playsinline', 'true')    //設置ios在微信中內聯播放視頻 ios10/ios11
            }
        },
相關文章
相關標籤/搜索