網頁加入視頻可以用h5自帶的video標簽，這裡用一個jQuery封裝優化好的video視頻組件videojs。 videojs官方網站：https://docs.videojs.com/index.html videojs下載：https://github.com/videojs/video.js ...
網頁加入視頻可以用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需要安裝下麵三個包：
- yasm：是一個彙編器，用於ffmpeg編譯。
- X264：x264是採用GPL授權的視頻編碼自由軟體。x264的主要功能在於進行H.264/MPEG-4 AVC的視頻編碼，而不是作為解碼器（decoder）之用
- 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 複製視頻，不轉碼
