原文地址在項目上遇到類似于直播的場景所以需要前端播放后臺的視頻流這個問題，所以就此問題記錄一下，
在上一篇文章中寫到了怎樣搭建nginx流媒體服務器以及怎樣使用ffmpeg進行推流，那么現在就缺前端拉流這一部分，通過這兩個天的辛勤勞動終于解決了，在這也希望分享給正在搞這個問題的童鞋們。
一、簡單了解幾種流
HLS流：
1、HLS是蘋果公司實現的基于 HTTP 的流媒體傳輸協議，全稱 HTTP Live Streaming，可支持流媒體的直播和點播，主要應用在 iOS 系統，為 iOS 設備（如 iPhone、iPad）提供音視頻直播和點播方案。
2、HLS 的基本原理就是當采集推流端將視頻流推送到流媒體服務器時，服務器將收到的流信息每緩存一段時間就封包成一個新的 ts 文件，同時服務器會建立一個 m3u8 的索引文件來維護最新幾個 ts 片段的索引。當播放端獲取直播時，它是從 m3u8 索引文件獲取最新的 ts 視頻文件片段來播放，從而保證用戶在任何時候連接進來時都會看到較新的內容，實現近似直播的體驗。HLS 最大的不同在于直播客戶端獲取到的并不是一個完整的數據流，而是連續的、短時長的媒體文件，客戶端不斷的下載并播放這些小文件。這種方式的理論最小延時為一個 ts 文件的時長，一般情況為 2-3 個 ts 文件的時長。HLS 的分段策略，基本上推薦是 10 秒一個分片，這就看出了 HLS 的缺點：
- 通常 HLS 直播延時會達到 20-30s，而高延時對于需要實時互動體驗的直播來說是不可接受的。
- HLS 基于短連接 HTTP，HTTP 是基于 TCP 的，這就意味著 HLS 需要不斷地與服務器建立連接，TCP 每次建立連接時的三次握手、慢啟動過程、斷開連接時的四次揮手都會產生消耗。
- HLS 的優點：
- 數據通過 HTTP 協議傳輸，所以采用 HLS 時不用考慮防火墻或者代理的問題。
- 使用短時長的分片文件來播放，客戶端可以平滑的切換碼率，以適應不同帶寬條件下的播放。
- HLS 是蘋果推出的流媒體協議，在 iOS 平臺上可以獲得天然的支持，采用系統提供的 AVPlayer 就能直接播放，不用自己開發播放器。
RTMP流：
RTMP實時消息傳輸協議，Real Time Messaging Protocol，是 Adobe Systems 公司為 Flash 播放器和服務器之間音頻、視頻和數據傳輸開發的開放協議。協議基于 TCP是一個協議族，包括 RTMP 基本協議及 RTMPT/RTMPS/RTMPE 等多種變種。RTMP 是一種設計用來進行實時數據通信的網絡協議，主要用來在 Flash/AIR 平臺和支持RTMP協議的流媒體/交互服務器之間進行音視頻和數據通信。
相對于 HLS 來說，采用 RTMP 協議時，從采集推流端到流媒體服務器再到播放端是一條數據流，因此在服務器不會有落地文件。這樣 RTMP 相對來說就有這些優點：
- 延時較小，通常為 1-3s。
- 基于 TCP 長連接，不需要多次建連。穩定性高。
- 支持加密： RTMPE和RTMPS為加密協議。
- 因此業界大部分直播業務都會選擇用 RTMP 作為流媒體協議。通常會將數據流封裝成 FLV 通過 HTTP 提供出去。但是這樣也有一些問題需要解決：
- iOS 平臺沒有提供原生支持 RTMP 或 HTTP-FLV 的播放器，這就需要開發支持相關協議的播放器。
- 協議復雜：RTMP協議比起HTTP復雜很多，導致性能低下。
- 有累積延遲：，原因是RTMP基于TCP不會丟包。所以當網絡狀態差時，服務器會將包緩存起來，導致累積的延遲；待網絡狀況好了，就一起發給客戶端。這個的對策就是，當客戶端的緩沖區很大，就斷開重連。
詳細鏈接：http://www.cnblogs.com/my_life/articles/5593892.html
詳細鏈接：http://easydarwin.org/article/Streaming/141.html
詳細鏈接：https://www.cnblogs.com/samirchen/p/7066116.html
二、Video.js的使用
Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持情況，如果不支持 HTML5 則自動使用 Flash 播放器
1、我在這里使用的是5.x版本的下載鏈接：https://download.csdn.net/download/little__superman/11108903
2、下載解壓完成后，引入文件
<link href="css/5.0css/video-js.css" rel="stylesheet" type="text/css"> <script src="js/5.0js/videojs-ie8.min.js"></script> <script src="js/5.0js/video.min.js"></script> <script src="js/videojs-contrib-hls.js"></script>
3、在頁面加入video標簽
<h1>香港衛視</h1> <video id="example_video" width="800" height="500" class="video-js vjs-default-skin " controls poster=""> <!-- RTMP直播源地址:香港衛視--> <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/flv"> </video>
poster：是視頻的縮略圖,也就是未播放是顯示的圖片
controls：向用戶顯示播放按鈕控件
4、一小段js代碼對視頻進行一些控制或制定
<script> var player = videojs('example_video');</script>
5、效果圖：
播放前：
播放中：
6、默認情況下，播放按鈕是被定為在左上角的，這樣就不會覆蓋視頻內容。如果你想讓這個播放按鈕居中，你可以給你的 video 標簽添加額外的 vjs-big-play-centered樣式。
<h1>香港衛視</h1> <video id="example_video" width="800" height="500" class="video-js vjs-default-skin vjs-big-play-centered" controls poster=""> <!-- RTMP直播源地址:香港衛視--> <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/flv"> </video>
7、進階-使用video.js的api對videojs全局函數的使用
videojs是全局函數，它可以接收三個參數（id,options,onready）: 第一個參數是video標簽的id比如:videojs('#example_video_1'); 第二參數是配置選項，除了在這里給出之外，還可以通過在video標簽中，通過data-setup='{}'屬性的形式給出。第三個參數實際上是videojs初始化完成之后的回調函數，在這個里函數里邊，可以使用this引用videojs的實例對象。進行開始播放、停止等操作。
(1)、常用配置選項
autoplay: false, //自動播放：true/false controls: true, //是否顯示底部控制欄：true/false width: 300, //視頻播放器顯示的寬度 height: 300, //視頻播放器顯示的高度 loop: false, //是否循環播放:true/false muted: false, //設置默認播放音頻：true/false poster:"", //視頻開始播放前顯示的圖像的URL。這通常是一個幀的視頻或自定義標題屏幕。一旦用戶點擊“播放”圖像就會消失 src:"", //要嵌入的視頻資源url，The source URL to a video source to embed. techOrder: ['html5', 'flash'], //使用播放器的順序,下面的示例說明優先使用html5播放器，如果不支持將使用flash notSupportedMessage: false, //是否允許重寫默認的消息顯示出來時，video.js無法播放媒體源 plugins: {}, //插件 sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //資源文件等價于html中的形式source標簽 aspectRatio:"1:1" //將播放器置于流體模式下，計算播放器動態大小時使用該值。 //該值應該是比用冒號隔開的兩個數字（如“16:9”或“4:3”）。 fluid: false, //是否自適應布局,播放器將會有流體體積。換句話說，它將縮放以適應容器。 // 如果<video>標簽有“vjs-fluid”樣式時，這個選項會自動設置為true。 preload: "metadata", //建議瀏覽器是否在加載<video>元素時開始下載視頻數據。(預加載) //auto:立即加載視頻（如果瀏覽器支持它）。一些移動設備將不會預加載視頻，以保護用戶的帶寬/數據使用率。這就是為什么這個值被稱為“自動”，而不是更確鑿的東西 // metadata:只加載視頻的元數據，其中包括視頻的持續時間和尺寸等信息。有時，元數據會通過下載幾幀視頻來加載。 //none
(2)、常用事件
this.on('suspend', function() {//延遲下載 console.log("延遲下載") }); this.on('loadstart', function() { //客戶端開始請求數據 console.log("客戶端開始請求數據") }); this.on('progress', function() {//客戶端正在請求數據 console.log("客戶端正在請求數據") }); this.on('abort', function() {//客戶端主動終止下載（不是因為錯誤引起） console.log("客戶端主動終止下載") }); this.on('error', function() {//請求數據時遇到錯誤 console.log("請求數據時遇到錯誤") }); this.on('stalled', function() {//網速失速 console.log("網速失速") }); this.on('play', function() {//開始播放 console.log("開始播放") }); this.on('pause', function() {//暫停 console.log("暫停") }); this.on('loadedmetadata', function() {//成功獲取資源長度 console.log("成功獲取資源長度") }); this.on('loadeddata', function() {//渲染播放畫面 console.log("渲染播放畫面") }); this.on('waiting', function() {//等待數據，并非錯誤 console.log("等待數據") }); this.on('playing', function() {//開始回放 console.log("開始回放") }); this.on('canplay', function() {//可以播放，但中途可能因為加載而暫停 console.log("可以播放，但中途可能因為加載而暫停") }); this.on('canplaythrough', function() { //可以播放，歌曲全部加載完畢 console.log("可以播放，歌曲全部加載完畢") }); this.on('seeking', function() { //尋找中 console.log("尋找中") }); this.on('seeked', function() {//尋找完畢 console.log("尋找完畢") }); this.on('timeupdate', function() {//播放時間改變 console.log("播放時間改變") }); this.on('ended', function() {//播放結束 console.log("播放結束") }); this.on('ratechange', function() {//播放速率改變 console.log("播放速率改變") }); this.on('durationchange', function() {//資源長度改變 console.log("資源長度改變") }); this.on('volumechange', function() {//音量改變 console.log("音量改變") });
(3)、常用方法
- 播放：
myPlayer.play(); - 暫停：
myPlayer.pause(); - 獲取播放進度：
var whereYouAt = myPlayer.currentTime(); - 設置播放進度：
myPlayer.currentTime(120); - 視頻持續時間，加載完成視頻才可以知道視頻時長，且在flash情況下無效:
var howLongIsThis = myPlayer.duration(); - 緩沖，就是返回下載了多少: `var whatHasBeenBuffered = myPlayer.buffered();
- 百分比的緩沖:
var howMuchIsDownloaded = myPlayer.bufferedPercent(); - 聲音大小（0-1之間）:
var howLoudIsIt = myPlayer.volume(); - 設置聲音大小:
myPlayer.volume(0.5); - 取得視頻的寬度:
var howWideIsIt = myPlayer.width(); - 設置寬度：
myPlayer.width(640); - 獲取高度:
var howTallIsIt = myPlayer.height(); - 設置高度：:
myPlayer.height(480); - 一步到位的設置大小：
myPlayer.size(640,480); - 全屏:
myPlayer.enterFullScreen(); - 離開全屏 :
myPlayer.enterFullScreen();
(4)、網絡狀態
- myPlayer.currentSrc; //返回當前資源的URL
- myPlayer.src = value; //返回或設置當前資源的URL
- myPlayer.canPlayType(type); //是否能播放某種格式的資源
- myPlayer.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源
- myPlayer.load(); //重新加載src指定的資源
- myPlayer.buffered; //返回已緩沖區域，TimeRanges
- myPlayer.preload; //none:不預載 metadata:預載資源信息 auto:立即加載視頻
(5)、播放狀態
- myPlayer.currentTime = value; //當前播放的位置，賦值可改變位置
- myPlayer.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0
- myPlayer.duration; //當前資源長度 流返回無限
- myPlayer.paused; //是否暫停
- myPlayer.defaultPlaybackRate = value;//默認的回放速度，可以設置
- myPlayer.playbackRate = value;//當前播放速度，設置后馬上改變
- myPlayer.played; //返回已經播放的區域，TimeRanges，關于此對象見下文
- myPlayer.seekable; //返回可以seek的區域 TimeRanges
- myPlayer.ended; //是否結束
- myPlayer.autoPlay; //是否自動播放
- myPlayer.loop; //是否循環播放
(6)、視頻控制
- myPlayer.controls;//是否有默認控制條
- myPlayer.volume = value; //音量
- myPlayer.muted = value; //靜音
- TimeRanges(區域)對象
- TimeRanges.length; //區域段數
- TimeRanges.start(index) //第index段區域的開始位置
- TimeRanges.end(index) //第index段區域的結束位置
8、綜合示例：
效果圖：
播放前：
播放后：
上代碼：
HTML:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>電視臺</title> <!--引入video.js文件--> <link rel="stylesheet" type="text/css" href="css/5.0css/video-js.css"> <script src="js/5.0js/video.min.js"></script> <script src="js/videojs-contrib-hls.js"></script> </head> <body> <section id="videoPlayer"> <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered"> <!-- hls直播源地址：CCTV6高清 --> <!--<source src="http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" type="application/x-mpegURL">--> <!-- 官方案例MP4 --> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> </video> </section> <br /> <button class="control" onclick=operation("play")>播放</button>      <button class="control" onclick=operation("stop")>停止</button>      <button class="control" onclick=operation("reload")>重載</button>      <button class="control" onclick=operation("reset")>重置</button>      <button class="control" onclick=operation("fastForward")>快進</button>      <button class="control" onclick=operation("back")>后退</button>      <button class="control" onclick=operation("volumeUp")>音量+</button>      <button class="control" onclick=operation("volumeUp")>音量-</button>      <button class="control" onclick=operation("fullScreen")>全屏</button>      <button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br /> <button class="control" onclick=cut("CCTV1")>CCTV1高清 </button>      <button class="control" onclick=cut("CCTV3")>CCTV3高清 </button>      <button class="control" onclick=cut("CCTV6")>CCTV6高清 </button>      <button class="control" onclick=cut("XHWS")>香港衛視</button>      <button class="control" onclick=cut("MGZW")>美國中文電視</button>      <button class="control" onclick=cut("ocean")>海洋</button>      </body></html>
js:
<script type="text/javascript">// video標簽id,// 配置選項(data-setup='{}'),// videojs初始化完成回調函數 var myPlayer = videojs('example-video', { "width":"1000", "height":"600", "poster": "", "controls": true, "autoplay" :false, "techOrder" : [ "html5", "flash" ], "loop":false, "muted":false, "preload": 'metadata' }, function onPlayerReady(){ var myPlayer = this; //在回調函數中，this代表當前播放器， //可以調用方法，也可以綁定事件。 /** * 事件events 綁定事件用on 移除事件用off */ this.on('suspend', function() {//延遲下載 console.log("延遲下載") }); this.on('loadstart', function() { //客戶端開始請求數據 console.log("客戶端開始請求數據") }); this.on('progress', function() {//客戶端正在請求數據 console.log("客戶端正在請求數據") }); this.on('abort', function() {//客戶端主動終止下載（不是因為錯誤引起） console.log("客戶端主動終止下載") }); this.on('error', function() {//請求數據時遇到錯誤 console.log("請求數據時遇到錯誤") }); this.on('stalled', function() {//網速失速 console.log("網速失速") }); this.on('play', function() {//開始播放 console.log("開始播放") }); this.on('pause', function() {//暫停 console.log("暫停") }); this.on('loadedmetadata', function() {//成功獲取資源長度 console.log("成功獲取資源長度") }); this.on('loadeddata', function() {//渲染播放畫面 console.log("渲染播放畫面") }); this.on('waiting', function() {//等待數據，并非錯誤 console.log("等待數據") }); this.on('playing', function() {//開始回放 console.log("開始回放") }); this.on('canplay', function() {//可以播放，但中途可能因為加載而暫停 console.log("可以播放，但中途可能因為加載而暫停") }); this.on('canplaythrough', function() { //可以播放，歌曲全部加載完畢 console.log("可以播放，歌曲全部加載完畢") }); this.on('seeking', function() { //尋找中 console.log("尋找中") }); this.on('seeked', function() {//尋找完畢 console.log("尋找完畢") }); this.on('timeupdate', function() {//播放時間改變 console.log("播放時間改變") }); this.on('ended', function() {//播放結束 console.log("播放結束") }); this.on('ratechange', function() {//播放速率改變 console.log("播放速率改變") }); this.on('durationchange', function() {//資源長度改變 console.log("資源長度改變") }); this.on('volumechange', function() {//音量改變 console.log("音量改變") }); }); /** * 方法 */ function operation(param){ console.log(param) if("play"==param){ //開始播放 myPlayer.play(); playState(); }else if("stop"==param){ //停止播放 myPlayer.pause(); }else if("fastForward"==param){ //快進 var whereYouAt = myPlayer.currentTime(); myPlayer.currentTime(10+whereYouAt); }else if("reload"==param){ //重新加載 myPlayer.pause(); myPlayer.load(); myPlayer.play(); }else if("back"==param){ //后退 var whereYouAt = myPlayer.currentTime(); myPlayer.currentTime(whereYouAt-10); }else if("fullScreen"==param){ //全屏 myPlayer.enterFullScreen(); }else if("exitFullScreen"==param){ //退出全屏 myPlayer.enterFullScreen(); }else if("volumeUp"==param){ //音量加 var howLoudIsIt = myPlayer.volume(); myPlayer.volume(howLoudIsIt+0.1); }else if("volumeDown"==param){ //音量減 var howLoudIsIt = myPlayer.volume(); myPlayer.volume(howLoudIsIt-0.1); }else if("reset"==param){ //重置，視頻不會播放 myPlayer.reset(); } } function cut(channel){ myPlayer.reset();//重置 if("CCTV1"==channel){ //CCTV1 myPlayer.src({ type: "application/x-mpegURL", src:"http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" }); myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"); myPlayer.play(); }else if("CCTV3"==channel){ //CCTV3 myPlayer.src({ type: "application/x-mpegURL", src:"http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" }); myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8"); myPlayer.play(); }else if("CCTV6"==channel){ //CCTV6 myPlayer.src({ type: "application/x-mpegURL", src:"http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" }); myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8"); myPlayer.play(); }else if("XHWS"==channel){ //香港衛視 myPlayer.src({ type: "rtmp/flv", src:"rtmp://live.hkstv.hk.lxdns.com/live/hks1" }); myPlayer.load("rtmp://live.hkstv.hk.lxdns.com/live/hks1"); myPlayer.play(); }else if("MGZW"==channel){ //美國中文電視 myPlayer.src({ type: "rtmp/flv", src:"rtmp://media3.sinovision.net:1935/live/livestream" }); myPlayer.load("rtmp://media3.sinovision.net:1935/live/livestream"); myPlayer.play(); }else if("ocean"==channel){ //官方案例 myPlayer.src({ type: "video/mp4", src:"http://vjs.zencdn.net/v/oceans.mp4" }); myPlayer.load("http://vjs.zencdn.net/v/oceans.mp4"); myPlayer.play(); } } </script>
9、播放樣式修改
(1)、播放按鈕居中
在<video>標簽中加入vjs-big-play-centered類
<video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered">
(2)、暫停時顯示播放按鈕
在css代碼中增加一下代碼
.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started .vjs-big-play-button { display: block;}
(3)、播放按鈕變成圓形
在css代碼中增加一下代碼
.video-js .vjs-big-play-button{ font-size: 2.5em; line-height: 2.3em; height: 2.5em; width: 2.5em; -webkit-border-radius: 2.5em; -moz-border-radius: 2.5em; border-radius: 2.5em; background-color: #73859f; background-color: rgba(115,133,159,.5); border-width: 0.15em; margin-top: -1.25em; margin-left: -1.75em;}/* 中間的播放箭頭 */.vjs-big-play-button .vjs-icon-placeholder { font-size: 1.63em;}/* 加載圓圈 */.vjs-loading-spinner { font-size: 2.5em; width: 2em; height: 2em; border-radius: 1em; margin-top: -1em; margin-left: -1.5em;}
三、補充說明
1.對于Video.js 5.x及更低版本，Flash技術是Video.js核心存儲庫的一部分。對于Video.js 6.x及更高版本，Flash技術位于單獨的存儲庫中。videojs-flash.js插件只與Video.js> = 6.0.0一起使用，因為之前的flash技術已構建到版本中！ video.js不能直接播放rtmp流，需要videojs-flash.js 這個插件。
2.對于播放HLS視頻，在videojs7版本之前要引用videojs-contrib-hls.js插件才能播放。videojs7版本之后的，Video.js默認捆綁VHS（VHS是videojs-contrib-hls的繼承者。它是一個源自videojs-contrib-hls存儲庫的源處理程序。雖然videojs-contrib-hls最初設計用于在所有瀏覽器上添加HLS播放，但我們意識到引擎也可以播放其他格式，所以videojs-contrib-hls這個項目已經被棄用，被videojs-http-streaming繼承）。默認情況下，在Video.js 7及以上版本中已經集成Videojs HTTP Streaming（昵稱為VHS），不必使用videojs-http-streaming插件就可以播放HLS，DASH和未來的HTTP流媒體協議視頻。
注意：
1.對于Video.js 7之前的版本（明確說是6版本的），必須使用videojs-http-streaming.js插件才可以播放HLS，DASH和未來的HTTP流媒體協議視頻，即使它們不是本機支持的。
2.VHS支持HLS和DASH和未來的HTTP流媒體協議。
詳情鏈接：https://www.cnblogs.com/FHC1994/p/9981440.html
四、直播源地址
HLS直播源地址：
CCTV1高清：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV3高清：http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV6高清：http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8
RTMP直播源地址：
香港衛視：rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks2
湖南衛視：rtmp://58.200.131.2:1935/livetv/hunantv
美國1：rtmp://ns8.indexforce.com/home/mystream
美國中文電視：rtmp://media3.sinovision.net:1935/live/livestream
香港財經：rtmp://202.69.69.180:443/webcast/bshdlive-pc
韓國GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
在下一篇中總結了遇到的問題，及怎么兼容rtmp和hls。如有興趣請點擊這里
