随笔 - 833  文章 - 1  评论 - 106  阅读 - 200万

网页IE轻松调用VLC播放器实现监控（组件+方法大全）【转】

公司突发奇想，要把刚买回来的网络监控机用自己内部网站在线监控。

作为网站的开发员，我接下了这个任务。

网络上有很多资料参与，但是都不全都不尽人意，最后经过多次的不同关键字的查找和测试，总算让我成功了。

转入正题：

一、代码

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml" >   
  3. <head>   
  4. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  6. <script>   
  7. var itemId = 0;   
  8. function getVLC(name)   
  9. {   
  10.         if (window.document[name])      
  11.         {   
  12.                 return window.document[name];   
  13.         }   
  14.         if (navigator.appName.indexOf("Microsoft Internet")==-1)   
  15.         {   
  16.                 if (document.embeds && document.embeds[name])   
  17.                         return document.embeds[name];      
  18.         }   
  19.         else   
  20.         {   
  21.                 return document.getElementById(name);   
  22.         }   
  23. }   
  24.   
  25. function doGo(mrl)   
  26. {   
  27.         var vlc = getVLC("vlc");   
  28.         itemId=vlc.playlist.add(mrl);   
  29.         vlc.playlist.playItem(itemId);   
  30.         document.getElementById("btn_stop").disabled = false;   
  31. }   
  32.   
  33. function updateVolume(deltaVol)   
  34. {   
  35.         var vlc = getVLC("vlc");   
  36.         vlc.audio.volume += deltaVol;   
  37. }   
  38.   
  39. function doPlay()   
  40. {   
  41.         vlc.playlist.playItem(itemId);   
  42.            
  43.         document.getElementById("btn_stop").disabled = false;   
  44.         document.getElementById("btn_play").disabled = true;   
  45. }   
  46.   
  47. function doStop()   
  48. {   
  49.         getVLC("vlc").playlist.stop();   
  50.         document.getElementById("btn_stop").disabled = true;   
  51.         document.getElementById("btn_play").disabled = false;   
  52. }   
  53. </script>   
  54. </head>   
  55. <body>   
  56. <div style="margin: 50px">   
  57.        <!-- <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> -->   
  58.         <span style="margin: 20px;" />   
  59.         <a title="rtsp://admin:123456@192.168.0.194:88/videoMain" href="#" onclick="doGo(this.title);return false;">实时视频流</a>   
  60.         <span style="margin: 20px;" />   
  61. </div>  
  62. <div>   
  63.         <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" id="vlc"  
  64.     codebase=""  
  65.        width="600" height="480" id="vlc" events="True">  
  66.  <param name="MRL" value="" />  
  67.  <param name="Src" value="" />  
  68.    <param name="ShowDisplay" value="True" />  
  69.  <param name="AutoLoop" value="False" />  
  70.  <param name="AutoPlay" value="False" />  
  71.  <param name="Time" value="True"/>  
  72.  <EMBED pluginspage="http://www.videolan.org"  
  73.        type="application/x-vlc-plugin"  
  74.        version="VideoLAN.VLCPlugin.2"  
  75.        width="600"  
  76.        height="480"      
  77.        text="Waiting for video"  
  78.        name="vlc"  
  79.        ></EMBED>  
  80.  </OBJECT>   
  81. </div>   
  82. <div>   
  83. <input type=button id="btn_play" value=" 播放 " onClick='doPlay();' disabled="true">   
  84. <input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">   
  85. <input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>   
  86. <input type=button value="减小音量" onclick='updateVolume(-10)'>   
  87. <input type=button value="增加音量" onclick='updateVolume(+10)'>   
  88. </div>   
  89. </body>   
  90. </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和端口，其它不用修改

 

posted on   3D入魔  阅读(1068)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 3D入魔
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示