HTML5视频元素未在iPhone / iPad上加载

Question

这是一个重复的问题，但我找不到适用于我的解决方案。我似乎无法弄清楚为什么我的<video>元素没有在iPhone或iPad上加载。

这是我的HTML代码：

<div class="embed-responsive embed-responsive-16by9">
<video id="movie" preload controls autobuffer>
<source src="/digital-portfolio/video/client.mp4" type="video/mp4">
<source src="/digital-portfolio/video/client.webm" type="video/webm">
<source src="/digital-portfolio/video/client.ogv" type="video/ogg">
</video>
</div>

该视频在Google Chrome中播放效果不错，但在iPhone或iPad上显示有问题。此外，我已将以下内容添加到我的.htaccess文件中：

# Video
AddType video/mp4                                   mp4 m4v f4v f4p
AddType video/ogg                                   ogv
AddType video/webm                                  webm
AddType video/x-flv                                 flv

从我读过的所有资源中，我应该完全覆盖我的基础，在大多数浏览器/设备上播放这个<video>元素，但它仍然无法正常工作。这是我在iPhone上的视频图像：

Answer 1

有几种可能性。

第一个尝试添加Accept-Ranges: bytes HTTP响应标头，如下所示Safari Web Content Guide: Configuring Your Server

如果这不起作用，则可能需要使用一些不同的编码标志对视频进行重新编码。我已经成功使用了ffmpeg和这样的参数：

ffmpeg -i %1 -pass 1 -vcodec libx264 -preset slow -profile:v baseline   -b:v 2000k -b:a 128k -r 25 -g 50 -vf setfield=1 -f mp4 -threads 0 -y %1-hq.mp4
ffmpeg -i %1 -pass 2 -vcodec libx264 -preset slow -profile:v baseline   -b:v 2000k -b:a 128k -r 25 -g 50 -vf setfield=1 -f mp4 -threads 0 -y %1-hq.mp4