vue使用海康视频web插件

完成的效果是：点击按钮然后弹出所播放的视频

使用的海康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的时候出现操作栏