微信浏览器video播放视频踩坑

video属性介绍

playsinline

On iPhone, video playsinline elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
video elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, video elements without playsinline will continue to play inline.

iOS设置了这个属性就不会自动全屏了，但是Android微信和QQ有腾讯的限制，仍旧会自动全屏。

x5-video-player-type

启用Ｈ5同层播放器

H5同层播放器：DOM可以浮在video上面

非H5同层播放器：video元素在最上层（微信里会有腾讯的广告）

x5-video-player-fullscreen

全屏方式

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

x5-video-player-fullscreen="true"

视频会铺满屏幕，但是H5同层播放器的顶部栏位置在刘海下面。因此刘海位置的视频不会被顶部栏遮盖。

x5-video-player-fullscreen="false"

视频不会铺满屏幕，大多数机型和H5同层播放器大小一致，刘海处黑色。部分机型，如小米8，则有问题。

是否启用同层播放器都会自动进入全屏，区别是全屏使用的播放器不同。

轻视频：示例

没有启用H5同层播放器，但播放不会自动进入全屏。网上有说法，视频格式是立体声的，不会自动进入全屏。轻视频的视频格式确实是立体声的，但使用轻视频的视频试验，仍旧会自动进入全屏。（此处有没有大佬解答！！）

快手：示例

快手复制链接到微信，提示用浏览器打开。直接从快手APP分享到微信，才能在微信打开。

启用H5同层浏览器，自动进入全屏。

来源：oschina

链接：https://my.oschina.net/u/4340047/blog/3537213

标签