为什么 iOS 上的 Safari 没有显示我的 HTML5 视频海报？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18613470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why Safari on iOS is not showing my HTML5 video poster?
提问by Prody
I have this webpage:
http://healthpad.net/dashboard/
It have 10 <video>elements on it.
我有这个网页：
http: //healthpad.net/dashboard/
它有 10 个<video>元素。
For some reason, when I load the page on an iPad, it is not showing the video posters.
出于某种原因，当我在 iPad 上加载页面时，它没有显示视频海报。
Try the following:
请尝试以下操作：
- load the page on a desktop browser
- load it on an iPad or iPad simulator, and you get a big black box with a play button
- 在桌面浏览器上加载页面
- 在 iPad 或 iPad 模拟器上加载它，你会得到一个带有播放按钮的大黑盒子
please tell me why this is happening?
请告诉我为什么会这样？
Here's what I've already ruled out:
这是我已经排除的：
Image Content-Type header.
I've validated that the image content-type header is properly set.
In the example above, the Content-Typeheader properly image/jpeg.
图像内容类型标头。
我已验证图像内容类型标头已正确设置。在上面的例子中，Content-Type标题正确image/jpeg。
Interference with the video.js library
VideoJs is used to show that nice play button on desktop browsers and to customise the controls. This library doesn't interfere with the native player however.
Just to make sure, I've created a test video page which doesn't have the video-js class, so the library doesn't pick up and process that video. In fact, the test page doesn't even include any JS library, it's just
干扰 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/
http://healthpad.net/rj_templates/test/zzz/
Usage of any video attributes that may not be supported on Mobile Safari
The test page above just has a plain video tag. I've tried removing every other attribute except for srcand poster, it didn't help.
Mobile Safari 可能不支持的任何视频属性的使用
上面的测试页面只有一个普通的视频标签。我尝试删除除srcand之外的所有其他属性poster，但没有帮助。
Most of the StackOverflow questions on the topic just say "Restart your iPad"
大多数关于该主题的 StackOverflow 问题只是说“重启你的 iPad”
Here's where it gets weird:
这就是它变得奇怪的地方：
If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".
如果您对此进行谷歌搜索，StackOverflow 上已被接受的答案通常会说“重新启动您的 iPad，它为我做了”。
So I've tried doing the same thing, at first I just said that it doesn't work in my case.
所以我尝试做同样的事情，起初我只是说它在我的情况下不起作用。
Then, I tried this:
(all of the following on the iPad simulator)
然后，我尝试了这个：（
以下所有在 iPad 模拟器上）
- Go to the site, video posters don't show
- Go to the test page (http://healthpad.net/rj_templates/test/zzz/), video poster doesn't show.
- Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)
- Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.
- Kill Safari
- Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
- Now go to the multi-video page: (http://healthpad.net/dashboard/). Video posters don't show.
- Go back to the single-video test page, the video poster for that one no longer works either.
- Repeat steps 3 to 8 to see the process of when video posters stop working.
- 去网站，视频海报不显示
- 转到测试页面（http://healthpad.net/rj_templates/test/zzz/），视频海报不显示。
- 点击home退出Safari（或者模拟器的Cmd+Shift+H mac快捷键）
- 双击主页按钮以获取 Safari 之外的任务切换器，点击并按住 safari 图标，直到显示终止按钮。
- 杀死野生动物园
- 打开 safari（重新启动）。此时，如果您加载测试页面（只有一个视频的页面），则会显示海报。
- 现在转到多视频页面：（http://healthpad.net/dashboard/）。视频海报不显示。
- 回到单视频测试页面，那个视频海报也失效了。
- 重复步骤 3 到 8，查看视频海报停止工作的过程。
So apparently, at some point, Mobile Safari decides it will no longer show any video posters. Also, apparently, my site triggers this condition.
很明显，在某些时候，Mobile Safari 决定不再显示任何视频海报。此外，显然，我的网站触发了这种情况。
Clarifications:
说明：
When posters no longer work, it doesn't only occur on one domain, no video posters will be loaded for any other site, regardless whether or not it's on a totally different domain (e.g. the demo video from http://www.videojs.com/).
当海报不再有效时，它不仅会出现在一个域中，也不会为任何其他站点加载视频海报，无论它是否位于完全不同的域（例如来自http://www.videojs的演示视频）.com/）。
In order to reset this behaviour, from what I've seen, you have to kill and restart Safari. Just closing and reopening it doesn't reset this state.
为了重置此行为，根据我所见，您必须杀死并重新启动 Safari。只是关闭并重新打开它不会重置此状态。
Does anyone have any idea why this is happening? Is there a way to work around it?
有谁知道为什么会这样？有没有办法解决它？
回答by Dan Weaver
I got this working by using a PNG instead of a JPG.
我通过使用 PNG 而不是 JPG 来完成这项工作。
Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.
奇怪的是，JPG 在本地的 iOS Safari 中工作（通过本地 wifi 上的 POW 服务器）但是当推送到登台时，海报图像没有加载。本地代码和暂存代码都引用了 S3 上的同一个文件。
Changed the file format to PNG and it loads fine.
将文件格式更改为 PNG 并且可以正常加载。
回答by Prody
I see the question keeps getting upvoted once in a while, though there's no answer. So here's what I ended up doing:
我看到这个问题时不时地被点赞，尽管没有答案。所以这就是我最终做的：
On iOS, instead of showing the video player (even with autoload=false), I will just show the poster and a play button, two standalone <img>tags.
When they get clicked, I create the video player from javascript and tell it to play. Works fine, users don't see much difference.
在 iOS 上，autoload=false我不会显示视频播放器（即使有），我只会显示海报和播放按钮，两个独立的<img>标签。当它们被点击时，我从 javascript 创建视频播放器并告诉它播放。工作正常，用户看不出太大区别。
回答by Tim
In Safari settings [iOS7] Block Pop-Ups turned "OFF" seemed to cure this for me, hope this helps.
在 Safari 设置中 [iOS7] 阻止弹出窗口关闭似乎可以解决这个问题，希望这会有所帮助。
