HTML5视频：ffmpeg编码MP4不在任何浏览器播放（播放在VLC虽然）

问题描述

我想在MP4和WEBM fomats中投放HTML5视频。我无法使所有浏览器都工作：

• 支持WEBM的浏览器（Chrome桌面，Firefox桌面）播放视频。




• 使用MP4的浏览器无法使用（IE，Safari和Android）。




• WEBM正在担任 video / webm 。




• MP4将以 video / mp4 。

最小JSFiddle：

---

浏览器错误：

• IE11：11.0.9600.17126 / 11.0。 9 KB2957689

  
  
  

  错误：不支持的视频类型的无效文件路径




• Android浏览器和Chrome Android：

  
  
  

  没有错误，视频只是拒绝开始

  ul>
  
  

  ---

  
  
  

  健康测试 - 以下三个值相等：

  
  
  
  
  

  • 收到的文件大小： curl< video URL> | wc -c

  
  

  • 实际档案大小： stat -c％s< video file> code>

  
  

  • 服务器指定的文件大小： Content-Length HTTP标头。 p>

  
  
  
  
  

  ---

  
  
  

  其中一部影片位于：

  
  
  
  
  

  • MP4 ：

    
    
    

    Content-Type：video / mp4

    
    
    

    / IE浏览器

    
    
    

    在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

    
    
    

    这些是从深层搜索中收集的，移动浏览器。
    如果我使用 -an -vcodec libx264 -s hd720 ，那么该视频在浏览器中不起作用。

  
  

  • WEBM ：

    
    
    

    Content-Type：video / webm

    
    
    

    在Chrome / Firefox中播放

    
    
    

    FFMPEG编码参数：

    
    
    

    -an -vcodec libvpx -s hd720

  
  
  
  
  

  ---

  
  
  

  相关HTML（类别，海报等已删除）：

  
  
  

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

  JSFiddle在

  解决方案

  没有MP4播放的浏览器实际上似乎完全支持MP4 - 特别是对于MS和苹果的浏览器，试图创造一个版权的地狱/垄断的格式的问题。

  
  
  

  我通过使用以下FFMPEG参数进行重新编码来工作：

    -pix_fmt yuv420p 
   -preset slow 
   -profile：v baseline 
    

  提供完整的命令行：

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

  问题最终是另一个专利软件供应商没有正确支持自己标准的例子。 >
  

  I am trying to serve HTML5 video in MP4 and WEBM fomats. I cannot get all browsers to work though:

  • Browsers which support WEBM (Chrome desktop, Firefox desktop) play the videos fine.

  • Browsers which use MP4 are not working (IE, Safari, Android).

  • WEBM is being served as video/webm.

  • MP4 is being served as video/mp4.

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

  ---

  Browser errors:

  • IE11: 11.0.9600.17126 / 11.0.9 KB2957689

    Error: Unsupported video type of invalid file path

  • Android browser and Chrome Android:

    No error, video just refuses to start

  ---

  Sanity test - the following three values are equal:

  • Received file size: curl <video URL> | wc -c

  • Actual file size: stat -c %s <video file>

  • Server-specified file size: Content-Length HTTP header.

  ---

  One of the videos in question is at:

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

    Content-Type: video/mp4

    Does not play in Chrome / IE11 / Chrome Android / Android Browser

    Does play in VLC

    FFMPEG encoding parameters:

    -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

    These were collected from deep searching on the best way to encode MP4 for mobile browsers.If I use -an -vcodec libx264 -s hd720 then that video also doesn't work in browsers.

  • WEBM: http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm

    Content-Type: video/webm

    Plays in Chrome/Firefox

    FFMPEG encoding parameters:

    -an -vcodec libvpx -s hd720

  ---

  The relevant HTML (classes, poster, etc removed):

  <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

  解决方案

  No MP4-playing browsers actually seem to have full support for MP4 - especially problematic for MS and Apple's browsers which are trying to create a royalty-hell / monopoly around the format.

  I got it to work by re-encoding with the following FFMPEG parameters:

  -pix_fmt yuv420p
  -preset slow
  -profile:v baseline
  

  Giving a full command line of:

  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>
  

  The problem was ultimately yet another example of proprietary software vendors not properly supporting their own standards.

  这篇关于HTML5视频：ffmpeg编码MP4不在任何浏览器播放（播放在VLC虽然）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！