Vue集成海康威视视频WEB插件 V1.5.3视频插件

蒙奇·D·路飞-

已于 2024-06-06 11:37:08 修改

阅读量862

点赞数 4

文章标签：前端 vue.js 音视频海康威视视频插件集成

于 2024-06-06 11:20:31 首次发布

本文链接：https://blog.csdn.net/gaowenhui2008/article/details/139495015

版权

本文详细介绍了如何在Vue项目中集成海康威视V1.5.3视频插件，包括下载插件、引入JS文件、创建组件及参数设置，支持预览、回放和分屏播放功能。集成示例页面为VideoMain.vue。

摘要由CSDN通过智能技术生成

1、进入海康威视官网下载插件包

https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20

2、将js文件放到public目录下

3、在public/index.html页面中引入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <script type="text/javascript" src="./static/haikang/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./static/haikang/jsencrypt.min.js"></script>
    <script type="text/javascript" src="./static/haikang/jsWebControl-1.0.0.min.js"></script>
<!--    <script type="text/javascript" src="./static/haikang/web-control_1.2.5.min.js"></script>-->
<!--    <script type="text/javascript" src="./static/haikang/web-control.esm.min.js"></script>-->

    <div id="app"></div>
  </body>
</html>

4、创建组件页面 VideoWebPlugin.vue

<template>
  <div
      :class="['player', playerType == 'error' ? 'black' : '']"
      :style="{ width: videoWidth, height: videoHeight }"
      ref="playBox"
  >
    <div class="error" v-if="playerType == 'error'">视频播放异常</div>
    <template v-else>
      <div id="playWnd" ref='playWnd' v-if="playShow" style="width: 100%;height: 100%;">{
  { playText }}</div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    //视频地址、video的id值
    videoData: {
      type: Object,
      default: {},
    },
    //视频宽度
    videoWidth: {
      type: String,
      default: "100%",
    },
    //视频高度
    videoHeight: {
      type: String,
      default: "100%",
    },
    // 开始时间
    startTime: {
      type: String,
      default: "",
    },
    // 结束时间
    endTime: {
      type: String,
      default: "",
    },
    // playMode 1 回放 0 播放
    playMode: {
      type: Number,
      default: 0,
    },
    videoList: {
      type: Array,
      default: null,
    },
    isFocus: {
      type: Boolean,
      default: false,
    },
    isPaging: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      playerType: "",
      oWebControl: null,
      initCount: 0,
      pubKey: "",
      playText: "",
      playWndWidth: '',
      playWndHeight: '',
      playShow: false
    };
  },
  watch: {
    //监听视频地址、video的id值
    videoData: {
      deep: true,
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          if (this.videoData && this.videoData.videoID) {
            this.playShow = true
            this.previewClick()
          }
        });
      },
    },
    videoList: {
      deep: true,
      immediate: true,
      handler(val) {
        if (this.videoList && this.videoList.length > 0) {
          this.$nextTick(() => {
            this.playShow &#