在 Firefox 中，VIDEO 标签的海报属性指定的图像会一直显示在屏幕上，直到按下播放按钮。然而，在 Webkit 浏览器（Safari 和 Chrome）中，只要获取视频元数据，就会转储海报以支持视频中的第一帧。
如果可以的话，我想避免手动将海报放置在视频元素的顶部。有谁知道解决这个问题？
<video src="some_url" poster="images/poster.jpg">
<source type="video/ogg" src="some_url" />
</video>
【问题讨论】：
标签： javascript css html webkit
似乎 WebKit 会在视频被下载后立即删除该属性，因为 Iphone 和 Ipad 的 iOS 3.x 有一个严重的错误，即当指定了海报属性时根本无法播放视频。这在 iOS 4 中已修复，但解决方法仍然存在，即使在 Safari 5 中也是如此...有很多用户尚未升级到 iOS 4，所以海报不走运...
我将尝试使用 Javascript 将图像绝对定位在视频上，并在播放视频时将其删除 - 这似乎是最好的解决方案...
【讨论】：
如果您可以避免不预加载视频，您可以在视频元素上设置 preload="none"。在 Safari 中，这会导致显示海报。
iOS 上的 Safari 可能将 preload="none" 设置为默认值以节省带宽，而桌面版本会预加载，除非您明确告诉它不要这样做。
【讨论】：
现在是 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中，video标签被设计为当poster属性值改变时，它会自动加载。但 chrome/edge 不会 load();
所以你应该手动player.load()；
【讨论】：
你可以试试下面的代码。
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
【讨论】：