Safari 和 Chrome 中的 HTML5 视频海报属性
Posted
技术标签:
【中文标题】Safari 和 Chrome 中的 HTML5 视频海报属性【英文标题】:HTML5 Video poster attribute in Safari and Chrome 【发布时间】:2011-03-15 11:01:38 【问题描述】:在 Firefox 中,VIDEO
标签的海报属性指定的图像会一直显示在屏幕上,直到按下播放按钮。然而,在 Webkit 浏览器(Safari 和 Chrome)中,只要获取视频元数据,就会转储海报以支持视频中的第一帧。
如果可以的话,我想避免手动将海报放置在视频元素的顶部。有谁知道解决这个问题?
<video src="some_url" poster="images/poster.jpg">
<source type="video/ogg" src="some_url" />
</video>
【问题讨论】:
该问题已报告至bugs.chromium.org/p/chromium/issues/detail?id=1007988 【参考方案1】:似乎 WebKit 会在视频被下载后立即删除该属性,因为 Iphone 和 Ipad 的 ios 3.x 有一个严重的错误,即当指定了海报属性时根本无法播放视频。这在 iOS 4 中已修复,但解决方法仍然存在,即使在 Safari 5 中也是如此...有很多用户尚未升级到 iOS 4,所以海报不走运...
我将尝试使用 javascript 将图像绝对定位在视频上,并在播放视频时将其删除 - 这似乎是最好的解决方案...
【讨论】:
是的,我想我可能不得不这样做。不过感谢您的回复。 有人有简单的示例代码来展示如何做到这一点吗?看起来在 Safari 的 iOS 版本上没有必要……【参考方案2】:如果您可以避免不预加载视频,您可以在视频元素上设置 preload="none"。在 Safari 中,这会导致显示海报。
iOS 上的 Safari 可能将 preload="none" 设置为默认值以节省带宽,而桌面版本会预加载,除非您明确告诉它不要这样做。
【讨论】:
这不适用于 Windows 上的 Safari,但看起来它可能会在未来的浏览器版本中开始工作。此外,这在 IE9 中对我有用。 它仅在视频加载之前有效,因此它会显示一段时间,但一旦加载视频,海报就会消失。【参考方案3】:现在是 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()
;
【讨论】:
【参考方案4】:你可以试试下面的代码。
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
【讨论】:
请edit您的回答提供有关您提供的代码如何工作、您已更改的内容等的更多信息。纯代码的答案可能会解决原始提问者的问题,但他们不要帮助未来的读者理解解决方案。以上是关于Safari 和 Chrome 中的 HTML5 视频海报属性的主要内容,如果未能解决你的问题,请参考以下文章
HTML5 Video API - 全屏无法在 iPad 上使用 chrome/safari
HTML5 视频标签在移动 Chrome 上的奇怪行为,但适用于 SAFARI
Chrome 61 上 webworker 中的 HTML5 安全 websocket 连接
HTML5 拖放 - 检测 Safari 中的文件夹(文件列表、文件)