大华ICC视频监控插件html 在 活字格demo中实现

想将dh_player.html demo 示例，挪到活字格javascript 命令里创建元素，并运行播放（抛开内嵌html文件模式），但是尝试失败，个人感觉是对html 元素在活字格内的创建与控制不熟悉。

求大佬帮忙解决，“大华ICC视频监控demo.fgcc“ 的 代码书写问题：

，


求助：dh_player.html  中的元素怎么在活字格内创建并运行控制，让整个活字格的js命令完成 dh_player.html 的工作。


html模式下icc 视频播放插件运行示例：

1.先安装插件“DHPlayerSetup.exe”（运行环境插件）：因文件有45M，上传不了服务器，百度网盘链接：https://pan.baidu.com/s/1VwrG8_0LDi8o3yqAyCfwPA
提取码：xmyv


2.解压“icc_video_demo.zip”文件
3.运行“icc_video_demo”文件夹内的dh_player.html （在firefox 浏览器上运行，360浏览器试了好像不行）




4.运行效果：

点击“播放”后，如下图：

Lay.Li 发表于 2024-1-10 17:30
好的，我刚才又测试了一下，可以播放视频了，不过代码我们也不是很懂。您可以试试上方的回复的内容，修改一 ...

以下是测试能用的js代码，供其他格友参考借鉴，少走弯路!!!!!.   

之前很迷惑，迷惑的原因是对前端dom 的东西不熟悉，无处了解。感谢Lay.Li 超级版主的抛砖引玉，再加上自己不断调试，才摸清了前端页面视图的结构。


===============以下为页面加载时运行的 javascript 代码 ===========

var area =$("[fgcname='ICCVideo']")[0];

area.removeChild(area.childNodes[0]);   //移除活字格自己创建的节点，否则会阻挡自己手动创建的节点视图区域，使得自建节点排在后面。

let newContent ;

////////////////////////////////////////// 提示区域 div begin /////////////////////
//note_div
var note_div = document.createElement("div");
note_div.style.margin = "flex";
note_div.style.display = "flex";

//div id = "desc"
var desc_div =document.createElement("div");
desc_div.setAttribute("id","desc");
// desc_div.style.zIndex=1;
newContent = document.createTextNode("请初始化插件....!");
desc_div.appendChild(newContent);
note_div.appendChild(desc_div);

//button id = "real"
var button_div =document.createElement("button");
button_div.setAttribute("id","real");
newContent = document.createTextNode("播放视频");
button_div.appendChild(newContent);
note_div.appendChild(button_div);

area.appendChild(note_div);

////////////////////////////////////////// 提示区域 div end /////////////////////

////////////////////////////////////////// display div begin /////////////////////

var display_div = document.createElement("div");
display_div.style.display = "flex";

var oVideo2 =document.createElement("div");
oVideo2.setAttribute("id","dhplayer-dom");
oVideo2.style.width="1060px";
oVideo2.style.height="500px";
oVideo2.style.border = "1px solid #000";
display_div.appendChild(oVideo2);

area.appendChild(display_div);


////////////////////////////////////////// display div end/////////////////////

大佬，我这边儿没有硬件设备，链接不上哈，代码我们也不是很懂，大概看了一下


应该和下方集成echarts图表的方法差不多



帮你打开活字格更神奇的功能：一百零七，活字格中通过JS集成echarts图表
https://gcdn.grapecity.com.cn/showtopic-149493-1-1.html
(出处: 葡萄城开发者社区)

先将js文件上传到全局js中

然后这里初始化时需要用到dom的id

运行后通过浏览器的工具，可以选择取到这个div的id

然后修改一下页面加载时命令中的id就可以了

上方的这两个也可以通过类似的方法获取

可以参考这些公开课对活字格的前端开发会有帮助哈

https://gcdn.grapecity.com.cn/course-78.html

https://gcdn.grapecity.com.cn/course-76.html

不需要硬件设备，是网络上的公共视频通道资源，只需要装上插件。就行了。

好的，我刚才又测试了一下，可以播放视频了，不过代码我们也不是很懂。您可以试试上方的回复的内容，修改一下设计器中的js代码。看看行不行

恭喜大佬解决了问题，并且感谢大佬的积极分享，我将您的这个回复置顶，可以帮助后面有相同问题的人哦

大佬有公共视频资源可以共享下吗？

感谢各位大佬的支持~
楼主方便的话欢迎共享一下公共视频资源哈