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

【问题标题】：Using "Gifs" in Safari and IOS: Videos won't autoplay在 Safari 和 IOS 中使用“Gifs”：视频不会自动播放
【发布时间】：2020-02-18 22:48:52
【问题描述】：

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

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

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

我的视频标签如下所示：

<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 中的视频自动播放，或任何最佳实践替代方案？

【问题讨论】：

标签： ios video html5-video mobile-safari

【解决方案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/)：

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

【讨论】：

谢谢，但它在 iOS 中不起作用。最新的 iOS 似乎不再允许自动播放。
@auto - 是的，iOS 有不同的规则，但如果您满足条件，它仍应自动播放，请参阅更新以回答。
N 也不适用于我，通过 WebRTC 接收 MediaStream。我在 video 元素上有这些属性，在添加一个新的 MediaStream 之前，我还用 js 再次设置了它们，该 MediaStream 只使用来自receiveds 流的第一个视频 MediaStramTrack 创建。 element.play() 也被拒绝
@netizen - sn-p 中的源视频似乎有问题，所以我对其进行了更改并再次验证。如果您在 Safari 上运行，上面的 sn-p 现在应该可以工作了。如果您的意思是您自己的示例不起作用，那么可能是发布一个锯齿状问题，特别是解释 WebRTC 交互，如果您也可以共享链接。
我不能发布那个代码，但是场景就像这里你有一个伪 URL 允许你查看我们的流，点击它会发送一个 websocket 消息，如果获得批准，就会启动一个结束的 webrtc 协商在接收流事件的 PeerConnection 上。该流在本地用于创建视频元素（在 html 和 js 中设置所有四个属性），将流分配给 srcObject 并尝试播放。我已经改变了许多事情的顺序，因为视频元素已经在 DOM 中等等。只有 iOS 中的 Safari 拒绝播放，所以我们在需要时添加了播放按钮。