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

Question

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

由于某些原因，视频的缩略图vp-preview-invisible在 Safari 中有类（这使得缩略图不可见），但在 Chrome 中没有该类（这使得缩略图可见）。

铬合金

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

苹果浏览器

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

这是我正在谈论的视频 ID：326869440。

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

我正在使用Version 12.0.1 (13606.2.104.1.2)Safari。

我怎么能修好呢？

谢谢你。

Answer 1

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

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

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

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

最后，你如何解决它？嗯，这就是难点。最简单的解决方法是去掉autoplay=1参数。如果您希望它尽可能自动播放（某些浏览器在某些情况下更宽松），那么您在 Safari 上就不太走运了。

希望这能回答你的问题。