html5 x5引擎,HTML5+CSS3从入门到精通之快速了解X5内核浏览器，video兼容

本篇文章主要讲述HTML5+CSS3从入门到精通之快速了解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' 启用Ｈ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            }

},

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！