1. 流媒體
流媒體就是將視頻文件分成許多小塊兒，將這些小塊兒作為數據包通過網絡發送出去，實現一邊傳輸視
頻 數據 包一邊觀看視頻。
1.1 流式傳輸
在網絡上傳輸音、視頻信息有兩個方式：下載和流式傳輸。
下載：就是把音、視頻文件完全下載到本機后開始播放，它的特點是必須等到視頻文件下載完成方可播放，
播放等待時間較長，無法去播放還未下載的部分視頻。
流式傳輸：就是客戶端通過鏈接視頻服務器實時傳輸音、視頻信息，實現“邊下載邊播放”。
流式傳輸包括如下兩種方式：
1.1.2 順序流式傳輸
即順序下載音、視頻文件，可以實現邊下載邊播放，不過，用戶只能觀看已下載的視頻內容，無法快進到未
下載的視頻部分，順序流式傳輸可以使用Http服務器來實現，比如Nginx、Apache等。
1.1.3 實時流式傳輸
實時流式傳輸可以解決順序流式傳輸無法快進的問題，它與Http流式傳輸不同，它必須使用流媒體服務器並
且使用流媒體協議來傳輸視頻，它比Http流式傳輸復雜。常見的實時流式傳輸協議有RTSP、RTMP、RSVP
等。
- 將原始的視頻文件通過編碼器轉換為適合網絡傳輸的流格式，編碼后的視頻直接輸送給媒體服務器。原始的視頻文件通常是事先錄制好的視頻，比如通過攝像機、攝像頭等錄像、錄音設備采集到的音視頻文件，體積較大，要想在網絡上傳輸需要經過壓縮處理，即通過編碼器進行編碼 。
- 媒體服務獲取到編碼好的視頻文件，對外提供流媒體數據傳輸接口，接口協議包括 ：
HTTP、RTSP、RTMP等 。 - 播放器通過流媒體協議與媒體服務器通信，獲取視頻數據，播放視頻。
2. 點播
2.1 點播方案
- 播放器通過
http協議從http服務器上下載視頻文件進行播放
問題：必須等到視頻下載完才可以播放，不支持快進到某個時間點進行播放 - 播放器通過
rtmp協議連接媒體服務器以實時流方式播放視頻
使用rtmp協議需要架設媒體服務器，造價高，對於直播多采用此方案。 - 播放器使用
HLS協議連接http服務器（Nginx、Apache等）實現近實時流方式播放視頻
HLS協議規定：基於Http協議，視頻封裝格式為ts，視頻的編碼格式為H264,音頻編碼格式為MP3、AAC或者AC-3。
2.2 什么是HLS
HLS的工作方式是：將視頻拆分成若干ts格式的小文件，通過m3u8格式的索引文件對這些ts小文件建立索引。一般10秒一個ts文件，播放器連接m3u8文件播放，當快進時通過m3u8即可找到對應的索引文件，並去下載對應的ts文件，從而實現快進、快退以近實時 的方式播放視頻。
IOS、Android設備、及各大瀏覽器都支持HLS協議。
采用 HLS方案即可實現邊下載邊播放，並可不用使用rtmp等流媒體協議，不用構建專用的媒體服務器，節省成本。
3. 視頻編碼
3.1 視頻編碼格式
所謂視頻編碼方式就是指通過壓縮技術，將原始視頻格式的文件轉換成另一種視頻格式文件的方式。視頻流傳輸中最為重要的編解碼標准有國際電聯的H.261、H.263、H.264，運動靜止圖像專家組的M-JPEG和國際標准化組織運動圖像專家組的MPEG系列標准，此外在互聯網上被廣泛應用的還有Real-Networks的RealVideo、微軟公司的WMV以及Apple公司的QuickTime等。
首先我們要分清文件格式和編碼格式：
文件格式：是指.mp4、.avi、.rmvb等 這些不同擴展名的視頻文件的文件格式 ，視頻文件的內容主要包括視頻和音頻，其文件格式是按照一 定的編碼格式去編碼，並且按照該文件所規定的封裝格式將視頻、音頻、字幕等信息封裝在一起，播放器會根據它們的封裝格式去提取出編碼，然后由播放器解碼，最終播放音視頻。
音視頻編碼格式：通過音視頻的壓縮技術，將視頻格式轉換成另一種視頻格式，通過視頻編碼實現流媒體的傳輸。
比如：一個.avi的視頻文件原來的編碼是a，通過編碼后編碼格式變為b，音頻原來為c，通過編碼后變為d。
音視頻編碼格式各類繁多，主要有幾下幾類：
MPEG系列 （由ISO[國際標准組織機構]下屬的MPEG[運動圖象專家組]開發 ）視頻編碼方面主要是Mpeg1（vcd用的就是它）、Mpeg2（DVD使用）、Mpeg4（的DVDRIP使用的都是它的變種，如：divx，xvid等）、Mpeg4 AVC（正熱門）；音頻編碼方面主要是MPEG Audio Layer 1/2、MPEG Audio Layer 3（大名鼎鼎的mp3）、MPEG-2 AAC、MPEG-4 AAC等等。注意：DVD音頻沒有采用Mpeg的。H.26X系列 （由ITU[國際電傳視訊聯盟]主導，側重網絡傳輸，注意：只是視頻編碼） 包括H.261、H.262、
H.263、H.263+、H.263++、H.264（就是MPEG4 AVC-合作的結晶）
目前最常用的編碼標准是視頻H.264，音頻AAC。
3.2 FFmpeg 的基本使用
FFmpeg是一套可以用來記錄、轉換數字音頻、視頻，並能將其轉化為流的開源計算機程序。采用LGPL或GPL許可證。它提供了錄制、轉換以及流化音視頻的完整解決方案。它包含了非常先進的音頻/視頻編解碼庫libavcodec，為了保證高可移植性和編解碼質量，libavcodec里很多code都是從頭開發的。
FFmpeg被許多開源項目采用，QQ影音、暴風影音、VLC等。
下載：FFmpeg
下載 ：ffmpeg.zip，並解壓，本教程將ffmpeg解壓到D:\program\ffmpeg-20191229-e20c6d9-win64-static
將ffmpeg配置到path環境變量中
檢測是否安裝成功
ffmpge -version
簡單的測試：
將一個.avi文件轉成mp4、mp3、gif等。
比如我們將test.avi文件轉成mp4，運行如下命令：
ffmpeg -i test.avi test.mp4
轉成mp3：
ffmpeg -i test.avi test.mp3
轉成gif：
ffmpeg -i lucene.avi lucene.gif
3.3 生成m3u8/ts文件
使用ffmpeg生成 m3u8的步驟如下(這里以avi格式為例，其他類似)：
3.3.1 先將avi視頻轉成mp4
ffmpeg.exe ‐i test.avi ‐c:v libx264 ‐s 1280x720 ‐pix_fmt yuv420p ‐b:a 63k ‐b:v 753k ‐r 18 .\test.mp4
下面把各參數意思大概講講，大概了解意思即可，不再此展開流媒體專業知識的講解。
- -c:v 視頻編碼為
x264，x264編碼是H264的一種開源編碼格式。 - -s 設置分辨率
- -pix_fmt yuv420p：設置像素采樣方式，主流的采樣方式有三種，
YUV4:4:4，YUV4:2:2，YUV4:2:0，它的作用是根據采樣方式來從碼流中還原每個像素點的YUV（亮度信息與色彩信息）值。 - -b 設置碼率，
-b:a和-b:v分別表示音頻的碼率和視頻的碼率，-b表示音頻加視頻的總碼率。碼率對一個視頻質量有很大的作用。 - -r：幀率，表示每秒更新圖像畫面的次數，通常大於24肉眼就沒有連貫與停頓的感覺了。
3.3.2 將mp4生成m3u8
ffmpeg ‐i test.mp4 ‐hls_time 10 ‐hls_list_size 0 ‐hls_segment_filename
./hls/test_%05d.ts ./hls/test.m3u8
- -hls_time 設置每片的長度，單位為秒
- -hls_list_size n: 保存的分片的數量，設置為0表示保存所有分片
- -hls_segment_filename ：段文件的名稱，%05d表示5位數字
生成的效果是：將test.mp4視頻文件每10秒生成一個ts文件，最后生成一個m3u8文件，m3u8文件是ts的索引文件。
經測試可以使用potplayer播放test.m3u8
3.4 碼率的設置
碼率又叫比特率即每秒傳輸的bit數，單位為bps(Bit Per Second)，碼率越大傳送數據的速度越快。
碼率的計算公式是：文件大小（轉成bit）/ 時長（秒）/1024 = kbps 即每秒傳輸千位數
例如一個1M的視頻，它的時長是10s，它的碼率等於
1*1024*1024*8/10/1024 = 819Kbps
碼率設置到多少才能達到最好，通過根據個人的經驗或參考一些視頻網台給出的參考，下圖是優酷對碼率的要求：
如果要將視頻上傳到優酷則必須按照上面的要求，如果是自己搭建視頻服務器，碼率設置不易過大，最終達到的視
頻清晰度滿足業務需求即可。
4. 播放器
4.1 技術選型
視頻編碼后要使用播放器對其進行解碼、播放視頻內容。在web應用中常用的播放器有flash播放器、H5播放器或瀏覽器插件播放器，其中以flash和H5播放器最常見。
flash播放器：缺點是需要在客戶機安裝Adobe Flash Player播放器，優點是flash播放器已經很成熟了，並且瀏覽器對flash支持也很好。
H5播放器：基於h5自帶video標簽進行構建，優點是大部分瀏覽器支持H5，不用再安裝第三方的flash播放器，並且隨着前端技術的發展，h5技術會越來越成熟。
4.2 video.js
本項目采用H5播放器，使用Video.js開源播放器。
Video.js是一款基於HTML5世界的網絡視頻播放器。它支持HTML5和Flash視頻，它支持在台式機和移動設備上播放視頻。這個項目於2010年中開始，目前已在40萬網站使用。
官方地址：http://videojs.com/
下載video.js
Video.js ： https://github.com/videojs/video.js
videojs-contrib-hls ： https://github.com/videojs/videojs-contrib-hls#installation
（ videojs-contrib-hls是播放hls的一個插件）
使用文檔：http://docs.videojs.com/tutorial-videojs_.html
5. 開始配置nginx
正常使用video.js播放視頻是通過一個網頁，用戶通過瀏覽器打開網頁去播放視頻，網頁和視頻都從web服務器請求，通常視頻的url地址使用單獨的域名。
下面配置是nginx服務器的配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 視頻目錄
location /video/ {
alias D:/test/video/;
}
}
}
6. 編寫測試頁面video.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>視頻播放</title>
<link href="./videojs/video-js.css" rel="stylesheet">
</head>
<body>
<video id=example-video width=800 height=600 class="video-js vjs-default-skin vjs-big-play-centered" controls poster="http://127.0.0.1/video/add.jpg">
<source
src="http://127.0.0.1/video/test.m3u8"
type="application/x-mpegURL">
</video>
<input type="button" onClick="switchvideo()" value="switch"/>
<script src="./videojs/video.js"></script>
<script src="./videojs/videojs-contrib-hls.js"></script>
<script>
var player = videojs('example-video');
//player.play();
function switchvideo(){
player.src({
src: 'http://127.0.0.1/video/test.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});
player.play();
}
</script>
</body>
</html>
7. 測試
demo 地址
鏈接：https://share.weiyun.com/5FOQLhs 密碼：9a5tyf