這次帶給大家用Video.js實作H5直播介面，用Video.js實作H5直播介面的注意事項有哪些，以下就是實戰案例，一起來看一下。
最近做了一個行動端H5簡易版直播頁，只有直播功能，後期再添加彈幕和禮物，要求是在微信中，雖然沒有涉及到錄製直播這方面，但也去了解下關於直播方面的相關知識，
1.構成
如圖所示，背景利用video標籤播放直播，如有彈幕可以採用webscoket 來實時獲取彈幕，禮物或動畫則用css3實現。
2.流程
行動端透過原生系統，pc採用obs軟體進行視訊的擷取，在資料處理，編碼，透過rtmp推流到串流媒體伺服器，串流伺服器會產生不同格式的播放視訊串流，如rtmp，hls，再拉流，音視頻解碼，播放。
3.推流
RTMP
：是Macromedia 開發的即時訊息傳輸協議，改協議基於TCP，現在屬於Adobe，主要用來在Flash/air平台和支援RTMP協定的串流/互動伺服器之間的音訊視訊和資料同心。
優點：協定簡單，各個平台都容易實現，CDN 支援良好。
4.拉流
透過了解，分為3種。
RTMP ：本質為TCP長鏈接，每個時刻的資料收到後立刻轉發，延遲低。
-HTTP-FLV：本質為HTTP長鏈接，每個時刻的資料收到後立刻轉發，延遲低。
-HLS : HTTP短鏈接，跨平台好，延遲稍高。它主要包括兩個內容.m3u8檔案和.ts檔案。透過請求 m3u8 的 url，video 標籤會解析這個文件，並找到對應的 ts 文件來播放。
5.遇到的問題
主要用到video.js
QQx5核心：
在安卓微信，qq瀏覽器，由於是x5內核，播放影片時候會彈出一個系統播放層，但在qq瀏覽器有bug，最上層有黑色層。解決方法是隱藏video標籤。
當直播時接受到資料是rtmp協議，無法直接播發，轉換成.m3u8格式
<source src="http://xxxxxx.m3u8" type=''application/x-mpegURL" />
當播放錄播時候接受到是MP4格式，可以直接使用
<source src="http://xxxxxx.mp4" type=''video/mp4" />
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是用Video.js實現H5直播介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
