本文最后更新于 367 天前,其中的信息可能已经有所发展或是发生改变。如有错误,请联系我修改。
项目背景
最近给工作室旗下服务器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
的播放。