[英]HTML5 Video poster attribute in Safari and Chrome
在 Firefox 中,由VIDEO
标签的海报属性指定的图像会一直显示在屏幕上,直到按下播放按钮。 然而,在 Webkit 浏览器(Safari 和 Chrome)中,一旦获取视频元数据,海报就会转储到视频的第一帧。
如果可以的话,我想避免手动将海报放在视频元素的顶部。 有谁知道解决这个问题?
<video src="some_url" poster="images/poster.jpg">
<source type="video/ogg" src="some_url" />
</video>
似乎 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 中,视频标签是在海报属性值改变时设计的,它会自动加载。 但 chrome/edge 不会load()
; 所以你应该手动player.load()
;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.