完成的效果是:点击按钮然后弹出所播放的视频
使用的海康web插件:由海康官网下载的视频WEB插件V1.5.2版本,解压完毕后目录如下:
第一步:安装插件
安装在bin文件下面的VideoWebPlugin.exe
第二步:引入必要的文件
在public下面创建文件夹,文件名称可以自己起名字,我这里的是lib下面的js,然后把demo文件下的jquery-1.12.4.min.js、jsencrypt.min.js、web-control_1.2.5.min.js三个文件复制到所创建的文件夹下,最后在public/index.html引入所需要的文件
引入:
然后在views下面创建一个vue文件:
父组件:
播放
x
子组件:
.playWnd {
width: 2100px;
height: 100%;
/* border: 1px solid red; */
}
.cbInfoDiv {
float: left;
width: 360px;
margin-left: 16px;
border: 1px solid #7f9db9;
}
.cbInfo {
height: 200px;
padding: 5px;
border: 1px solid #7f9db9;
overflow: auto;
word-break: break-all;
}
.operate {
margin-top: 24px;
}
.operate::after {
content: "";
display: block;
clear: both;
}
.operate .btns {
height: 32px;
}
.module {
float: left;
width: 340px;
min-height: 320px;
margin-left: 16px;
padding: 16px 8px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.module .item {
margin-bottom: 4px;
}
.module .label {
width: 150px;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
text-align: right;
}
.module input[type="text"],
.module select {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
margin-left: 0;
width: 150px;
min-height: 20px;
}
.module .btn {
min-width: 80px;
min-height: 24px;
margin-top: 16px;
margin-left: 158px;
}
/* 弹框风格
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 30%;
height: 30%;
padding: 20px;
border: 3px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
*/
.white_content {
display: none;
position: absolute;
top: 80px;
left: 450px;
width: 600px;
height: 300px;
border: 3px solid orange;
background-color: white;
z-index: 1002;
}
里面的appkey,secret,ip等必要参数需要联系海康的对接人员,摄像头的编号值(cameraIndexCode)这个需要从接口获取
效果图:鼠标hover的时候出现操作栏