vue项目接入海康威视H5player.js

最新推荐文章于 2024-05-15 00:36:22 发布

造梦者FZ

最新推荐文章于 2024-05-15 00:36:22 发布

阅读量4.3k

点赞数 1

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_43923146/article/details/129042482

版权

vue 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

vue项目接入海康威视H5player.js

插件下载
点击跳转海康威视H5player下载地址
首先我们需要将下载下来的程序包内的JS文件放到我们自己的项目文件

在utils里面还要放置h5player.min.js文件进去下方代码中解释

在这里插入图片描述

注意：一定要放在vue中的public文件夹中否则会报错

在public/index.html文件中引入

<script src="./h5player.min.js"></script>
<script src="./Decoder.js"></script>

在页面中使用

 <div id="HKVideo" class="HKVideo1" ></div>


//下方为海康视频播放器所需变量
const oPlugin = ref();
const time = ref<number>(0);
async function getScript() {
  const { JSPlugin }: any = window;
  oPlugin.value = new JSPlugin({
    szId: "HKVideo", // 当前的视频播放的节点，需要英文字母开头，必填
    szBasePath: "../../utils/", // 这里必须指向h5player.min.js文件 把这个文件再放在src里面的一个文件夹中，因为放置在public的文件这里指向不到
    openDebug: true,
    // 分屏播放
    iMaxSplit: 4,
    iCurrentSplit: 1,
    // 设置样式
    oStyle: {
      border: "#FFF",
      borderSelect: "#FFCC00",
      background: "#000",
    },
  });

  await initPlugin();
}
// 事件初始化
function initPlugin() {
  oPlugin.value.JS_SetWindowControlCallback({
    windowEventSelect(iWindIndex: any) {
      // 插件选中窗口回调
      console.log("windowSelect callback: ", iWindIndex);
    },
    pluginErrorHandler(iWindIndex: any, iErrorCode: any, oError: any) {
      // 插件错误回调
      console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);
    },
    windowEventOver(iWindIndex: any) {
      // 鼠标移过回调
      console.log("鼠标移过回调", iWindIndex);
    },
    windowEventOut(iWindIndex: any) {
      // 鼠标移出回调
      console.log("鼠标移出回调", iWindIndex);
    },
    windowFullCcreenChange(bFull: any) {
      // 全屏切换回调
      console.log("全屏切换回调", bFull);
    },
    firstFrameDisplay(iWndIndex: any, iWidth: any, iHeight: any) {
      // 首帧显示回调
      console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
    },
    performanceLack(iWndIndex: any) {
      // 性能不足回调
      console.log("性能不足回调", iWndIndex);
    },
  });
  realplay();
}
//   // 播放初始化
function realplay() {
  console.log("播放初始化");
  console.log(
    oPlugin.value.currentWindowIndex,
    "oPlugin.value.currentWindowIndex"
  );
  oPlugin.value
    .JS_Play(
      props.obj.videoUrl,//视频地址链接
      {
        playURL: props.obj.videoUrl, // 流媒体播放时必传
      },
      oPlugin.value.currentWindowIndex//这个应该是视频下标吧 具体我也不太清楚
    )
    .then(
      (res: any) => {
        console.log(res, "播放成功");
      },
      (err: any) => {
        console.log(err, "播放失败");
      }
    );
}

onMounted(async () => {
    time.value = setInterval(() => {
      const { _malloc }: any = window;
      if (_malloc) {
        getScript();
        clearInterval(time.value);
      }
    }, 100);
});