这个 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 了。可问题又来了,没有视频流,亲们,我的内心是崩溃的。我已经没有什么好的方法解决了,望能解决这个问题的大神们,能指点一番,小弟不胜感激。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.