欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

X5内核浏览器,video兼容

程序员文章站 2022-04-14 15:30:36
使用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' 启用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
            }
        },