本文介绍了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虽然)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-24 09:32