超級火爆的前端視訊方案 FFmpeg ，帶你體驗一下~

2024-04-27碼農

模擬面試、簡歷指導、入職指導、計畫指導、答疑解惑可私信找我~已幫助100+名同學完成改造！

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

FFmpeg

FFmpeg 是一個開源的、跨平台的多媒體框架，它可以用來錄制、轉換和流式傳輸音訊和視訊。它包括了一系列的庫和工具，用於處理多媒體內容，比如 libavcodec（一個編解碼庫），libavformat（一個音視訊容器格式庫），libavutil（一個實用庫），以及 ffmpeg 命令列工具本身。

FFmpeg 被廣泛用於各種套用中，包括視訊轉換、視訊編輯、視訊壓縮、直播流處理等。它支持多種音視訊編解碼器和容器格式，因此能夠處理幾乎所有型別的音視訊檔。由於其功能強大和靈活性，FFmpeg 成為了許多視訊相關軟體和服務的底層技術基礎。

很多網頁都是用 FFmpeg 來進行視訊切片，比如一個視訊很大，如果透過一個連線去請求整個視訊的話，那勢必會導致載入時間過長，嚴重阻礙了使用者觀感

所以很多視訊網站都會透過視訊切片的方式來最佳化使用者觀感，就是一部份一部份地去載入出來，這樣有利於使用者的體驗

首先到 ffmpeg 的安裝網頁：https://www.gyan.dev/ffmpeg/builds/

下載解壓後將資料夾改名為 ffmpeg

環境變量配置是為了能在電腦上使用 ffmpeg 命令列

先準備一個視訊，比如我準備了一個視訊，總共 300 多 M

並在當前的目錄下輸入以下的命令

ffmpeg -i jhys.mkv -c:v libx264 -c:a aac -hls_time 60 -hls_segment_type mpegts -hls_list_size 0 -f hls -max_muxing_queue_size 1024 output.m3u8

接著 ffmpeg 會幫你將這個視訊進行分片

直到切片步驟執行完畢，我們可以看到視訊已經別切成幾個片了

在這個命令中：

-i input_video.mp4 指定了輸入視訊檔。

-c:v libx264 -c:a aac 指定了視訊和音訊的編解碼器。

-hls_time 10 指定了每個 M3U8 片段的時長，單位為秒。在這裏，每個片段的時長設定為 10 秒。

-hls_segment_type mpegts 指定了 M3U8 片段的型別為 MPEG-TS。

-hls_list_size 0 設定 M3U8 檔中包含的最大片段數。這裏設定為 0 表示沒有限制。

-f hls 指定了輸出格式為 HLS。

-max_muxing_queue_size 1024 設定了最大復用佇列大小，以確保輸出不會超過指定大小。

最後輸出的檔為 output.m3u8

建立一個簡單的前端計畫

可以看到瀏覽器會載入所有的視訊切片

我是林三心

一個待過 小型toG型外包公司、大型外包公司、小公司、潛力型創業公司、大公司 的作死型前端選手；

一個偏前端的全幹工程師；

一個不正經的金塊作者；

逗比的B站up主；

不帥的小紅書博主；

喜歡打鐵的籃球菜鳥；

喜歡歷史的乏味少年；

喜歡rap的五音不全弱雞如果你想一起學習前端，一起摸魚，一起研究簡歷最佳化，一起研究面試進步，一起交流歷史音樂籃球rap，可以來俺的摸魚學習群哈哈，點這個，有7000多名前端小夥伴在等著一起學習哦 --> 摸魚沸點

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~