一直以来,video 标签的 autoplay 属性在移动端是无效(这里不涉及各种容器的sdk,譬如说微信)。这是出于流量、电量的保护,必须在用户手势下才能触发播放。
但是 webkit 在 2016 年对视频自动播放采用了宽松的策略,说来有意思,这个策略其实是用来解决 GIF 的问题,用 mp4 去取代 gif,有统计显示同等效果显示,gif 体积上可能是后者的 8倍,解码耗能是后者的2倍。
新的策略在 chrome for android(v53)和 safari for ios(10)以上有效,自动播放必须满足以下条件才有效:
-
<video> 标签必须有
autoplay
的属性 -
<video> 必须设置
muted
属性,或者本身它就不包含音轨 -
在 ios safari 中使用
playsinline
属性可以使得视频在网页中播放而不是全屏模式播放(全屏是需要手势触发的)。 -
<video autoplay>
仅当这个元素在屏幕内可见范围内才会自动播放,比如滚动到视频位置,video 的 css 要 visible, 一旦不满足之上条件,它会自动停止。
参考:
https://webkit.org/blog/6784/new-video-policies-for-ios/
https://blog.synq.fm/html5-video-looping-autoplay-on-ios-and-android
网友评论