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

Question

在Firefox中，VIDEO标签的poster属性指定的图像将一直保留在屏幕上，直到按下播放按钮。然而，在Webkit浏览器（Safari和Chrome）中，poster会在视频元数据被获取后立即被第一帧视频所代替。

如果可以的话，我想避免手动将poster放在视频元素之上。有人知道如何解决这个问题吗？

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

- Roman

---

该问题已在https://bugs.chromium.org/p/chromium/issues/detail?id=1007988上报告。 - Jezwin Varghese

Answer 1

如果您不必预加载视频，则可以在视频元素上设置preload ="none"。在Safari中，这将显示海报。

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

- David Owens

---

这在Windows上的Safari浏览器中不起作用，但看起来它可能会在未来的浏览器版本中开始工作。此外，这对我在IE9中起了作用。 - Syntax Error

它只在视频加载时起作用，因此它会显示一段时间，但是一旦视频加载完成，海报就会消失。 - Hadi Pawar

Answer 2

似乎WebKit在获取视频后立即剥离属性，因为iPhone和iPad的iOS 3.x存在严重错误，当指定海报属性时根本无法播放视频。这在iOS 4中得到了修复，但解决方法仍然保留，甚至在Safari 5中也是如此...还有许多用户尚未升级到iOS 4，所以没有海报就没有用了...

我将尝试使用JavaScript将图像绝对定位在视频上方，并在播放视频时删除它-这似乎是最好的解决方案...

- Leo

---

是的，我也觉得我可能最终不得不这样做。不过还是谢谢你的回复。 - Roman

有人有简单的示例代码展示如何做到这一点吗？看起来在Safari的iOS版本构建中不是必需的... - theory

Answer 3

您可以尝试以下代码。

<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
      <source src="video/video.mp4#t=0.5" type="video/mp4">
</video>

- Jenish MS

---

请编辑您的答案，提供有关您提供的代码如何工作、您所做的更改等更多信息。仅提供代码的答案可能会解决原始提问者的问题，但它们无法帮助未来的读者理解解决方案。 - LW001

Answer 4

现在是2020年1月，所以你可能已经找到了解决方案。 但我把我的解决方案留给其他人。 很多人说这是一个bug，但我不同意。 这只是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()方法。

- dreamy