海康摄像头插件嵌入iframe时视频播放插件位置问题

参考:https://juejin.cn/post/6857670423971758094

原因:没有按照iframe相对位置计算视频插件位置。
解决:

$(window).on('resize', resize);function resize(){// 解决iframe中嵌入海康插件初始化问题:// 1. 获取iframe相比于窗口的偏移量;const offset = window.top.$('.layui-layer-content iframe').offset(); // window.top.$ 取最外层jquery对象才可以获取有视频插件iframe对象;if (offset && offset.top) {$("#cameraPlugin").css("margin-top", Number(offset.top) + 1 + "px");$("#cameraPlugin").css("margin-left", Number(offset.left) + 1 + "px");let newWidth = $("#cameraPlugin").width();let newheight = $("#cameraPlugin").height();if (WebVideoCtrl) {WebVideoCtrl.I_Resize(newWidth, newheight);}}
}// 视频插件初始化
WebVideoCtrl.I_InitPlugin({...,cbInitPluginComplete: () => {// 初始化成功,调用I_InsertOBJECTPluginWebVideoCtrl.I_InsertOBJECTPlugin("cameraPlugin").then(() => {console.log("像机插件初始化成功");// 调整插件位置;resize();})}
});

海康WebSdk: https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24
插件版本:WEB3.3控件开发包 V3.3
在这里插入图片描述
海康H5 SDK需要转码后端比较麻繁,前端很简单,但有一定时延。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/786257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter仿Boss-2.启动页、引导页

简述 在移动应用开发中,启动页和引导页是用户初次接触应用时的重要组成部分,能够提升用户体验和导航用户了解应用功能。本文将介绍如何使用Flutter实现启动页和引导页,并展示相关代码实现。 启动页 启动页是应用的第一个页面,首…

Jenkins首次安装选择推荐插件时出现”No such plugin cloudbees-folder”解决方案

安装Jenkins成功之后,首次启动Jenkins后台管理,进入到安装插件的步骤,选择"推荐安装",继续下一步的时候出现错误提示: 出现一个错误 安装过程中出现一个错误:No such plugin:cloudb…

【大数据存储】实验二 HDFS操作实验

实验二 HDFS操作实验 启动Hadoop,执行jps,检查Hadoop相关进程是否启动成功 启动hadoop 执行jps,可以看到名称节点和数据节点,第二名称节点都打开了,则hadoop相关进程启动成功 在本地文件系统“/home”下新建两个文件夹&#xff…

Dapr(一) 基于云原生了解Dapr

(这期先了解Dapr,之后在推出如何搭建Dapr,以及如何使用。) 目录 引言: Service Mesh定义 Service Mesh解决的痛点 Istio介绍 Service Mesh遇到的挑战 分布式应用的需求 Multiple Runtime 理念推导 Dapr 介绍 Dapr 特性 Dapr 核心…

前后台分离nodejs+vue租房信息网站express-94sk3.

本租房管理系统有管理员,租客,屋主三个角色。管理员功能有个人中心,租客管理,屋主管理,房源信息管理,订单信息管理,屋主申诉管理,通知公告管理,留言板管理,系…

Electron的学习

目录 项目初始化可以看官网非常详细根路径创建.vscode文件夹主进程和渲染进程之前的通信ipcRenderer.send和ipcMain.on的使用ipcRenderer.invoke和ipcMain.handle的使用 切换主题模式文件拖放保存消息通知进度展示图标闪烁自定义菜单自定义右键菜单 项目初始化可以看官网非常详…

基于PSO优化的CNN-LSTM-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1卷积神经网络(CNN)在时间序列中的应用 4.2 长短时记忆网络(LSTM)处理序列依赖关系 4.3 注意力机制(Attention) 5…

如何将平板或手机作为电脑的外接显示器?

先上官网链接:ExtensoDesk 家里有一台华为平板,自从买回来以后除了看视频外,基本没什么作用,于是想着将其作为我电脑的第二个屏幕,提高我学习办公的效率,废物再次利用。最近了解到华为和小米生态有多屏协同…

FMEA引领智能家居安全革新,打造无忧智能生活新纪元!

在智能家居日益普及的今天,如何确保家居安全成为消费者关注的焦点。本文将探讨如何通过FMEA(故障模式与影响分析)这一强大的质量管理工具,为智能家居赋能,打造安全无忧的智能生活新体验。 一、FMEA在智能家居领域的应用…

wireshark数据流分析-学习日记day1

参考内容: 网址hxxp://194.55.224[.]9/liuz/5/fre.php描述Loki Bot C2 网址早在 2023-08-15 就被注意到了2023-07-27 记录的 IcedID C2 域: vrondafarih[.]com - HTTP trafficmagiketchinn[.]com - HTTPS trafficmagizanqomo[.]com - HTTPS traffic 网…

【Python从入门到进阶】52、CrawlSpider链接提取器的使用

接上篇《51、电影天堂网站多页面下载实战》 上一篇我们采用Scrapy框架多页面下载的模式来实现电影天堂网站的电影标题及图片抓取。本篇我们来学习基于规则进行跟踪和自动爬取网页数据的“特殊爬虫”CrawlSpider。 一、什么是CrawlSpider? 1、CrawlSpider的概念 Cr…

算法打卡day23

今日任务: 1)39. 组合总和 2)40.组合总和II 3)131.分割回文串 39. 组合总和 题目链接:39. 组合总和 - 力扣(LeetCode) 给定一个无重复元素的数组 candidates 和一个目标数 target ,…

