海康摄像头插件嵌入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_InsertOBJECTPlugin
		WebVideoCtrl.I_InsertOBJECTPlugin("cameraPlugin").then(() => {
			console.log("像机插件初始化成功");
            // 调整插件位置;
            resize();
		})
	}
});


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

最近更新

  1. TCP协议是安全的吗?

    2024-04-02 14:12:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-02 14:12:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-02 14:12:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-02 14:12:01       18 阅读

热门阅读

  1. ES6中的Map与Set

    2024-04-02 14:12:01       13 阅读
  2. C语言中向函数中传递函数指针的方法

    2024-04-02 14:12:01       19 阅读
  3. 简单设计模式讲解

    2024-04-02 14:12:01       16 阅读
  4. C++命名空间详解

    2024-04-02 14:12:01       15 阅读
  5. 【Ubuntu】可配置环境变量位置

    2024-04-02 14:12:01       15 阅读
  6. 洛谷 1803.凌乱的yyy

    2024-04-02 14:12:01       17 阅读