ios - 在 Safari 和 IOS 中使用“Gifs”：视频不会自动播放

Question

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

但是，Safari 拒绝自动播放视频，即使是autoplay loop muted playsinline.

有没有办法创建不需要大文件大小并且可以在移动设备中自动播放的循环视频/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 中的视频自动播放，或任何最佳实践替代方案？

标签： iosvideohtml5-videomobile-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 可以不在存储服务器上播放 mp4 视频

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

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

默认情况下，WebKit 将具有以下策略：