ios - 在 Safari 和 IOS 中使用 "Gifs": Videos won't autoplay

Question

我们不使用真正的 gif，而是使用循环播放的 mp4 视频(以节省加载时间)

但是，Safari 拒绝自动播放视频，即使使用自动播放循环静音播放也是如此。

有没有一种方法可以创建不需要大文件大小并且可以在移动设备中自动播放的循环视频/gif

我的视频标签如下所示:

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                Your browser does not support video tag
</video>

也尝试过:

 <video preload autoplay muted playsinline loop>
                <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                    Your browser does not support video tag
    </video>

在某些情况下，我希望当用户滚动到特定点时启动 gif。所以我使用:

if (/* user scrolls to div */){
   document.getElementById('my-video').play();
}

有没有办法让视频在 Safari 中自动播放，或者有任何最佳实践替代方案？

Answer 1

您的 HTML5 实际上可以很好地处理不同的源视频 - 以下内容在 Mac OSX 10.14.5 上的 Safari 12.1.1 中运行:

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'>
                Your browser does not support video tag
</video>

可能是您使用的视频源或其所在的网络或服务器存在问题 - 例如，当我直接测试时，加载速度非常慢，并且无法在 Chrome 或 Safari 中播放.

如果您在另一个视频中看到相同的问题，则可能是存在格式问题，或者存在以前见过的某些服务器到 safari 的指示问题，但目前尚不清楚根本原因: Safari 9.0 can not play mp4 video on the storage server

无论哪种方式，上面的原始 HTML5 都没有任何明显的问题。

对于 iOS，有特定的自动播放规则 - 在撰写本文时，这些是最新的 AFAIK ( https://webkit.org/blog/6784/new-video-policies-for-ios/ ):

By default, WebKit will have the following policies: