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）

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

根本不适用于iPhone（Chrome和Safari）
它不适用于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'>

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

标题问题
编码问题

我无法获取：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 --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成功传输所需的标头很少。

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

Content-Type - 不言而喻，它需要知道要解析视频，这将是video/mp4或使用哪种视频格式。
Accept-Ranges - 这应该是从0到正在流式传输的视频大小的范围.e.g：0-123456 bytes
Content-Length - 这是文件的总大小，以字节为单位，例如：123456

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

某些外部视频正在运行而另一些不在外的原因是因为它确实是一个标题问题。一台服务器没有发送Accept-Ranges标头，也不支持远程请求，Safari / IOS浏览器就放弃了。

此外，他们似乎对视频编码标准更加松懈。一些答案和建议会建议调整H.264编码的比特率和分辨率，只要它的H.264视频编码和ACC音频编码（非常标准的东西，ffmpeg通常编码为默认情况下是H.264和ACC）你应该没问题。有关Apple支持的编码器here

最后的想法：这实际上是非常直接的，如果你正在触及这个主题，我真的希望它可以帮助你或者至少指出你正确的方向。

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

1 个答案: