首页 热点专区 小学知识 中学知识 出国留学 考研考公
您的当前位置:首页正文

webkit 之 video 的自动播放 autoplay

2024-12-13 来源:要发发知识网

一直以来,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, 一旦不满足之上条件,它会自动停止。

参考:

显示全文