为什么iOS上的Safari没有显示我的HTML5视频海报？
Pro*_*ody 33 mobile-safari ipad html5-video ios
我有这个网页:
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
- 打开野生动物园(重新启动).此时,如果您加载测试页面(只有一个视频),海报将会显示.
- 现在转到多视频页面:(http://healthpad.net/dashboard/).视频海报不显示.
- 回到单视频测试页面,那个视频海报也不再适用.
- 重复步骤3到8,查看视频海报何时停止工作的过程.
显然,在某些时候,Mobile Safari决定不再展示任何视频海报.此外,显然,我的网站触发了这种情况.
澄清:
当海报不再有效时,它不仅会出现在一个域上,也不会为任何其他网站加载任何视频海报,无论它是否位于一个完全不同的域上(例如来自http://www.videojs的演示视频).com /).
为了重置这种行为,从我看到的,你必须杀死并重新启动Safari.关闭并重新打开它不会重置此状态.
有谁知道为什么会这样？有办法解决它吗？
Dan*_*ver 15
我通过使用PNG而不是JPG来实现这一点.
奇怪的是,JPG在本地的iOS Safari中工作(通过本地wifi上的POW服务器)但是当推送到分期时,海报图像没有加载.本地代码和临时代码都引用了S3上的相同文件.
将文件格式更改为PNG并加载正常.
我看到这个问题偶尔会被投票，尽管没有答案。所以这就是我最终所做的：
在 iOS 上，我不会显示视频播放器（即使使用autoload=false），而是仅显示海报和播放按钮，以及两个独立的<img>标签。当它们被点击时，我从 javascript 创建视频播放器并告诉它播放。工作正常，用户看不出太大差异。
| 归档时间： |
|
| 查看次数： |
23346 次 |
| 最近记录： |