X5内核浏览器，video兼容

摘要：使用vue-video-player在移动端微信内置浏览器打开，点击视频自动全屏问题。参考官方 API 是 H5 同层浏览器的原因，可通过设置video属性来处理。

使用vue-video-player在移动端微信内置浏览器打开，点击视频自动全屏问题。参考官方 API 是 H5 同层浏览器的原因，可通过设置video属性来处理。

<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' 启用Ｈ5同层播放器
        // .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
    }
},

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3351