css - `vp-preview-invisible` 类被添加到 Safari 中的预览缩略图，但不是在 Chrome 中的 vimeo 嵌入视频

Question

我正在使用 vimeo 播放器在我的页面上嵌入视频。

由于某些原因，视频的缩略图在 Safari 中有 vp-preview-invisible 类(这使得缩略图不可见)，但在 Chrome 中没有这个类(这使得缩略图可见) .

Chrome

<div class="vp-preview vp-preview-cover" ... </div>

Safari

<div class="vp-preview vp-preview-cover vp-preview-invisible" ... </div>

这是我所说的视频 ID:326869440。

我需要缩略图在 Chrome 和 Safari 中都可见。

我正在为 Safari 使用 版本 12.0.1 (13606.2.104.1.2)。

我该如何解决？

谢谢。

Answer 1

@YaroslavTrofimov 根据您链接的网站，我可以看到您正在使用它来嵌入播放器 https://player.vimeo.com/video/326869440?autoplay=1&loop=1&title=0&byline= 0&肖像=0。

我看到了问题。这是使用 autoplay=1 参数。自动播放有很多规则，具体取决于浏览器，有些浏览器处理得更好，有些浏览器处理得更差。本质上，所有浏览器现在都试图阻止 UNMUTED 自动播放。 (这是因为用户讨厌打开网站时音频会突然开始播放。)不过，如果您的视频静音，他们将允许您的视频自动播放。因此，当您添加 muted=1 时，它将起作用。但是，此视频包含重要的音频内容，因此您不希望这样做。

那么问题是什么？当您使用 autoplay=1 时，Vimeo 播放器会尝试播放它。但是，浏览器会在片刻之后插入并暂停它(因为它不允许自动播放声音并且它没有注册用户点击播放)。当 Vimeo 播放器尝试播放时，我们总是隐藏缩略图。它是由浏览器暂停的，而不是用户单击暂停的，这一事实与播放器无关并且是未知的。与您点击播放然后点击暂停的方式相同，我们不会再次显示缩略图。这就是正在发生的事情。

所以您可能想知道为什么 Chrome 和 Safari 不同。我认为这只是他们检测到您的自动播放尝试的速度以及何时停止的问题。因为每个浏览器都是自己做的，所以我们无法控制。

最后，如何修复它？好吧，那是困难的事情。最简单的解决方法是去掉 autoplay=1 参数。如果您希望它尽可能自动播放(某些浏览器在某些情况下更宽松)，那么您在 Safari 上就有点不走运了。

希望这能回答您的问题。