Question

在Firefox中，VIDEO标签的poster属性指定的图像将保留在屏幕上，直到按下播放按钮。但是，在Webkit浏览器（Safari和Chrome）中，只要获取视频元数据，海报就会转向视频中的第一帧。

如果可以的话，我想避免手动将海报放在视频元素的顶部。有谁知道修复此问题？

<video src="some_url" poster="images/poster.jpg">
    <source type="video/ogg" src="some_url" />
</video>

Answer 1

如果您无法预加载视频，则可以在视频元素上设置preload =“none”。在Safari中，这会导致显示海报。

iOS上的Safari可能会将preload =“none”设置为默认设置以节省带宽，而桌面版本会预先加载，除非您明确告诉它不要。

Answer 2

似乎WebKit会在视频出现后立即删除该属性，因为Iphone和Ipad的iOS 3.x有一个严重的错误，即当指定了海报属性时根本无法播放视频。这已在iOS 4中修复，但解决方法仍然存在，即使在Safari 5中......有很多用户尚未升级到iOS 4，所以海报没有运气......

我将尝试使用Javascript将图像完全放在视频上，并在播放视频时将其删除 - 这似乎是最佳解决方案......

Answer 3

现在是2020年1月，因此您可以找出解决方案。但我将解决方案留给了其他人。许多人说这是一个错误。但我不同意。这只是firefox和chrome / edge之间的区别。

假设您的HTML中有<video preload="metadata">，然后发布到服务器缩略图中。然后您将发布者值更改为src服务器提供给您的值。像这样：

xhr.addEventListener("load", function() {
    if (this.status === 200) {
      const data = JSON.parse(this.responseText);
      player.poster = `/image/${data.thumbnailMain}`; // change the poster value
      player.load();                                  // then load.
    } else {
      console.error(this.responseText);
    }
  });

在firefox中，视频标签是在海报属性值更改时设计的，它将自动加载。但是chrome / edge不会load()；因此您应该手动player.load()；

Safari和Chrome中的HTML5视频海报属性

3 个答案: