当前位置： 移动技术网 > IT编程>网页制作>Html5 > 微信浏览器video播放视频踩坑

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

2019年05月15日  | 移动技术网IT编程  | 我要评论

强霸三国,宽带三晋2,结防e站

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

启用ｈ5同层播放器

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同层浏览器，自动进入全屏。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网