使用FFMPEG在瀏覽器中編碼靜態文件的交叉設備（分段h264？）

Question

我正在NodeJS中構建一個mediacenter應用程序，這很不錯。 （你可以在Github上查看： https ： //github.com/jansmolders86/mediacenterjs ）

我正在使用FFMPEG將本地（靜態）電影轉碼為流然后發送到瀏覽器。

起初我使用h264和Flash在瀏覽器中工作，但我真的需要它在Android上運行iOS（所以沒有Flash），最好是在Raspberry Pi上工作。

但是讓它在所有設備上播放讓我絕對瘋狂！

我從無數小時閱讀文章，教程和堆棧溢出帖子中收集了所有這些難題，這使我得出結論，我需要生成以下內容：

• 使用視頻編解碼器H264轉碼為MP4
• 移動moovatom'-movflags'以使MP4可流式傳輸
• 對流進行分段，以便Apple也可以播放流。

但無處可去。 每次我制作一系列不起作用的FFMPEG設置，或者在某些設備上工作而不是全部工作。

我失敗的一些嘗試在哪里：

我的閃存嘗試 - > 主要問題（不在IOS中運行）：

    '-y','-ss 0','-b 800k','-vcodec libx264','-acodec mp3'\ 
    '-ab 128','-ar 44100','-bufsize 62000', '-maxrate 620k'\
    metaDuration,tDuration,'-f flv

我的HLS嘗試 - > 主要問題（未在瀏覽器中運行）：

        '-r 15','-b:v 128k','-c:v libx264','-x264opts level=41'\
        '-threads 4','-s 640x480','-map 0:v','-map 0:a:0','-c:a mp3'\
        '-b:a 160000','-ac 2','-f hls','-hls_time 10','-hls_list_size 6'\
        '-hls_wrap 18','-start_number 1'

我的MP4嘗試 - > 主要問題（持續時間縮短，視頻后期加速）

       '-y','-ss 0','-b 800k','-vcodec libx264','-acodec mp3'\
       '-ab 128','-ar 44100','-bufsize 62000', '-maxrate 620k'\
       metaDuration,tDuration,'-f mp4','-movflags','frag_keyframe+empty_moov'

第二次MP4嘗試： - > 主要問題（持續時間縮短，視頻后期加速）

    '-y','-vcodec libx264','-pix_fmt yuv420p','-b 1200k','-flags +loop+mv4'\
    '-cmp 256','-partitions +parti4x4+parti8x8+partp4x4+partp8x8+partb8x8'\
    '-me_method hex','-subq 7','-trellis 1','-refs 5','-bf 3','-coder 1'\
    '-me_range 16','-g 150','-keyint_min 25','-sc_threshold 40'\
    '-i_qfactor 0.71','-acodec mp3','-qmin 10','-qdiff 4','-qmax 51'\
    '-ab 128k','-ar 44100','-threads 2','-f mp4','-movflags','frag_keyframe+empty_moov'])

