45

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

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

尝试以下操作：

  1. 在桌面浏览器上加载页面
  2. 在 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 可能不支持的任何视频属性
上面的测试页面只有一个普通的视频标签。我试过删除除srcand之外的所有其他属性poster，但没有帮助。

大多数关于该主题的 StackOverflow 问题只是说“重新启动你的 iPad”

这就是奇怪的地方：

如果您对此进行谷歌搜索，已接受的 StackOverflow 上的答案通常会说“重新启动您的 iPad，这对我有用”。

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

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

  1. 去网站，视频海报不显示
  2. 转到测试页面 ( http://healthpad.net/rj_templates/test/zzz/ )，视频海报不显示。
  3. 点击 home 退出 Safari（或者模拟器的 Cmd+Shift+H mac 快捷键）
  4. 双击主页按钮以在 Safari 之外获取任务切换器，点击并按住 safari 图标直到显示终止按钮。
  5. 杀死野生动物园
  6. 打开 Safari（重新启动）。此时，如果您加载测试页面（只有一个视频的页面），就会显示海报。
  7. 现在转到多视频页面：（http://healthpad.net/dashboard/）。视频海报不显示。
  8. 回到单视频测试页面，那个视频海报也失效了。
  9. 重复步骤 3 到 8，查看视频海报何时停止工作的过程。

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

说明：

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

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

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

4

5 回答 5

16

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

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

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

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

于 2014-04-05T06:48:22.110 回答
2

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

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

于 2014-02-16T08:54:42.447 回答
1

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

<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">
于 2021-03-06T21:54:05.167 回答
0

在 Safari 设置 [iOS7] Block Pop-Ups 中“关闭”似乎可以解决这个问题，希望这会有所帮助。

于 2014-06-03T06:20:11.063 回答
0

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

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

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

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

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

videoRef.current.play()

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

于 2021-03-06T20:00:27.960 回答