公司突发奇想,要把刚买回来的网络监控机用自己内部网站在线监控。
作为网站的开发员,我接下了这个任务。
网络上有很多资料参与,但是都不全都不尽人意,最后经过多次的不同关键字的查找和测试,总算让我成功了。
转入正题:
一、代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <script>
- var itemId = 0;
- 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)
- {
- var vlc = getVLC("vlc");
- itemId=vlc.playlist.add(mrl);
- vlc.playlist.playItem(itemId);
- document.getElementById("btn_stop").disabled = false;
- }
- function updateVolume(deltaVol)
- {
- var vlc = getVLC("vlc");
- vlc.audio.volume += deltaVol;
- }
- function doPlay()
- {
- vlc.playlist.playItem(itemId);
- document.getElementById("btn_stop").disabled = false;
- document.getElementById("btn_play").disabled = true;
- }
- function doStop()
- {
- getVLC("vlc").playlist.stop();
- document.getElementById("btn_stop").disabled = true;
- document.getElementById("btn_play").disabled = false;
- }
- </script>
- </head>
- <body>
- <div style="margin: 50px">
- <!-- <a title="rtsp://192.168.0.222:8012/.wmv" href="<a target=_blank href="http://zzck-dental.com">http://zzck-dental.com</a>" onclick="doGo(this.title);return false;">本机的mp4文件</a> -->
- <span style="margin: 20px;" />
- <a title="rtsp://admin:123456@192.168.0.194:88/videoMain" href="#" onclick="doGo(this.title);return false;">实时视频流</a>
- <span style="margin: 20px;" />
- </div>
- <div>
- <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" id="vlc"
- codebase=""
- width="600" height="480" id="vlc" events="True">
- <param name="MRL" value="" />
- <param name="Src" value="" />
- <param name="ShowDisplay" value="True" />
- <param name="AutoLoop" value="False" />
- <param name="AutoPlay" value="False" />
- <param name="Time" value="True"/>
- <EMBED pluginspage="http://www.videolan.org"
- type="application/x-vlc-plugin"
- version="VideoLAN.VLCPlugin.2"
- width="600"
- height="480"
- text="Waiting for video"
- name="vlc"
- ></EMBED>
- </OBJECT>
- </div>
- <div>
- <input type=button id="btn_play" value=" 播放 " onClick='doPlay();' disabled="true">
- <input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">
- <input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>
- <input type=button value="减小音量" onclick='updateVolume(-10)'>
- <input type=button value="增加音量" onclick='updateVolume(+10)'>
- </div>
- </body>
- </html>
二、说明
下载vlc播放器 http://www.zzck-dental.com/vlc-2.0.5-win32.rar
rtsp://admin:123456@192.168.0.194:88/videoMain 为你监控机地址
admin 为帐号,123456为密码 ,192.168.0.194:88为IP和端口,其它不用修改