前端播放流媒體(RTMP,RTSP,HLS)

前言

最近項目需要流媒體的播放，後端一共提供了 三種流資料(RTSP,RTMP,HLS),在不同的情境可能會使用到不同方式播放，就需要做到適配， 支援所有的流資料播放。花了一段時間研究，在這裡和大家分享一下，還有些遺留問題，看大家有沒有好的方法。 RTSP 簡介

這種協議流資料前段播放，沒有特別好的解決方案，需要在本機裝一個vlc 外掛程式，依靠這個外掛程式才能讓 RTSP 協議 在網頁上能播放，但是目前高版本的 Chrome 瀏覽器不支援 NPAPI 外掛程式，也就是說高版本的 Chrome 瀏覽器還是不能播放（46 以上的版本都不行）。 html code

  <object type='application/x-vlc-plugin' id='vlc' width="200" height="500" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">     <param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />     <param name='volume' value='50' />     <param name='autoplay' value='true' />     <param name='loop' value='false' />     <param value="transparent" name="wmode">     <embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="200" height="500" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://***********************/Streaming/Channels/1">  </object>

代碼很簡單，更播放 flash 差別不是很大，需要改幾個點，
1.object 標籤的 type , codebase 屬性
2.param 標籤 <param name='mrl' value='rtsp://***********************/Streaming/Channels/1' /> js code

     //擷取 VLC js 隊形      function getVLC(name) {            if (window.document[name]) {                return window.document[name];            }            if (navigator.appName.indexOf("Microsoft Internet") == -1) {                if (document.embeds && document.embeds[name])                    return document.embeds[name];            } else {                return document.getElementById(name);            }        }         // 根據地址切換視訊        function doGo(mrl) {            try {                var vlc = getVLC("vlc"),                    itemId = vlc.playlist.add(mrl);                vlc.playlist.playItem(itemId);            } catch (e) {                console.log(e);            }        }       //調用     doGo(mrl)

我們用js 代碼主要是用來切換地址，達到如果流資料 地址變化， 內容跟著變化。

VlC 給我們提供了豐富的API ,請查看 VLC API HLS 簡介

Http Live Streaming （簡稱HLS) ，它在移動 網頁瀏覽器支援挺好，所以現在好多移動端直播都在用此協議。但在 PC Chrome,Firefox 上不支援，所以還需要藉助flash 。在研究的過程中發現了 video.js 這個外掛程式，代碼託管 在 github 上，開源。但是它不直接支援播放 HLS 協議的播放. 需要藉助 videojs-contrib-hls 但是我怎麼測試都沒成功，播放不了。大家有測試通的可以聯絡我。 經過一番的尋找，github 上一頓搜尋，黃天不負有心人，找見了這個庫FZ-live 我看他也是基於 video.js 的。 html code

<video id="video" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'>    <source src="./src/z.m3u8" type="application/x-mpegURL"></video>

直接寫video 標籤， 在 source 的 src 給上路徑就可以，還有個要求，就是資源 不能跨域，需要在同一域下。 js code

//切換地址播放var player = videojs('video'); player.ready(function() {     var myPlayer = this;     myPlayer.src(url);     myPlayer.load(url);     myPlayer.play();   });

我們用js實現了切換地址播放。 video.js 這個外掛程式 提供了好多api 我們有需要可以查看,可以做出好多功能 RTMP 簡介

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套ApsaraVideo for Live協議，現在屬於 Adobe。所以我們就只能藉助 flash 了 。 在研究 video.js 外掛程式的時候， 看它也能提供 RTMP 的播放，這下我們就省事多了。 html code

<video id="vlc" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'></video>

看到我沒有寫 source 標籤，我們直接用js 來操作，做到播放 RTMP 和 HLS 的適配 . js code

player.ready(function() {    var myPlayer = this;    myPlayer.reset();    if (scope.type == 'hls') {        console.log('hls');        myPlayer.src({ type: "application/x-mpegURL", src: scope.url });    } else {        myPlayer.src({ type: "rtmp/flv", src: scope.url });        console.log('rtmp');    }    myPlayer.load(scope.url);    myPlayer.play();});

我們藉助 player.src() 方法就是實現，根據不同的類型設定 src 的type 就可以。但是每次我們更改地址的時候，記得調用一下 player.reset() 方法會重設播放器 。要不會有問題，切換不了。 結束語

以上我是我在解決前段播放 流媒體資料的過程。其中還有幾個問題，需要研究改進。 RTSP 在 chrome 的高版本瀏覽器播放 videojs-contrib-hls 這個庫播放 hls （猜測，是不是後端給的資料流有問題）

http://www.cnblogs.com/qiaojie/p/5733335.html