Question

我正在尝试在MP4和WEBM fomats中提供HTML5视频。我无法让所有浏览器都能正常工作：

支持WEBM的浏览器（Chrome桌面，Firefox桌面）可以很好地播放视频。
使用MP4的浏览器无效（IE，Safari，Android）。
WEBM作为video/webm提供。
MP4作为video/mp4投放。

最小的JSFiddle：http://jsfiddle.net/#&togetherjs=5Ql5MmrV4j

浏览器错误：

IE11：11.0.9600.17126 / 11.0.9 KB2957689

Error: Unsupported video type of invalid file path
Android浏览器和Chrome Android：

没有错误，视频只是拒绝启动

完整性测试 - 以下三个值相等：

收到文件大小：curl <video URL> | wc -c
实际文件大小：stat -c %s <video file>
服务器指定的文件大小：Content-Length HTTP标头。

其中一个视频位于：

MP4 ：http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4

Content-Type: video/mp4

无法在Chrome / IE11 / Chrome Android / Android浏览器中播放

在VLC中播放

FFMPEG编码参数：

-an -vcodec libx264 -s hd720 -flags +loop+mv4 -cmp 256 -partitions +parti4x4+parti8x8+partp4x4+partp8x8 -subq 6 -trellis 0 -refs 5 -bf 0 -coder 0 -me_range 16 -g 250 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -qmin 10 -qmax 51 -qdiff 4 -movflags faststart

这些是从深度搜索中收集的，用于为移动浏览器编码MP4的最佳方式。如果我使用-an -vcodec libx264 -s hd720，则该视频也无法在浏览器中使用。
WEBM ：http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm

Content-Type: video/webm

在Chrome / Firefox中播放

FFMPEG编码参数：

-an -vcodec libvpx -s hd720

删除了相关的HTML（类，海报等）：

<video preload="metadata" controls="controls">
  <source type="video/mp4" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4">
  <source type="video/webm" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm">
</video>

JSFiddle http://jsfiddle.net/#&togetherjs=5Ql5MmrV4j

Answer 1

没有MP4播放的浏览器实际上似乎完全支持MP4 - 尤其是MS和Apple的浏览器存在问题，这些浏览器试图围绕这种格式创建版税 - 地狱/垄断。

我通过使用以下FFMPEG参数重新编码来实现它：

-pix_fmt yuv420p
-preset slow
-profile:v baseline

提供完整的命令行：

ffmpeg
  <INPUT DEFINITION>
  -an
  -s hd720
  -vcodec libx264
  -b:v BITRATE
  -vcodec libx264
  -pix_fmt yuv420p
  -preset slow
  -profile:v baseline
  -movflags faststart
  -y <OUTPUT PATH>

问题最终是专有软件供应商不能正确支持他们自己的标准的另一个例子。

HTML5视频：ffmpeg编码的MP4无法在任何浏览器中播放（尽管在VLC中播放）

浏览器错误：

完整性测试 - 以下三个值相等：

其中一个视频位于：

删除了相关的HTML（类，海报等）：

1 个答案: