如何在 iPad 上显示 HTML5 视频海报？

Posted 2023-05-08

【中文标题】如何在 iPad 上显示 HTML5 视频海报？

【英文标题】：How do you show HTML5 video's poster on iPad?

【发布时间】：2012-05-05 16:11:30

【问题描述】：

我的 html5 视频语法与 this guy 几乎相同：

<video  
    src="media/bbb.ogv" 
    poster="media/bbb.jpg" 
    durationHint="0:4:44">
</video>

在 iPhone (ios 5.0) 和桌面 Firefox 上，我可以看到海报：

但在 iPad (iOS 5.0.1) 上它不会出现。我记得它曾经在 iOS 低于 5 的 iPad 上工作。

【问题讨论】：

您是否尝试过为海报图片使用绝对 URL？

我设法让我的 Safari 在 iPad 上崩溃。重新启动后，我检查了所有 HTML5 示例网站，缩略图奇迹般地开始工作。我想知道是否有其他人可以重现 iPad 上黑色缩略图的问题。

我在 ipad 中用 iOS 5.0 测试过同样的代码，海报图片来了

您使用的是哪个 HTML5 播放器。我使用带有最新 mediaelement.js 文件的 mediaelement 播放器尝试了相同的代码，它对我有用。您的相对 url 路径可能不正确。再次检查网址。

我使用的是普通的<video>。我没有使用图书馆。

【参考方案1】：

使用绝对路径而不是相对路径尝试相同的代码：

<video  
    src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" 
    poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg" 
    durationHint="00:04:44">
</video>

如果这不起作用，他们的 CDN 可能会阻止外部引用，因此请尝试将文件保存到您自己的本地服务器并使用绝对路径。

注意：您不必使用绝对路径，但它在故障排除时肯定会有所帮助。

如果失败，另一种解决方案是使用绝对定位的图像叠加层，当单击该叠加层时，使用 javascript 激活下面的 标记；但这是一个较旧的 hack，iOS 5+ 不需要。

iOS 3 的视频标签上的海报属性肯定存在已知问题： http://videojs.com/2010/09/ipad-iphone-video-poster-fix-bonus-javascript-placement-fix/

【讨论】：

好电话，我遇到了完全相同的问题，并且困扰了我很长时间。将海报图片移动到没有密码保护的目录中，然后 iPad 可以读取这些图片。 （不需要将我的相对路径更改为绝对路径）。谢谢bcmoney！

好点。我在受密码保护的登台环境中也遇到了问题。

这里有同样的问题：如果我从我自己的登台环境服务器加载它，海报图像不会显示，但如果我从另一个生产服务器加载它会显示。我尝试使用绝对路径并删除密码保护，但这没有帮助。应该还有别的……也许这个请求响应时间？