videojs+hls+rtmp流媒體播放

時間 2019-11-29

標籤 videojs+hls+rtmp videojs hls rtmp 媒體播放简体版

原文原文鏈接

前言：剛接觸前端，小白一個，若有出錯，請指正，謝謝！css

注：視頻格式能夠分爲適合本地播放的本地影像視頻和適合在網絡中播放的網絡流媒體影像視頻兩大類。html

1、互聯網網絡流媒體簡介前端

　　HTTP stream是各家本身定義的http流，應用於國內點播視頻網站。web

　　HLS是蘋果公司實現的基於 HTTP 的流媒體傳輸協議，全稱 HTTP Live Streaming，可支持流媒體的直播和點播，主要應用在 iOS 系統，爲 iOS 設備（如 iPhone、iPad）提供音視頻直播和點播方案。chrome

　　RTMP是實時消息傳輸協議，Real Time Messaging Protocol，是 Adobe Systems 公司爲 Flash 播放器和服務器之間音頻、視頻和數據傳輸開發的開放協議。協議基於 TCP，是一個協議族，包括 RTMP 基本協議及 RTMPT/RTMPS/RTMPE 等多種變種。RTMP 是一種設計用來進行實時數據通訊的網絡協議，主要用來在 Flash/AIR 平臺和支持RTMP協議的流媒體/交互服務器之間進行音視頻和數據通訊。瀏覽器

　　HTTP用於點播，本質上仍是文件分發，實時性差。服務器

　　HLS支持點播和直播 ，HLS的延遲在10秒以上。網絡

　　RTMP本質上是流協議，主要的優點是：實時性高(實時性通常在3秒以內)、穩定性高。主要用於直播應用，對實時性有必定要求。編輯器

　　RTMP協議通常傳輸的是flv，f4v格式流，RTSP協議通常傳輸的是ts,mp4格式的流。HTTP沒有特定的流。ide

補註：（可用的直播源地址，於2018年11月21日經測試可用）

　　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

2、示例

環境：videojs7.3.0+chrome瀏覽器

1.HLS測試代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <title>播放器</title>
        <!-- 導入的videojs是7.0版本以上的，集成VHS協議庫，可播放HLS流媒體視頻 -->
        <link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css">
        <script src="videolib/js/video.min.js"></script>
    </head>
    <body>
        <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>
            <!-- hls直播源地址：CCTV1高清 -->
            <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8">    
        </video>
        <script> 
            var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})
            player.play();
        </script>
    </body>
</html>

運行結果：

注：效果感受很差，不穩定，延時時間很長

2.RTMP測試代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <title>播放器</title>
        <!-- 導入的videojs是7.0版本以上的，集成VHS協議庫，可播放HLS流媒體視頻 -->
        <link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css">
        <script src="videolib/js/video.min.js"></script>
        <!-- 引入的videojs-flash.js插件主要是爲播放rtmp視頻流-->
        <script src="videolib/videojs-flash.min.js"></script>
    </head>
    <body>
        <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>
            <!-- RTMP直播源地址-->
            <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1">    
        </video>
        <script> 
            var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})
            player.play();
        </script>
    </body>
</html>

運行結果：

注：有一個錯誤，可是不影響運行，查了一下，說是由於上面代碼src缺乏http://，因此在chrome瀏覽器中會出現Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME的問題。

效果：實時性很好，直接運行就能夠打開直播源視頻了。

3、一些補充說明

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://blog.videojs.com/introducing-video-js-http-streaming-vhs/

http://www.javashuo.com/article/p-tbohwwoj-dm.html

http://www.javashuo.com/article/p-wjoarnkf-dt.html

再次補充：以上測試是在Hbuilderx環境下實現的，可是換到vscode編輯器運行rtmp流就沒法播放！最後發現好像是由於Hbuilderx自帶服務器環境，而vscode沒有，因此會出現這種狀況。

----由於看到評論不少人都在索要videojs、videojs-flash.min.js和video-js.min.css文件，因此我又把以前埋沒好久的文件拉出來給你們放到雲盤上了，你們能夠免費下載！----

連接：https://pan.baidu.com/s/1MC1c_P9j7suNbmw5bBNupg 提取碼：81zh