iOS 4.2.1移动版Safari无法显示海报图片。

Question

我一直在开发一个专为iPad设计的网站，使用HTML5视频。虽然我已经让视频播放正常运行了，但我却无法让海报图像出现。在桌面版Safari上看起来很好。以下是代码：

<video src="video/about_the_man.mp4" controls height=360 width=480  poster="video/posters/about_the_man.jpg"></video>

我参考了这个链接 (清单1.2)：https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

它说在 iOS 上，只有用户启动播放后才会显示海报图像，但现在我得到的是一个黑色的视频大小的屏幕，中心有一个大的播放按钮。我查看了其他帖子 (here 和 here)，但都没有对我起作用的解决方案。这个网站唯一不太常规的地方就是视频元素在一个内联灯箱中，因此在页面加载时最初不可见，但我不知道这会有什么影响。

- justinbach

---

不，还没有。看起来这似乎在很大程度上取决于iOS版本（和月相），因为我无法在iPad上可靠地复制它。唉... - justinbach

Answer 1

我曾经遇到过完全相同的问题。我决定在其他iPad上尝试我的代码，结果它能正常工作，海报图像也显示出来了。

经过一番思考后，解决方案是强制重置iPad并再次尝试。重启后，我的iPad正确地显示了海报图像。

也许对你也有帮助？

- Critter

---

经过数小时的研究，我所需要做的就是重新启动iPad。哈！我的天啊。 - Ole Media

我可以确认，在没有灯箱的页面上，使用普通的<video>元素（没有js增强）也对我起到了同样的修复作用。在iPad2 iOS 4.3.5上测试通过。 - Maks

在 iOS 7.2.1 上仍然是一样的。 - FlorianLudwig

Answer 2

我发现在iPad上加载图片有数量限制。

以下是原文：

最近在iPad上建立一个AJAX网站时，我遇到了移动版Safari的限制。如果你加载了大量的图片，移动版Safari最终会将其截断，并显示[?]而不是图片。经过一些测试，似乎这个限制大约为6.5 MB。这是一个测试页面，尝试加载20张500kb的图片。在iPad上打开此页面时，其中7张图片没有出现，即使在Charles中它们返回200 - 成功。我认为这与iPad / iPhone上的视频标签禁用自动播放方式类似。苹果可能希望确保用户在使用3G浏览时不会下载过载。

无论如何，6.5 MB是一个很大的负荷，在3G上表现不佳，但由于某种原因，您可能希望解决此限制。我发现修补代码的最简单方法是使用drawImage()将图像加载到画布标记中。画布标记似乎免疫限制。

这是一个使用canvas标签的另一个测试页面，所有图片应该都会加载。

- Tek