使用videojs播放rtmp視訊
阿新 • • 發佈：2018-11-23
demo程式碼在此，直接點選下載，親測可用。demo下載
！！注意以下幾點：
- 一定要把程式碼放到伺服器上執行，然後訪問index.html，不可本地開啟使用。
- demo使用的video.js版本是5.5.3，其他版本我還沒進行測試，大家可以自己去試試。videojs官網
- 親測在谷歌，ie9以上瀏覽器都可以正常播放，ie8還有點問題。
- 截止我寫部落格時我用的rtmp視訊源是可用的，如果大家發現無法播放，可以試試其他的視訊源，這裡提供幾個，僅供參考：
香港衛視,rtmp://live.hkstv.hk.lxdns.com/live/hks
香港財經,rtmp://202.69.69.180:443/webcast/bshdlive-pc
韓國GoodTV,rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
韓國朝鮮日報,rtmp://live.chosun.gscdn.com/live/tvchosun1.stream
美國1,rtmp://ns8.indexforce.com/home/mystream
美國2,rtmp://media3.scctv.net/live/scctv_800
美國中文電視,rtmp://media3.sinovision.net:1935/live/livestream
湖南衛視,rtmp://58.200.131.2:1935/livetv/hunantv
主要的程式碼如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>測試rtmp直播源</title> <script src="js/video.js"></script> <link href="css/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 --> <script src="js/videojs-ie8.min.js"></script> </head> <body> <div class="openFlashTips" style="width:300px;position:absolute;top:20px;left:225px;z-Index:9999;color:white">視訊無法正常播放，請點選下方啟用flash</div> <video id="my-video" style="color:black;width:750px;height:350px" class="video-js" autoplay controls preload="auto" width="750" height="350" data-setup="{}"> <source src='rtmp://58.200.131.2:1935/livetv/hunantv' type='rtmp/flv'/> </video> <embed width="300" height="70" class="openFlash" style="position:absolute;top:130px;left:225px;z-Index:9999;" type="application/x-shockwave-flash"> <script type="text/javascript" language="JavaScript"> function flashChecker() { var hasFlash = 0; //是否安裝了flash var flashVersion = 0; //flash版本 var isIE = /*@[email protected]*/0; //是否IE瀏覽器 if (isIE) { var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if (swf) { hasFlash = 1; VSwf = swf.GetVariable("$version"); flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]); } } else { if (navigator.plugins && navigator.plugins.length > 0) { var swf = navigator.plugins["Shockwave Flash"]; if (swf) { hasFlash = 1; var words = swf.description.split(" "); for (var i = 0; i < words.length; ++i) { if (isNaN(parseInt(words[i]))) continue; flashVersion = parseInt(words[i]); } } } } return {f: hasFlash, v: flashVersion}; } var fls = flashChecker(); var s = ""; if (fls.f) { document.getElementsByClassName("openFlash")[0].style.display = "none"; document.getElementsByClassName("openFlashTips")[0].style.display = "none"; // document.write("您安裝了flash,當前flash版本為: " + fls.v + ".x"); } else { document.getElementsByClassName("openFlash")[0].style.display = "block"; document.getElementsByClassName("openFlashTips")[0].style.display = "block"; // document.write("您沒有安裝flash"); } </script> </body> </html>
效果圖如下所示：
