javascript - 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因为他们似乎禁止 headless 请求(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 ) header ，效果非常好，这是以下的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

好吧，最大的问题是请求 header 。因此，Apple 成功传输所需的 header 很少。

Apple 将向提供的 URI 发出预请求，以查找以下信息(我将列出所需的 header )

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

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

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

此外，他们的视频编码标准似乎更加宽松。一些答案和建议建议调整 H.264 编码的比特率和分辨率，只要它是 H.264 视频编码和 ACC 音频编码(是相当标准的东西，ffmpeg 通常编码为 H .264 和 ACC 默认)你应该没问题。有关 Apple 支持的编码器的更多信息 here

最后的想法:这实际上非常简单，如果您遇到这个问题，我真的希望它可以帮助您，或者至少为您指明正确的方向。