美文网首页
webkit 之 video 的自动播放 autoplay

webkit 之 video 的自动播放 autoplay

作者: 472abb2e4941 | 来源:发表于2018-03-13 13:56 被阅读457次

    一直以来,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

    相关文章

      网友评论

          本文标题:webkit 之 video 的自动播放 autoplay

          本文链接:https://www.haomeiwen.com/subject/jzlzfftx.html