微信浏览器及X5内核同层视频播放问题

Posted 2023-03-15

参考技术A 最近要被微信浏览器搞炸了，在app内的页面使用视频播放没问题，放到微信内视频播放就会自动全屏，很难受，多方查证下，发现可以设置video属性“x5-video-player-type”声明启用同层H5播放器

x5-video-player-fullscreen全屏方式
视频播放时将会进入到全屏模式

如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）

注： 声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现

需要监听窗口大小变化(resize)实现全屏

注: : 1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况

功能：声明播放器支持的方向

可选值： landscape 横屏, portraint竖屏

默认值：portraint

e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html

横屏

竖屏

跟随手机自动旋转

注: 此属性只在声明了x5-video-player-type=”h5”情况下生效

支持版本: TBS中从>=036900开始支持，QB中是>=7.2开始支持

x5videoenterfullscreen: 表示播放器进入全屏状态

示例：

通过JS监听事件

x5videoexitfullscreen: 表示播放器退出了全屏状态

使用方法与x5videoenterfullscreen类似