Question

我有这个网页：
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/），视频海报不会显示。
单击home退出Safari（或模拟器的Cmd + Shift + H mac快捷方式）
双击主页按钮以获取Safari之外的任务切换器，点击并按住Safari图标，直到显示终止按钮。
杀死Safari
打开safari（重启）。此时，如果您加载测试页面（只有一个视频），海报将会显示。
现在转到多视频页面：（http://healthpad.net/dashboard/）。视频海报不显示。
返回单视频测试页面，该视频海报不再有效。
重复步骤3到8，查看视频海报何时停止工作的过程。

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

澄清：

当海报不再有效时，它不仅会出现在一个域上，也不会为任何其他网站加载任何视频海报，无论它是否位于完全不同的域上（例如来自{{3}的演示视频） }）。

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

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

Answer 1

我使用PNG而不是JPG来实现这一点。

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

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

Answer 2

虽然没有答案，但我发现这个问题偶尔会被提升。所以这就是我最终做的事情：

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

Answer 3

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

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

Answer 4

在Safari设置[iOS7] Block Pop-Ups转为“OFF”似乎为我解决了这个问题，希望这会有所帮助。

Answer 5

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

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

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

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

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

videoRef.current.play()

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

为什么iOS上的Safari没有显示我的HTML5视频海报？

5 个答案: