标签 video 下的所有文章

填坑 – 关于H5 video标签在各版微信浏览器内的兼容问题

四年前因为开发视频H5的时候踩坑,我写过一篇博客《关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题》。时隔多年,因为微信更新多次,这个坑应该是早已平了(如果还有请留言告知)。由于在那篇博客文末给的腾讯官方解决方案链接也已经失效,在此还是记录一下目前最通用的解决方案吧。

<video id="myVideo" src="..." poster="..." preload="no" autoplay="autoplay" loop="loop" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true">
	<source src="..." type="video/mp4" />
	<img src="..." />
</video>

video标签的关键属性和作用

  • webkit-playsinline / playsinline:iOS端默认视频只要一运行就会全屏播放,这个属性允许视频播放不弹全屏,维持在页面原位置播放;
  • x5-video-player-type=”h5″:解除微信浏览器内video自家播放器的绑定;
  • x5-video-player-fullscreen=”true”:是否支持全屏,如果设置为false则在微信浏览器里全屏那个标记不出现,一直维持video标签的尺寸播放视频;
  • x5-video-orientation=”portraint” 视频方向,portraint为竖屏,landscape是横屏,x5-video-player-type=”h5″有效;
  • x-webkit-airplay=”true”:iOS的airplay功能,一般用于投屏到大屏幕上,这个在H5场景下其实用不着

查看详细 »