如何在 ActiveX 插件上面覆盖一个 canvas，既能在 canvas 上面画图又能看到底下的加载的视频

[keykun]

这个 ActiveX 插件是有窗口的，通过 sdk 加载视频，没有视频流。要想实现的效果是既能在 canvas 上面画图又能看到底下的视频。这个 ActiveX 插件要先安装在电脑上，再通过 object 标签加载进来的。代码如下: <object id="plugin" type="application/x-fbtestplugin" width="400px" height="300px"></object> 刚开始我以为很简单，只要用一个 div 去包裹 object 设置绝对定位再设置层级大小，同样 canvas 也是一样的做法(canvas 的层级较大)，然后位置设成重叠，以为就能成功，谁想太天真了。如果 canvas 有背景色的话，并且没有透明度的话，确实在上面。但是只要一设置透明度就会被 object 覆盖，无法对这块区域的 canvas 进行操作。我打开控制台想去查看样式的时候，发现一个特别的地方，只要一打开控制台加载的视频就会消失，你无法通过控制台的标签选择光标去找到这块区域。一关闭控制台就又能看到视频。然后我就只能去求助万能的百度了，也找到了相关的文章。 说是因为有些 ActiveX 插件是有窗体的，有窗体的元素都会被显示在无窗体的元素之上。而且所有的无窗体元素和有窗体的元素渲染在不同的 MSHTML 平面上，所以无法通过 z-index 属性来操作不同元素之间的层级关系。那篇文章说的方法是通过在两者之间设置一个浮动的全透明的 iframe 来作为中间层，iframe 覆盖 object，然后 div （ div 能覆盖成功，canvas 也就可以了） 再覆盖 iframe。没错，这样是能成功，但是还是实现不了我想要的结果。因为 iframe 就算把 iframe 设置成全透明，在 object 加载视频的区域上方是有默认颜色的，会把底下的视频完全遮挡住，看不到底下的视频。我试过把 object 换成 div 就能成功。试过了用把 object 单独放在一个页面让 iframe 去加载它，然后再 iframe 这个页面创建一个 div 去覆盖它，也没能实现我要的效果。也试过了把 div 写在另一个页面，让 iframe 去加载它，然后在覆盖到 object 加载的视频区域上面，也同样失败了。 还有说给 object 设置 vmode 属性改变它的渲染模式，我也试过了，没有用。 后面我想通过 canvas 直接画这个视频，就不需要在视频上面覆盖一个 canvas 了。可问题又来了，没有视频流，亲们，我的内心是崩溃的。我已经没有什么好的方法解决了，望能解决这个问题的大神们，能指点一番，小弟不胜感激。

[keykun]

大神快来

[keykun]

我已经试了好几天了

[keykun]

大胸弟们快来

[keykun]

做了 10 几个 demo，还是没用

[xylitolLin]

监控视频播放的坑？

[keykun]

@xylitolLin 恩恩，就是监控视频

[keykun]

@xylitolLin 大胸弟，知道怎么解决嘛，求指教

[oott123]

ActiveX 我猜不是你写前端能解决的，只能以 ActiveX 攻 ActiveX 了，哈哈哈

[keykun]

@oott123 就是要我解决啊，5555555~

[keykun]

sorry，是有窗体的，正文说错了，囧

[wshcdr]

恩，用另外一个 ActiveX 去 load 这个 Activex，然后再做你想做的事情

[chairuosen]

把视频流转一下，不用 ActiveX，用 canvas，
https://imququ.com/post/html5-live-player-2.html

[boomsUn]

@chairuosen 就是没有视频流

[boomsUn]

是 new 一个 Activex 对象出来还是再装一个插件去 load 它，我是第一次接触这个 ActiveX 插件，囧

[boomsUn]

@chairuosen 组长说是用 sdk 加载的

[chairuosen]

@boomsUn 我没有 ActiveX 开发经验，所以没法具体帮到你。不过工作中肯定会遇到无法用技术解决的需求，这时候有两种方法，用别的方式绕过去，不走这个坑，或者跟产品说实现不了，改需求。这种古老的嵌入技术为啥今天还在用

[boomsUn]

@chairuosen 非常感谢，因为我刚进这家公司然后就有功能做不出来，很尴尬。其实我之前就跟组长说了做不出来，但他一直让我试试，所以我就只能再努力一下。