X5内核浏览器,video兼容
使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题。 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理。
ref="videoPlayer" :playsinline='true' :options='videoOptions' @canplay="onPlayerCanplay($event)" >
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 } },