首页 文章

HTML5视频:ffmpeg编码的MP4无法在任何浏览器中播放(尽管在VLC中播放)

提问于
浏览
4

我正在尝试在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标头 .


其中一个视频位于:

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 那么该视频在浏览器中也不起作用 .

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 at http://jsfiddle.net/#&togetherjs=5Ql5MmrV4j

1 回答

  • 5

    没有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>
    

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

相关问题