代码之家 › 专栏 › 技术社区 › Roman

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

webkit html5 css html javascript

Roman · 技术社区 · 14 年前

在firefox中,由 VIDEO 在按下播放按钮之前,标签一直保留在屏幕上。然而,在WebKit浏览器(Safari和Chrome)中,一旦提取到视频元数据,海报就会被丢弃,以支持视频的第一帧。

如果可以的话,我想避免手动将海报放在视频元素的顶部。有人知道解决这个问题的方法吗?

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

2 回复 | 直到 13 年前

Leo 14 年前

似乎webkit在获取视频后会立即删除该属性,因为iOS 3.x for iphone和ipad有一个严重的错误,当指定了海报属性时,根本无法播放视频。这在iOS 4中得到了修复,但解决方案仍然存在,即使是在Safari 5中……有很多用户还没有升级到iOS 4,所以没有成功的海报……

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

David Owens 13 年前

如果您不需要预加载视频,可以在视频元素上设置preload=“none”。在Safari中,这会显示海报。

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

推荐文章

Bob · 检查UIWebView是否已在Swift中加载完毕

6 年前

Laust Deleuran · Canvas createRadialGradient()在Chrome v65中未按预期工作

6 年前

CodeGeekBot · Xcode 9.2-WebView不工作

6 年前

Mario Burga · 如何在webkit视图中显示url

6 年前

Stefan Orzu · 在Chrome中按字体大小和字体样式重置OpenType设置

6 年前

ch1maera · 在Swift、WKWebView中遍历JavaScript元素

7 年前

Pasha Skender Bergi · JFX Webview post JAVA 1.8.0_121变得更糟

7 年前

Herel Adrastel · 不推荐使用的方法是否由最新的API执行?

8 年前

Sergey · Google Chrome开发工具启动非常缓慢

8 年前

André Hikaru · 悬停时模糊/取消模糊2种不同背景

9 年前