(十)Docker的基本操作

1.1.镜像操作 1.1.1.镜像名称 首先来看下镜像的名称组成: 镜名称一般分两部分组成:[repository]:[tag]。在没有指定tag时,默认是latest,代表最新版本的镜像 如图: 这里的mysql就是repository,5.7就是…

Python学习: 错误和异常

Python 语法错误 解析错误(Parsing Error)通常指的是程序无法正确地解析(识别、分析)所给定的代码,通常是由于代码中存在语法错误或者其他无法理解的结构导致的。这可能是由于缺少括号、缩进错误、未关闭的引号或其他括…

数据结构——二叉树——二叉搜索树(Binary Search Tree, BST)

目录 一、98. 验证二叉搜索树 二、96. 不同的二叉搜索树 三、538. 把二叉搜索树转换为累加树 二叉搜索树:对于二叉搜索树中的每个结点,其左子结点的值小于该结点的值,而右子结点的值大于该结点的值 一、98. 验证二叉搜索树 给你一个二叉树的…

P6维护:Oracle P6服务性能优化

前言 本文将介绍如何对ORACLE Primavera P6 EPPM软件进行性能调优,考虑到P6主要采用JAVA语言编制,且其使用的是Weblogic Server应用服务器部署P6各项服务器,其性能优化的原理便是基于其JVM特征参数进行设置 方法一:修改配置文件…

Maplesoft Maple 2024(数学科学计算)mac/win

Maplesoft Maple是一款强大的数学计算软件,提供了丰富的功能和工具,用于数学建模、符号计算、数据可视化等领域的数学分析和解决方案。 Mac版软件下载:Maplesoft Maple 2024 for mac激活版 WIn版软件下载:Maplesoft Maple 2024特别…

银行业架构网络BIAN (Banking IndustryArchitecture Network)详细介绍

BIAN ( The Banking Industry Architecture Network) 是一个业界多方协作的非营利性组织,由全球领先银行、技术提供商、顾问和学者组成,定义了一个用以简化和标准化核心银行体系结构的银行技术框架。这一框架基于面向服务的架构 (SOA) 原则,银…

Docker工作流

1.工作流 开发应用编写Dockerfile构建Docker镜像运行Docker容器测试应用发布镜像到Hub迭代更新镜像 2.开发应用 首先你需要创建一个应用,这个应用可以是后端应用或者前端应用,任何语言都可以。 比如:我使用IDEA 创建一个Java后端应用&…

Vue项目中引入html页面(vue.js中引入echarts数据大屏html [静态非数据传递!] )

在项目原有vue(例如首页)基础上引入html页面 1、存放位置 vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来 index为html的首页 2、更改路径引入到vue中 这里用到的是 iframe 方法 不同于vue的 component…