web前端監控視頻的展示

監控視頻的前端展示，我主要做過三種視頻流的展示：rtsp，HLS和FLV。

1、rtsp視頻流

　　rtsp視頻流需要安裝插件，我當時做這個流是安裝VLC播放器插件，這個插件兼容性不好，目前只發現360瀏覽器能正常播放，局限性很大。用HTML5的Object標簽，看代碼：

　　

<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 
      codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
      id="vlc"
      name="vlc"
      class="vlcPlayer"
       events="True" width="400" height="400">
        <param name="Src" value="rtsp://admin:123456@IP:port/cam/realmonitor?channel=1&subtype=0" />
        <param name="ShowDisplay" value="True" />
        <param name="AutoLoop" value="False" />
        <param name="AutoPlay" value="True" />
        <param name='fullscreen' value='false'/>
        <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="600" height="450"
         target="rtsp://賬號:密碼@IP:port/cam/realmonitor?channel=1&subtype=0" ></embed>
</objetc>

　　視頻流的地址：

　　rtsp://賬號:密碼@IP:port/cam/realmonitor?channel=1&subtype=0

2、HLS和FLV

　　因為rtsp的局限性太大，后面客戶要求換方式，於是就換了HLS和FLV流的方式，HLS會延時幾秒，但是對網絡環境要求不高，FLV沒有延遲，但是對網絡環境要求較高。這種方式用的是HTML5的新標簽video，這個兼容性很好，可以兼容很多瀏覽器。

　　HTML頁面：

<div  id='servicehallSlide_camera'><video id='myVideo' class='video-js vjs-default-skin' controls preload='auto' autoplay='true'></div>

　　js代碼：

/**
 * 根據視頻流類型播放監控
 * @method playVideo
 * @param {string} videoUrl 視頻流地址
 * @param {string} scheme 視頻流類型
 * @return {返回值類型} 返回值說明
 **/
function playVideo(videoUrl, scheme) {
    if (!flvjs.isSupported()) { alert("瀏覽器不支持 FLV, 請升級！"); }
    if (!Hls.isSupported()) { alert("瀏覽器不支持 HLS, 請升級！"); }
    var video = document.getElementById("myVideo");
    //播放HLS流視頻
    if (scheme == 'HLS') {
        var myPlayer = new Hls();
        myPlayer.loadSource(videoUrl);
        myPlayer.attachMedia(video);
        myPlayer.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    } else {//播放FLV流視頻
        var myPlayer = flvjs.createPlayer({
            type: 'flv',
            url: videoUrl
        });
        myPlayer.attachMediaElement(video);
        myPlayer.load();
        myPlayer.play();
    }
}

　　HLS需要hls.min.js，FLV需要flv.min.js，這個網上應該有下載。

　　此外，還需要設置css，css文件名為video-js-cdn.css，css代碼比較長我就不粘貼出來了。

　　這樣就完工了。