監控視頻的前端展現,我主要作過三種視頻流的展現:rtsp,HLS和FLV。css
rtsp視頻流須要安裝插件,我當時作這個流是安裝VLC播放器插件,這個插件兼容性很差,目前只發現360瀏覽器能正常播放,侷限性很大。用HTML5的Object標籤,看代碼:前端
1 <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 2 codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" 3 id="vlc" 4 name="vlc" 5 class="vlcPlayer" 6 events="True" width="400" height="400"> 7 <param name="Src" value="rtsp://admin:123456@IP:port/cam/realmonitor?channel=1&subtype=0" /> 8 <param name="ShowDisplay" value="True" /> 9 <param name="AutoLoop" value="False" /> 10 <param name="AutoPlay" value="True" /> 11 <param name='fullscreen' value='false'/> 12 <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="600" height="450" 13 target="rtsp://admin:123456@IP:port/cam/realmonitor?channel=1&subtype=0" ></embed> 14 </objetc>
視頻流的地址:瀏覽器
rtsp://admin:123456@IP:port/cam/realmonitor?channel=1&subtype=0
由於rtsp的侷限性太大,後面客戶要求換方式,因而就換了HLS和FLV流的方式,HLS會延時幾秒,可是對網絡環境要求不高,FLV沒有延遲,可是對網絡環境要求較高。這種方式用的是HTML5的新標籤video,這個兼容性很好,能夠兼容不少瀏覽器。網絡
HTML頁面:app
1 <div id='servicehallSlide_camera'><video id='myVideo' class='video-js vjs-default-skin' controls preload='auto' autoplay='true'></div>
js代碼:ide
1 /** 2 * 根據視頻流類型播放監控 3 * @method playVideo 4 * @param {string} videoUrl 視頻流地址 5 * @param {string} scheme 視頻流類型 6 * @return {返回值類型} 返回值說明 7 **/ 8 function playVideo(videoUrl, scheme) { 9 if (!flvjs.isSupported()) { alert("瀏覽器不支持 FLV, 請升級!"); } 10 if (!Hls.isSupported()) { alert("瀏覽器不支持 HLS, 請升級!"); } 11 var video = document.getElementById("myVideo"); 12 //播放HLS流視頻 13 if (scheme == 'HLS') { 14 var myPlayer = new Hls(); 15 myPlayer.loadSource(videoUrl); 16 myPlayer.attachMedia(video); 17 myPlayer.on(Hls.Events.MANIFEST_PARSED, function () { 18 video.play(); 19 }); 20 } else {//播放FLV流視頻 21 var myPlayer = flvjs.createPlayer({ 22 type: 'flv', 23 url: videoUrl 24 }); 25 myPlayer.attachMediaElement(video); 26 myPlayer.load(); 27 myPlayer.play(); 28 } 29 }
HLS須要hls.min.js,FLV須要flv.min.js,這個網上應該有下載。oop
此外,還須要設置css,css文件名爲video-js-cdn.css,css代碼比較長我就不粘貼出來了。google
這樣就完工了。url