web前端在vue中通过海康插件嵌入视频，实现实时预览以及视频回放功能

 

首先第一步，在海康官网下海康视频插件下载到电脑中海康开放平台

 

 然后新建一个组件，下面我直接把我封装好的组件代码拿出来，重要的地方我在代码中添加了注释

 

以上是封装的组件，下面是调用的方法 

 
//先引入组件

在data中定义的     iSecureCenterConfig: {
        appkey: '',
        secret: '',
        ip: '',
        playMode: 0,
        snapDir: 'D:\\SnapDir',
        videoDir: 'D:\\VideoDir',
        layout: '3x3',
        cameraIndexCodeList: [],
        previewCode: '',
      },

//点击视频的时候触发的方法  判断是历史视频还是实时预览
 handleNodeClick(data) {
      console.log(data)
      if (this.iSecureCenterConfig.playMode === 0) {
        this.iSecureCenterConfig = {
          ...this.iSecureCenterConfig,
          previewCode: data.code,
        }
      } else {
      
        this.$refs.iSecureCenterRef.oWebStartPlayback(data.code)
      }
    },


 //实时，历史视频切换，
    videoChange(data) {
      if (data == 'shishi') {
        this.info = '实时视频'
        this.iSecureCenterConfig = {
          ...this.iSecureCenterConfig,
          playMode: 0,
          layout: "3x3"
        }
      } else {
        this.info = '历史视频'
        this.iSecureCenterConfig = {
          ...this.iSecureCenterConfig,
          playMode: 1,  //1是回放
          layout: "1x1"
        }
      }
    },