以下是使用這些設置運行的FFMPEG日志的示例：

        file conversion error ffmpeg version N-52458-gaa96439 Copyright (c) 2000-2013 the FFmpeg developers
          built on Apr 24 2013 22:19:32 with gcc 4.8.0 (GCC)
          configuration: --enable-gpl --enable-version3 --disable-w32threads --enable-avisynth --enable-bzlib --enable-fontconfig --e
        nable-frei0r --enable-gnutls --enable-iconv --enable-libass --enable-libbluray --enable-libcaca --enable-libfreetype --enable
        -libgsm --enable-libilbc --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --ena
        ble-libopus --enable-librtmp --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libtwola
        me --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libxavs --enabl
        e-libxvid --enable-zlib
          libavutil      52. 27.101 / 52. 27.101
          libavcodec     55.  6.100 / 55.  6.100
          libavformat    55.  3.100 / 55.  3.100
          libavdevice    55.  0.100 / 55.  0.100
          libavfilter     3. 60.101 /  3. 60.101
          libswscale      2.  2.100 /  2.  2.100
          libswresample   0. 17.102 /  0. 17.102
          libpostproc    52.  3.100 / 52.  3.100
        [avi @ 02427900] non-interleaved AVI
        Guessed Channel Layout for  Input Stream #0.1 : mono
        Input #0, avi, from 'C:/temp/the avengers.avi':
          Duration: 00:00:34.00, start: 0.000000, bitrate: 1433 kb/s
            Stream #0:0: Video: cinepak (cvid / 0x64697663), rgb24, 320x240, 15 tbr, 15 tbn, 15 tbc
            Stream #0:1: Audio: pcm_u8 ([1][0][0][0] / 0x0001), 22050 Hz, mono, u8, 176 kb/s
        Please use -b:a or -b:v, -b is ambiguous
        [libx264 @ 02527c60] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX
        [libx264 @ 02527c60] profile High, level 2.0
        [libx264 @ 02527c60] 264 - core 130 r2274 c832fe9 - H.264/MPEG-4 AVC codec - Copyleft 2003-2013 - http://www.videolan.org/x26
        4.html - options: cabac=1 ref=5 deblock=1:0:0 analyse=0x3:0x133 me=hex subme=7 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16
         chroma_me=1 trellis=1 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=-2 threads=2 lookahead_threads=1 sliced_th
        reads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=1 b_bias=0 direct=1 we
        ightb=1 open_gop=0 weightp=2 keyint=150 keyint_min=25 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=abr mbtree=1 bitrate=120
        0 ratetol=1.0 qcomp=0.60 qpmin=10 qpmax=51 qpstep=4 ip_ratio=1.41 aq=1:1.00
        Output #0, mp4, to 'pipe:1':
          Metadata:
            encoder         : Lavf55.3.100
            Stream #0:0: Video: h264 ([33][0][0][0] / 0x0021), yuv420p, 320x240, q=10-51, 1200 kb/s, 15360 tbn, 15 tbc
            Stream #0:1: Audio: mp3 (i[0][0][0] / 0x0069), 44100 Hz, mono, s16p, 128 kb/s
        Stream mapping:
          Stream #0:0 -> #0:0 (cinepak -> libx264)
          Stream #0:1 -> #0:1 (pcm_u8 -> libmp3lame)
        Press [q] to stop, [?] for help
        frame=  106 fps=0.0 q=10.0 size=       1kB time=00:00:06.94 bitrate=   1.4kbits/s
        frame=  150 fps=149 q=14.0 size=       1kB time=00:00:09.87 bitrate=   1.0kbits/s
        frame=  191 fps=126 q=16.0 size=       1kB time=00:00:12.61 bitrate=   0.8kbits/s
        frame=  244 fps=121 q=16.0 size=    2262kB time=00:00:16.14 bitrate=1147.6kbits/s
        frame=  303 fps=120 q=14.0 size=    2262kB time=00:00:20.08 bitrate= 922.2kbits/s
        frame=  354 fps=117 q=15.0 size=    3035kB time=00:00:23.48 bitrate=1058.6kbits/s
        frame=  402 fps=113 q=15.0 size=    3035kB time=00:00:26.67 bitrate= 932.1kbits/s
        frame=  459 fps=113 q=16.0 size=    4041kB time=00:00:30.43 bitrate=1087.7kbits/s
        frame=  510 fps=103 q=2686559.0 Lsize=    5755kB time=00:00:33.93 bitrate=1389.3kbits/s

        video:5211kB audio:531kB subtitle:0 global headers:0kB muxing overhead 0.235111%
        [libx264 @ 02527c60] frame I:6     Avg QP:10.55  size: 25921
        [libx264 @ 02527c60] frame P:245   Avg QP:12.15  size: 14543
        [libx264 @ 02527c60] frame B:259   Avg QP:15.55  size:  6242
        [libx264 @ 02527c60] consecutive B-frames:  6.1% 73.7% 14.7%  5.5%
        [libx264 @ 02527c60] mb I  I16..4: 19.9%  6.2% 73.9%
        [libx264 @ 02527c60] mb P  I16..4:  6.0%  0.2% 12.0%  P16..4: 35.4%  9.6% 16.3%  7.0%  5.6%    skip: 7.8%
        [libx264 @ 02527c60] mb B  I16..4:  0.7%  0.0%  4.3%  B16..8: 27.6% 17.2% 17.0%  direct:17.3%  skip:15.9%  L0:39.4% L1:43.2%
        BI:17.4%
        [libx264 @ 02527c60] final ratefactor: 11.41
        [libx264 @ 02527c60] 8x8 transform intra:1.6% inter:4.0%
        [libx264 @ 02527c60] coded y,uvDC,uvAC intra: 93.0% 97.0% 94.9% inter: 58.4% 58.7% 50.6%
        [libx264 @ 02527c60] i16 v,h,dc,p: 15% 26% 54%  5%
        [libx264 @ 02527c60] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 16% 17% 39%  4%  4%  3%  1%  6%  9%
        [libx264 @ 02527c60] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 28% 34% 21%  4%  2%  2%  2%  2%  5%
        [libx264 @ 02527c60] i8c dc,h,v,p: 51% 24% 19%  6%
        [libx264 @ 02527c60] Weighted P-Frames: Y:4.1% UV:1.2%
        [libx264 @ 02527c60] ref P L0: 68.2%  9.8% 11.0%  5.6%  4.6%  0.8%  0.0%
        [libx264 @ 02527c60] ref B L0: 87.7%  8.0%  3.9%  0.4%
        [libx264 @ 02527c60] ref B L1: 97.8%  2.2%
        [libx264 @ 02527c60] kb/s:1255.36

