本文最后更新于 249 天前，其中的信息可能已经有所发展或是发生改变。如有错误，请联系我修改。
项目背景
最近给工作室旗下服务器Miracle Town做了一个基于bootstrap的官网（https://www.mtsmc.net/），其中有一个视频的banner需求。
PS：整个项目在Github开源了，感兴趣的小伙伴可以去看看~
问题
在iOS微信浏览器、Safari平台上
- 视频不能自动播放
- 播放视频时出现播放控件
- iOS特有的视频自动播放时全屏播放
其他平台正常。
解决方案
在找了一堆技术分享文章之后总分算找到了解决办法。。
<!-- index.html -->
<!-- 视频块 -->
<video id="banner-video" autoplay muted loop class="d-block" x5-playsinline="true" playsinline="true" webkit-playsinline="true" preload="auto" x5-video-player-fullscreen="false" source src="img/banner.mp4" type="video/mp4">
</video>
<!-- 引入微信js -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!-- 引入自定义js -->
<script src="js/index.js"></script>//index.js
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('banner-video').play();
}, false);其中，autoplay muted loop 分别设置自动播放、静音、循环播放。
x5-playsinline="true" playsinline="true" webkit-playsinline="true"是内联播放，这样就可以使视频在我们设置好的区域内播放了。
设置好x5-video-player-fullscreen="false"，禁用自动全屏播放。
因为普通的autoplay属性对微信浏览器不生效（我也不知道为啥，莫名其妙的），所以我们这里通过调用微信js的方法实现WeixinJSBridgeReady的事件监听，然后调用banner-video的播放。
