web front-end monitoring of video display

Monitoring front-end display video, I mainly did show three video streams: rtsp, HLS, and FLV.

1, rtsp video stream

　　rtsp video stream need to install the plug-in, I was doing this stream is to install VLC player plugin that compatibility is not good, currently found only 360 browsers normal playback, significant limitations. The Object tag in HTML5, look at the code:

　　

 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>

　　Video stream Address:

　　rtsp://admin:123456@IP:port/cam/realmonitor?channel=1&subtype=0

2, HLS and FLV

　　Because too restrictive rtsp, the customer asked for way back, so he changed the way HLS and FLV stream, HLS will be delayed for a few seconds, but less demanding on the network environment, FLV without delay, but on the network environment requirements more high. In this way with a new label video HTML5, and the good compatibility, it can be compatible with many browsers.

　　HTML page:

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

　　js code:

1  / * *
 2  * The video monitor displays the stream type
 . 3  * @method the playVideo
 . 4  * @param {String} videoUrl video stream address
 . 5  * @param {String} video stream type scheme
 . 6  * @return {} return Return Type Value Description
 . 7  * * / 
. 8  function the playVideo (videoUrl, scheme) {
 . 9      IF (! flvjs.isSupported ()) {Alert ( "browser does not support FLV, upgrade!" );}
 10      IF (Hls.isSupported ()! ) {alert ( "browser does not support HLS, upgrade!" );}
 . 11      var video = document.getElementById ( "myVideo" );
 12 is      // play streaming video HLS 
13 is      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 need hls.min.js, FLV need flv.min.js, this should be downloaded online.

　　You also need to set css, css file called video-js-cdn.css, css code is relatively long I do not paste out.

　　This finished.