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> 

视频在谷歌浏览器正常播放，但有显示在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