用Video.js實現H5直播介面

這次帶給大家用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=&#39;&#39;application/x-mpegURL" />

當播放錄播時候接受到是MP4格式，可以直接使用

<source src="http://xxxxxx.mp4" type=&#39;&#39;video/mp4" />

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

HTML的meta viewport屬性應該如何使用

html的圖片如何使用base64編碼來代替

在HTML裡的hr水平線應該如何使用

html怎麼實作圖文混排

以上是用Video.js實現H5直播介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！