HTML 5 视频播放无法在 iPhone（Chrome 和 Safari）上运行

Question

我正在尝试在我正在构建的简单网页上实现基本的 HTML5 视频播放。

真的，没有什么花哨的东西。甚至这个例子也不起作用。

<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

我收到以下错误： The media could not be loaded, either because the server or network failed or because the format is not supported 我是否缺少有关 IOS 和 HTML5 视频播放的某些内容？

======= 更新A)

运行更多测试后。我发现了以下内容：

1. 它根本不适用于 iPhone（Chrome 和 Safari）
2. 它不适用于 Macbook Safari，但适用于 Firefox

======= 更新 B)

经过更多测试并深入了解 Apple 的视频编码指南和要求后，我发现了以下内容：

该视频的工作原理：<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />

这一个不：<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>

由于它们都与我的本地服务器分离，我只能得出结论，这是两件事之一：

1. 标题问题
2. 编码问题

我无法获取以下内容的编码详细信息：http://video-js.zencoder.com/oceans-clip.mp4因为它们似乎禁止无头请求（ wget 和 ffmpeg -i 都不允许连接）。

不过，我确实使用以下ffmpeg配置重新编码了现有的 mp4 视频：fmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.1 -preset medium -crf 23 -x264-params ref=4 -acodec copy -movflags +faststart ouput.mp4

没有运气。ffmpeg -i确实显示编码器已h264打开output.mp4，但视频仍然拒绝在 iOS 设备上播放。

======= 更新C)

更改视频编解码器后，缩放视频并根据苹果的要求调整比特率：ffmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.0 -preset medium -crf 23 -x264-params ref=4 -acodec copy -vf scale=640x480 -maxrate 900k -bufsize 900k -movflags +faststart output.mp4...并在编写范围请求流脚本后添加Accept-Ranges（显然是苹果的要求，请参阅：this）标头，效果非常好，这是curl输出:curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null

curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0 7871k    0    51    0     0     51      0 43:54:14 --:--:-- 43:54:14   237
curl: (18) transfer closed with 8060705 bytes remaining to read

...在拼命尝试减轻疼痛（无济于事）时，我把头撞在墙上大约 400 次（但无济于事），我大约 99.5% 确定这是一些奇怪的苹果认证/视频格式问题。

Answer 1

好吧，最大的问题是请求标头。因此，苹果成功流式传输所需的标头很少。

Apple 会向提供的 URI 发出预请求以查找以下信息（我将列出所需的标头）

1. Content-Type- 不用说，它需要知道它将要解析视频，这将是video/mp4或无论使用哪种视频格式。
2. Accept-Ranges- 这应该是从 到0正在传输的视频大小的范围。例如：0-123456字节
3. Content-Length- 这是文件的总大小（以字节为单位），例如：123456

然后，在每个后续请求中，您希望省略content-length标头并仅使用标头发送其请求的范围Content-Range。

某些外部视频可以正常工作而其他外部视频不能正常工作的原因是，这确实是一个标头问题。一台服务器不发送Accept-Ranges标头，也不支持范围请求，Safari / IOS 浏览器就放弃了。

此外，他们的视频编码标准似乎更加宽松。一些答案和建议建议调整 H.264 编码的比特率和分辨率，只要它是 H.264 视频编码和 ACC 音频编码（是非常标准的东西，ffmpeg通常默认编码为 H.264 和 ACC）应该没事。有关 Apple 支持的编码器的更多信息，请参见此处

最后的想法：这实际上非常简单，如果您正在点击这个线程，我真的希望它可以帮助您，或者至少为您指明正确的方向。