X5内核浏览器,video兼容
程序员文章站
2022-07-01 23:10:14
使用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 } },
上一篇: 前端 - CSS
下一篇: HTML5和CSS3的新特性介绍