PS.
bootstrap和JQuery需要各位自己引入需要用到的API和插件都在这里【链接】需要压缩包中的RealPlayX文件夹和Dahua_web3.0控件-直连DVR文件夹中的webplugin.exe如果想播放.H264格式文件，需要安装VLC插件 <div id="f_ocx" style="width:100%;" class="row"> <object id="ocx" class="col-sm-9" height="100%" width="100%" classid="CLSID:{7F9063B6-E081-49DB-9FEC-D72422F2727F}" codebase=""></object> <div class="col-sm-3" style="height:100%;padding:0px 0px 0px 10px"> <div class="row"> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(32,4,4,1,0)" οnmοuseup="controlPTZ(32,4,4,1,1)" class="btn btn-app"> ↖ </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(0,0,4,1,0)" οnmοuseup="controlPTZ(0,0,4,1,1)" class="btn btn-app"> ↑ </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(33,4,4,1,0)" οnmοuseup="controlPTZ(33,4,4,1,1)" class="btn btn-app"> ↗ </a> </div> </div> <div class="row"> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(2,4,4,1,0)" οnmοuseup="controlPTZ(2,4,4,1,1)" class="btn btn-app"> ← </a> </div> <div class="col-sm-4" style="padding:0px"> <a class="btn btn-app"> ⚪ </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(3,4,4,1,0)" οnmοuseup="controlPTZ(3,4,4,1,1)" class="btn btn-app"> → </a> </div> </div> <div class="row"> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(34,4,4,1,0)" οnmοuseup="controlPTZ(34,4,4,1,1)" class="btn btn-app"> ↙ </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(1,1,4,1,0)" οnmοuseup="controlPTZ(1,1,4,1,1)" class="btn btn-app"> ↓ </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(35,4,4,1,0)" οnmοuseup="controlPTZ(35,4,4,1,1)" class="btn btn-app"> ↘ </a> </div> </div> <div class="row" style="margin-top:50px"> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(5,0,1,1,0)" οnmοuseup="controlPTZ(5,0,1,1,1)" class="btn btn-app"> - </a> </div> <div class="col-sm-4" style="font-size:25px;padding:0px;text-align:center"> 变倍 </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(4,0,1,1,0)" οnmοuseup="controlPTZ(4,0,1,1,1)" class="btn btn-app"> + </a> </div> </div> <div class="row"> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(7,0,1,1,0)" οnmοuseup="controlPTZ(7,0,1,1,1)" class="btn btn-app" > - </a> </div> <div class="col-sm-4" style="font-size:25px;padding:0px;text-align:center"> 焦距 </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(6,0,1,1,0)" οnmοuseup="controlPTZ(6,0,1,1,1)" class="btn btn-app"> + </a> </div> </div> <div class="row"> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(9,0,1,1,0)" οnmοuseup="controlPTZ(9,0,1,1,1)" class="btn btn-app"> - </a> </div> <div class="col-sm-4" style="font-size:25px;padding:0px;text-align:center"> 光圈 </div> <div class="col-sm-4" style="padding:0px"> <a οnmοusedοwn="controlPTZ(8,0,1,1,0)" οnmοuseup="controlPTZ(8,0,1,1,1)" class="btn btn-app"> + </a> </div> </div> <div class="row" style="margin-top:50px"> <div class="col-sm-4" style="padding:0px"> <a οnmοuseup="snapPicture()" class="btn btn-app"> 抓拍 </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοuseup="openSliid()" class="btn btn-app" id="sliid"> 灯光 </a> </div> </div> <div class="row" style="margin-top:50px"> <div class="col-sm-4" style="padding:0px"> <a οnmοuseup="camera(1)" class="btn btn-app"> 1 </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοuseup="camera(4)" class="btn btn-app"> 4 </a> </div> <div class="col-sm-4" style="padding:0px"> <a οnmοuseup="camera(9)" class="btn btn-app"> 9 </a> </div> </div> </div> </div> <script> var g_ocx; staticChannel = 2;//默认通道号 $(function(){ clearInterval(interval1); clearInterval(interval); var screenHeight = document.documentElement.clientHeight - 45 - 140; $('#f_ocx').css({"height":screenHeight}); g_ocx = document.getElementById('ocx'); g_ocx.LoginDeviceEx("192.168.8.104",37777,"admin","admin", 0);//ip地址，端口号，用户名，密码，0 g_ocx.SetModuleMode(1); //直播模式 g_ocx.SetWinBindedChannel(4, 0, 0, 3);//当前显示的窗口数目，当前选中的窗口，绑定的最小通道号，绑定的最大通道号 g_ocx.ConnectRealVideo(0, 1);//连接摄像头 g_ocx.ConnectRealVideo(1, 1); g_ocx.ConnectRealVideo(2, 1); g_ocx.ConnectRealVideo(3, 1); }) function controlPTZ(command, p1, p2, p3, stop){//云台控制 g_ocx.ControlPtzEx(0, command, p1, p2, p3, stop); console.log(command, p1, p2, p3, stop); } function snapPicture(){//抓拍 g_ocx.SnapPic(staticChannel); } function camera(val){ g_ocx.SetWinBindedChannel(val, 0, 0, 3);//当前显示的窗口数目，当前选中的窗口，绑定的最小通道号，绑定的最大通道号 if(val == 1){ g_ocx.ConnectRealVideo(0, 1); } if(val == 4){ g_ocx.ConnectRealVideo(0, 1); g_ocx.ConnectRealVideo(1, 1); g_ocx.ConnectRealVideo(2, 1); g_ocx.ConnectRealVideo(3, 1); } if(val == 16){ g_ocx.ConnectRealVideo(0, 1); g_ocx.ConnectRealVideo(1, 1); g_ocx.ConnectRealVideo(2, 1); g_ocx.ConnectRealVideo(3, 1); } } </script>