最后這是我的節點代碼啟動FFMPEG。 （我使用模塊Fluent-ffmpeg： https ： //github.com/schaermu/node-fluent-ffmpeg ）

    var proc = new ffmpeg({ source: movie, nolog: true, timeout:15000})                         
        .addOptions(['-r 15','-b:v 128k','-c:v libx264','-x264opts level=41','-threads 4','-s 640x480','-map 0:v','-map 0:a:0','-c:a mp3','-b:a 160000','-ac 2','-f hls','-hls_time 10','-hls_list_size 6','-hls_wrap 18','-start_number 1 stream.m3u8'])
        .writeToStream(res, function(retcode, error){
            if (!error){
                console.log('file has been converted succesfully',retcode .green);
            }else{
                console.log('file conversion error',error .red);
            }
        });

因此，總結這個非常長且代碼重的問題：

我希望這不會作為一個懶惰的請求，但有人可以向我展示/解釋哪些FFMPEG設置可以/應該在所有平台（現代瀏覽器，Android和iOS）上工作，產生一個靜態文件流，我可以發送到一個HTML5播放器。

[編輯]如果沒有通用選項我需要什么

如果這是不可能的，因為一些帖子可能會建議，我希望看到一組FFMPEG設置，就mp4流媒體而言，可以正常完成工作。 （例如，編碼可流式傳輸的mp4）。

流式mp4需要以下內容

• 移動的moovAtom
• 它需要是h264

非常感謝您的幫助！

Answer 1

沒有可以在每個設備和瀏覽器上播放的格式。 HTML5讓我們更接近，但仍然存在關於格式和編解碼器的爭論。 我在Zencoder的朋友有一篇新的博客文章帖子（ HERE ），它解決了這個問題。

編輯：你要求更多細節。 同樣，它取決於您希望定位的平台。 我會在這里報道幾個。

這應該適用於支持h.264編解碼器的所有現代瀏覽器。 它也應該在iPhone4及以上版本上播放：

ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v main -b:v 512k -s 1280x720 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie1.mp4

iPhone 3gs不支持主配置文件，其最大支持分辨率為640x480。 此命令將對此舊設備進行編碼。

ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v baseline -b:v 512k -s 640x432 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie2.mp4

我編寫了一些示例文件並在此處創建了一個網頁： http ： //szatmary.org/stackoverflow/18758133/

HTML看起來像這樣：

<!DOCTYPE html>
<html>
<body>
<br>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v main -b:v 512k -s 1280x720 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie1.mp4<br>
<video controls>
  <source src="movie1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<br>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v baseline -b:v 512k -s 640x432 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie2.mp4<br>
<video controls>
  <source src="movie2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

---

這里的命令分解為每個元素的含義：

命令+輸入文件（應該是顯而易見的）：

ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4

使用libx264對視頻進行編碼：

-vcodec libx264

將h.264配置文件設置為main。 基線將允許在較舊的設備上播放，但你會犧牲一點質量：

-profile:v main 

將比特率設置為每秒512千比特。 根據可用帶寬選擇一個值。 LAN / WiFi更高，3G / LTE更低

-b:v 512k 

將視頻縮放到720p分辨率（再次取決於目標平台）

-s 1280x720 

以每秒30幀的速度編碼：

-r:v 30 

使用libfdk_aac對音頻進行編碼。 或者如果你想要mp3，請使用libmp3lame。 強烈推薦AAC。 它在ios上有更好的支持，可以產生更高質量的音頻：

-acodec libfdk_aac

將音頻比特率設置為每秒128千比特。 您也可以根據帶寬調整此值。 使用AAC，你可能會低至32k

-b:a 128k 

將音頻采樣率設置為每秒48000個樣本。 如果使用mp3，請為ios執行44100

-r:a 48000

這告訴ffmpeg將moov原子放在mp4文件的開頭。

-movflags faststart 

輸出文件（-y告訴ffmpeg它可以覆蓋文件而不詢問）

-y movie1.mp4

Answer 2

據我所知，你找不到適合每台設備的設置。 我建議您檢查用戶代理，然后對不同的設備使用不同的設置。 這樣您也可以使用設備優化設置。

Answer 3

我正在考慮2種解決方法來實現搜索。 我假設，像我一樣，你不想存儲提前轉碼的文件。

第一個是從瀏覽器偽造搜索。 使用自定義時間軸控件，並在尋求將視頻src更改為包含所需開始時間的URL時，並將其傳遞給ffmpeg。 當然，這完全打敗了瀏覽器預取。 我在我的項目中實現了它，它工作正常。

第二種選擇更具技術性，我不知道該怎么做。 我們的想法是提前對所有可用視頻進行轉碼，提取moov原子，將其保存到磁盤並在流式傳輸時手動編寫。 這似乎很難做到但並非不可能。