微信浏览器video播放视频踩坑,如何避免?

摘要:video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inline, and will not auto
video属性介绍 iOS的属性 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. 来源-webkit官网-New video policiesfor iOS iOS设置了这个属性就不会自动全屏了,但是Android微信和QQ有腾讯的限制,仍旧会自动全屏。 腾讯X5属性 x5-video-player-type 启用H5同层播放器 H5同层播放器:DOM可以浮在video上面 非H5同层播放器:video元素在最上层 ( 微信里会有腾讯的广告 ) x5-video-player-fullscreen 全屏方式 视频播放时将会进入到全屏模式 如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块) 来源-腾讯浏览服务-H5同层播放器接入规范 相关CSS object-fit: 控制视频填充方式 object-position: 控制视频显示位置 问题 全面屏适配 x5-video-player-fullscreen="true" 视频会铺满屏幕,但是H5同层播放器的顶部栏位置在刘海下面。因此刘海位置的视频不会被顶部栏遮盖。 x5-video-player-fullscreen="false" 视频不会铺满屏幕,大多数机型和H5同层播放器大小一致,刘海处黑色。部分机型,如小米8,则有问题。 实际效果 是否启用同层播放器都会自动进入全屏,区别是全屏使用的播放器不同。 案例: 轻视频:示例 没有启用H5同层播放器,但播放不会自动进入全屏。网上有说法,视频格式是立体声的,不会自动进入全屏。轻视频的视频格式确实是立体声的,但使用轻视频的视频试验,仍旧会自动进入全屏。 (此处有没有大佬解答!!) 快手:示例 快手复制链接到微信,提示用浏览器打开。直接从快手APP分享到微信,才能在微信打开。 启用H5同层浏览器,自动进入全屏。