HTML5播放視頻，並使用ffmpeg對視頻轉編碼

網頁加入視頻可以用h5自帶的video標簽，這里用一個jQuery封裝優化好的video視頻組件videojs。

videojs官方網站：https://docs.videojs.com/index.html

videojs下載：https://github.com/videojs/video.js/releases

這里有個問題是h5的video標簽根據不同的瀏覽器兼容情況只支持三種編碼的視頻格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

通常我們使用MP4格式，但是MP4又分為“1.MPEG4(DivX)”、“2.MPEG4(Xvid)”、“3.AVC(H264)”三種類型。要想在h5播放成功，必須轉換視頻格式為H264才可以，好多做法是用格式工廠來轉換，這樣工作量大，比較麻煩，這里選擇直接用ffmpeg在代碼中進行轉碼 ：

直接傻瓜命令安裝，親測可行：

sudo add-apt-repository ppa:mc3man/trusty-media
sudo apt-get update
sudo apt-get install ffmpeg
ffmpeg -version

這樣也是基本安裝了FFmpeg完整版：

 

 

安裝完成可跳過下面的1中的編譯安裝步驟，直接到第2步使用FFmpeg命令解碼視頻

1.安裝ffmpeg需要安裝下面三個包：

1. yasm：是一個匯編器，用於ffmpeg編譯。
2. X264：x264是采用GPL授權的視頻編碼自由軟件。x264的主要功能在於進行H.264/MPEG-4 AVC的視頻編碼，而不是作為解碼器（decoder）之用
3. ffmpeg主要用於音視頻轉碼，以及增刪水印等處理，是一款簡單實用且強大的音視頻處理工具。

（1）.安裝yasm

wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar -xzvf yasm-1.3.0.tar.gz
cd yasm-1.3.0
./configure
make
make install

 

(2).x264安裝

為了讓ffmpeg使用h264編碼。

ffmpeg中自帶h264的解碼，但是沒有包含編碼，所以再執行avcodec_find_encoder(CODEC_ID_H264)時返回的結果為NULL，需要額外添加x264支持h264的編碼。

下載到這里：

https://code.videolan.org/videolan/x264/tree/stable

選擇下載：

wget https://code.videolan.org/videolan/x264/-/archive/stable/x264-stable.tar.gz

編譯/部署：

解壓壓縮包，cd進目錄

./configure  --disable-asm

make

sudo make install

（3）、libogg 
libogg-1.3.1.tar.gz 
Url：http://www.xiph.org/downloads/ 
安裝方法如下：

wget http://downloads.xiph.org/releases/ogg/libogg-1.3.4.tar.gz
 ./configure 
    make  
     make install  

（4）、libvorbis 

libvorbis-1.3.3.tar.gz 
Url：http://downloads.xiph.org/releases/vorbis/libvorbis-1.3.3.tar.gz

(libvorbis依賴於libogg, 所以libogg必須先於libvorbis安裝)
安裝方法如下：

wget http://downloads.xiph.org/releases/vorbis/libvorbis-1.3.6.tar.xz

 ./configure
     make  
     make install  

 

（5）、faad2 
faad2-2.7.tar.gz 
http://www.audiocoding.com/downloads.html 
安裝方法

1     autoreconf -vif  
2     ./configure  --with-mp4v2 --enable-shared  
3     make  
4     make install  

（6）、faac 
faac-1.28.tar.gz 
http://www.audiocoding.com/downloads.html
安裝方法：

1     tar zxvf faac-1.28.tar.gz  
2     cd faac-1.28  
3     ./bootstrap  
4     ./configure 5     make   
6     make install  

（7）、amr-nb 
amrnb-10.0.0.0.tar.bz2 
http://ftp.penguin.cz/pub/users/utx/amr/ ( 從此處下載最新版本 )
安裝方法：

1     ./configure 2     make  
3     make install  

（8）、amr-wb 
amrwb-7.0.0.1.tar.bz2 
http://ftp.penguin.cz/pub/users/utx/amr/ ( 從此處下載最新版本 )
安裝方法：

1     ./configure 2     make  
3     make install  

 

（9）安裝ffmpeg

官網下載：http://ffmpeg.org/download.html

wget https://ffmpeg.org/releases/ffmpeg-4.1.3.tar.bz2

解壓：

bzip2 -d ffmpeg-4.1.3.tar.bz2

tar -xvf ffmpeg-4.1.3.tar

./configure --prefix=/usr/local/ffmpeg2 --enable-libmp3lame --enable-libvorbis --enable-gpl --enable-version3 --enable-nonfree --enable-pthreads --enable-libfaac --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libx264 --enable-libxvid --enable-postproc --enable-ffserver --enable-ffplay
   make 
   make install 

 ffmpeg完整安裝請參考：https://www.cnblogs.com/wanghetao/p/3386311.html

各模塊介紹：https://wenku.baidu.com/view/94bfc009581b6bd97f19ea53.html

2.用ffmpeg將視頻轉為html5支持的編碼：

      (1)轉碼成ogv (Theora 1 Vorbis): .

      ffmpeg -i WTE.mp4 -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30    output.ogv

      (2)轉碼成webm (VP8 / Vorbis):

      ffmpeg -i WTE.mp4 -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 output.webm

      (3)轉碼mp4 (H.264 / ACC):

      ffmpeg  -i WTE.mp4 -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 output.mp4　　#有點問題，可用下面的命令代替
　　ffmpeg  -i WTE.mp4 -b 1500k -vcodec h264 -preset slow -profile:v baseline -g 30 output.mp4

　　參考自：https://www.doc88.com/p-7088891528596.html

HTML中一次加入三種格式：

 <video id="my-video" loop ='true' class="video-js" controls preload="auto" width="500" height="400"
          poster="{% static  'images/m.jpg' %}" data-setup="{}" autoplay="autoplay">
        <source src="{{ MEDIA_URL }}video/output.mp4" type="video/mp4">
        <source src="{{ MEDIA_URL }}video/output.webm" type="video/webm">
        <source src="{{ MEDIA_URL }}video/output.ogv" type="video/ogg">
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
      </video>

 這樣就可以兼容大部分瀏覽器，至此就可以在h5中暢通無阻地播放視頻了

 

以下簡單總結下ffmpeg命令參數：

-i 指定要轉換視頻的源文件
-s 視頻轉換后視頻的分辨率
-vcodec 視頻轉換時使用的編解碼器（-codecs）
-r 視頻轉換換的楨率(默認25楨每秒)
-b 視頻轉換換的bit率
-ab 音頻轉換后的bit率(默認64k)
-acodec 制度音頻使用的編碼器（-codecs）
-ac 制定轉換后音頻的聲道

-ar 音頻轉換后的采樣率

-an 禁用音頻

-vn 禁用視頻

-acodec copy 復制音頻，不轉碼

-vcodec copy 復制視頻，不轉碼

 

 

3.拋棄轉碼繁瑣直接使用Chimee

后來意外發現一個兼容性更好的播放插件Chimee，兼容多種視頻格式，MP4、M3U8、FLV等多種媒體格式，同時它也幫我們解決了大部分的兼容性、差異化問題，包括全屏、自動播放、內聯播放、直播解碼等常見媒體播放需求，不用再自己去轉碼，官網有比較詳細的使用文檔，可自行去研究：

http://chimee.org/docs/index.html

 4.在推薦一款不錯的視頻播放器 flowplayer，官網有demo：

https://flowplayer.com/