iOS微信浏览器Web视频banner自动播放
本文最后更新于 256 天前,其中的信息可能已经有所发展或是发生改变。如有错误,请联系我修改。

项目背景

最近给工作室旗下服务器Miracle Town做了一个基于bootstrap的官网(https://www.mtsmc.net/),其中有一个视频的banner需求。

PS:整个项目在Github开源了,感兴趣的小伙伴可以去看看~
吐槽:iOS微信浏览器真的是世界上最难适配的平台。。。yue。。。😅

问题

在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的播放。

本文内容采用 CC BY-NC-SA 4.0 协议共享,作者为 Nero978 ,转载请注明出处。
文章标题:iOS微信浏览器Web视频banner自动播放
文章链接:https://nero978.top/archives/119
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