css - `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。

我该如何解决？

谢谢你。

标签： cssclassiframesafarivimeo

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 上有点不走运。

希望这能回答你的问题。