技術標籤：快( 輕 )應用

H5視訊之視訊直播(前端, video.js)

原理
視訊直播的流程原理圖如下：
這裡寫圖片描述:

大致過程（摘自知乎：https://www.zhihu.com/question/37887655/answer/104444735）：

流程如下：

1.資料採集：
攝像機及拾音器收集視訊及音訊資料，此時得到的為原始資料
涉及技術或協議：
攝像機：CCD、CMOS
拾音器：聲電轉換裝置（咪頭）、音訊放大電路
2.前處理：
主要處理美顏、水印、模糊等效果。美顏功能幾乎是直播的標配功能
3.資料編碼：
使用相關硬體或軟體對音視訊原始資料進行編碼處理（數字化）及加工（如音視訊混合、打包封裝等），得到可用的音視訊資料

涉及技術或協議
編碼方式：
⑴：CBR
⑵：VBR
編碼格式：
⑴：視訊：H.265、H.264、MPEG-4等，封裝容器有TS、MKV、AVI、MP4等
⑵：音訊：G.711μ、AAC、Opus等，封裝有MP3、OGG、AAC等
4.解碼資料：
使用相關硬體或軟體對接收到的編碼後的音視訊資料進行解碼，得到可以直接顯示的影象/聲音
涉及技術或協議：
一般對應的編碼器都會帶有相應的解碼器，也有一些第三方解碼外掛等
5.播放顯示：
在顯示器（電視、監視屏等）或揚聲器（耳機、喇叭等）裡，顯示相應的影象畫面或聲音
涉及技術或協議：
顯示器、揚聲器等

所用協議介紹：
1、RTMP(Real Time Messaging Protocol，實時訊息傳送協議)

2、RTSP(Real Time Streaming Protocol，實時流傳輸協議)
3、RTP(Real-time Transport Protocol，實時傳輸協議)

特別說明：以上是視訊直播的一個大概技術開發介紹，本文不介紹上面的技術與協議，只介紹如何在通過第三方直播雲平臺（如京東直播雲平臺，阿里雲直播雲平臺）獲取到已經處理好的rtmp資料流後在web前端展示

開發
技術選擇：video.js（這裡選擇v5.18.4版本，6.0版本以上就不支援flash了，所以不能用6.0以上版本）
傳輸流協議選擇：rtmp

1.靜態顯示

html：

<script src="./custom/video/video.min.js"
 
></script>
<link href="./custom/video/video-js.css" rel="stylesheet">



<video id="my-video" class="video-js" controls preload="auto" width="640" height="300"  
 poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449.jpg" data-setup="{}">  
    <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">  
    <p class="vjs-no-js">播放視訊需要啟用 JavaScript，推薦使用支援HTML5的瀏覽器訪問。  
      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>  

2.動態顯示

html：

<script src="./custom/video/video.min.js"></script>
<link href="./custom/video/video-js.css" rel="stylesheet">

<video id="container" class="video-js vjs-big-play-centered"  width="700" height="450" controls preload="auto"></video>

js：

//初始化視訊

let player = videojs('container',{
  //像data-setup那樣設定的引數
},function onPlayerReady(){
  //視訊播放器初始化完畢，就會呼叫這個回撥函式
  this.src({
    src: "rtmp流地址",
    type:'rtmp/flv'
  });
});

3.動態重新整理與過載

//重新整理時需要先登出video.js，很重要，否則會報錯
if($("#container").length > 0) {
    let player = videojs('container');
    player.dispose();
  }


//過載
let player =  videojs("container");  //初始化視訊
//重置video的src
player.src({
  src: "新的rtmp流地址",
  type:'rtmp/flv'
});
player.load();
player.play();

參考

https://blog.csdn.net/liuyuqin1991/article/details/79310080
https://github.com/gwuhaolin/blog/issues/3
video.js的github：https://github.com/videojs/video.js
如何搭建一個完整的視訊直播系統：https://www.zhihu.com/question/42162310?sort=created&page=2
另外一箇中文視訊播放JavaScript庫sewise-player：https://github.com/jackzhang1204/sewise-player
video.js 使用筆記：http://blog.csdn.net/u014739462/article/details/70849195
video.js 使用技巧：https://www.awaimai.com/2053.html
https://blog.csdn.net/a0405221/article/details/80923090