海报属性在 iPhone 5 上的视频标签中不起作用

Posted 2023-05-07

【中文标题】海报属性在 iPhone 5 上的视频标签中不起作用

【英文标题】：Poster attribute not working in video tag on iPhone 5

【发布时间】：2014-02-28 23:37:13

【问题描述】：

有人知道ios7 Safari for iPhone 是否存在视频标签中的poster 属性问题吗？

虽然我的应用程序适用于 Chrome（iPhone、iPad、笔记本电脑）和 iOS7 Safari（仅限 iPad），但我的应用程序一直存在问题。虽然视频播放正常，但 iPhone 版 iOS7 Safari 无法呈现海报图像。

根据 html5Test.com，适用于 iPhone 的 iOS7 Safari 支持视频元素并提供海报图像支持。但是，使用来自http://www.w3schools.com/tags/att_video_poster.asp 的示例代码，您会注意到海报图片无法在 iPhone 上为 Safari 加载（但在 Chrome 上可以正常工作）。

另外，根据 Apple（请参阅“展示海报”）：

“设置海报图像通常具有暂时性效果 - 海报图像仅在视频的第一帧可用之前显示，这通常是一两秒。然而，在 iOS 上，直到第一帧才显示用户发起播放，推荐一张海报，如清单1-2所示。"

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

只是想确保在我使用 hack 解决这个问题之前没有遗漏一些简单的东西。

【参考方案1】：

我通过使用 PNG 而不是 JPG 来完成这项工作。

奇怪的是，JPG 在本地 iOS Safari 中工作（通过本地 wifi 上的 POW 服务器），但是当被推送到暂存海报图像时没有加载。本地代码和暂存代码都引用了 S3 上的同一个文件。

将文件格式更改为PNG，加载正常。