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