四年前因为开发视频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场景下其实用不着

以上解决方案在目前大部分安卓或者iOS手机上都运行正常了，但是如果用户还是用几年前的安卓手机并且不升级微信，那我们也不用太纠结了，只能放弃这类访问者。

补充一个未解的问题，虽然已经影响不大：
苹果官方说x-webkit-airplay=”deny”可以禁止airplay，但我在自己的项目，iPhone里面video的控制栏照样会出现airplay的图标。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/2294.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。