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

从我读过的所有资源来看，我应该已经很好地覆盖了我的基础才能在大多数 browsers/devices 上播放这个 <video> 元素，但它仍然无法正常工作。这是我在 iPhone:

上的视频图片

Answer 1

有几种可能性。

第一个尝试添加 Accept-Ranges: bytes HTTP 响应 header，如此处所示 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

HTML5 视频元素未加载 iPhone/iPad

HTML5 video element not loading on iPhone/iPad

html

iphone

video

ipad

html5-video