为什么 iOS 上的 Safari 不显示我的 HTML5 视频海报？答案

【问题标题】：Why Safari on iOS is not showing my HTML5 video poster?为什么 iOS 上的 Safari 不显示我的 HTML5 视频海报？
【发布时间】：2013-09-07 22:31:45
【问题描述】：

我有这个网页：
http://healthpad.net/dashboard/
它有 10 个 <video> 元素。

由于某种原因，当我在 iPad 上加载页面时，它没有显示视频海报。

尝试以下方法：

在桌面浏览器上加载页面
在 iPad 或 iPad 模拟器上加载它，你会得到一个带有播放按钮的大黑盒子

请告诉我为什么会这样？

以下是我已经排除的：

图像内容类型标题。
我已验证正确设置了图像内容类型标头。在上面的示例中，Content-Type 标头正确地为image/jpeg。

对 video.js 库的干扰
VideoJs 用于在桌面浏览器上显示漂亮的播放按钮并自定义控件。但是，此库不会干扰本机播放器。
只是为了确保，我创建了一个没有 video-js 类的测试视频页面，因此该库不会拾取和处理该视频。事实上，测试页面甚至没有包含任何 JS 库，它只是

<html><body>
    <video
        controls
        height="400"
        width="600"
        poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
        src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
    ></video>
</body></html>

http://healthpad.net/rj_templates/test/zzz/

使用 Mobile Safari 可能不支持的任何视频属性
上面的测试页面只有一个普通的视频标签。我试过删除除src 和poster 之外的所有其他属性，但没有帮助。

有关该主题的大多数 StackOverflow 问题都只是说“重启你的 iPad”

这就是奇怪的地方：

如果您在这方面搜索，StackOverflow 上已被接受的答案通常会说“重新启动您的 iPad，这对我有用”。

所以我尝试过做同样的事情，一开始我只是说它在我的情况下不起作用。

然后，我尝试了这个：
（iPad模拟器上的所有以下内容）

转到网站，视频海报不显示
转到测试页面 (http://healthpad.net/rj_templates/test/zzz/)，视频海报不显示。
单击主页退出 Safari（或模拟器的 Cmd+Shift+H mac 快捷方式）
双击主页按钮可将任务切换器移至 Safari 之外，点击并按住 Safari 图标直到显示终止按钮。
杀死 Safari
打开 Safari（重新启动）。此时，如果您加载测试页面（只有一个视频的页面），就会显示海报。
现在转到多视频页面：(http://healthpad.net/dashboard/)。视频海报不显示。
返回单视频测试页面，该页面的视频海报也不再有效。
重复第 3 步到第 8 步，查看视频海报何时停止工作的过程。

显然，Mobile Safari 决定不再显示任何视频海报。此外，显然，我的网站触发了这种情况。

说明：

当海报不再起作用时，它不仅出现在一个域中，也不会为任何其他站点加载视频海报，无论它是否位于完全不同的域中（例如来自http://www.videojs.com/ 的演示视频） .

根据我所见，为了重置此行为，您必须杀死并重新启动 Safari。只是关闭并重新打开它不会重置此状态。

有人知道为什么会这样吗？有办法解决吗？

【问题讨论】：

所以你也看到了普通视频标签的问题，还是只是在使用 video.js 时？还有什么版本的video.js和什么iOS版本？
普通视频标签也会发生，即使 videojs 不存在。

标签： ios ipad html5-video mobile-safari

【解决方案1】：

编辑：看起来这不再有效。鉴于 iOS 在过去 7 年发生了如此大的变化，这并不令人震惊。

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

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

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

【讨论】：

2018 年 1 月。poster="...png " 不适用于 ipad 和 iphone。最后的 iOS
2021 年 3 月 png 对我也不起作用

【解决方案2】：

我看到这个问题时不时地被投票赞成，尽管没有答案。所以这就是我最终做的事情：

在 iOS 上，我不会显示视频播放器（即使是 autoload=false），我只会显示海报和一个播放按钮，两个独立的 <img> 标签。当他们被点击时，我从 javascript 创建视频播放器并告诉它播放。工作正常，用户看不出太大区别。

【讨论】：

您能否发布一下您是如何即时创建此视频的，以及在用户停止/关闭视频后您如何处理它？
就像答案说的那样，<img> 标签带有一个创建视频播放器的点击事件。视频没有关闭它的选项，当用户与之交互时，在 iOS 的情况下，它是与原生 safari 播放器的交互。
是的，但是当用户关闭视频时，它会留在页面中还是什么？
您能说明一下您是如何在 iPad 上自动播放视频的吗？或者你必须双击才能看到视频？

【解决方案3】：

我通过在我的代码中添加 preload="none" 来修复它。

<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">

【讨论】：

【解决方案4】：

在 Safari 设置 [iOS7] 阻止弹出窗口“关闭”似乎可以解决这个问题，希望对我有所帮助。

【讨论】：

【解决方案5】：

好吧，如果有人仍然坚持这一点，这就是我设法在 React.js 中完成它的方法，但算法本身应该在任何框架中都很有用：

首先，我在 useEffect 中使用以下内容检测浏览器是否为 safari：

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

然后我将它设置在一个状态对象中。

如果 safari 是真的，那么我不显示视频，而是简单地显示一张以该海报作为其来源的图像。然后我在图像标签上有一个 onClick 处理程序，单击它会将上述状态更改回 false，因此图像组件将停止显示，而是显示视频。现在您必须在这里解决的另一个问题是，单击图像时，图像会消失，视频会出现，然后您必须再次单击视频才能播放。那是糟糕的用户体验。因此，在您设置状态后，您可以简单地将 ref 附加到视频和 Image 的单击处理程序中：

videoRef.current.play()

这也将开始播放视频。我知道这是一个 hacky 解决方案，所以不要来找我，但这是我唯一能做的事情。

【讨论】：