Object标签播放VLC实现大小视频重叠，点击小视频切换大小视频播放源

先理一下具体需求：
大致是把两个vlc重叠，一个小的浮动在大的右下角，点击小的视频把大小视频互换！
看图~

因为用object标签来播放vlc而object标签是脱离dom流的，js无法捕捉到点击事情，经过上网查询大致方法都是使用iframe标签来让div覆盖，这种方法可以实现视频覆盖，但是无法实现js获取点击事件。而且在360新版本中iframe会被拦截，而导致页面错乱。
起初采用这种方式(不推荐)：

// 主要html布局，vue
<div>按钮用来点击切换两个div的样式</div>
<div :class="[isShow ? 'video' : 'videoSmall']">
	<iframe style="z-index=-1" v-if='!isShow'>
	<object style="width=100%;height=100%">
</div>
<div :class="[isShow ? 'video' : 'videoSmall']">
	<iframe style="z-index=-1" v-if='isShow'>
	<object style="width=100%;height=100%">
</div>

经过几天摸索查阅：
后面查阅文档，发现windowless属性 设置true就能实现div遮挡object
去掉按钮，去掉iframe，上代码
object添加

<param name="windowless" value="true"/>

 <object :class="[isShow ? 'video' : 'videoSmall']"
                        type="application/x-vlc-plugin"
                        v-if="isActive"
                        pluginspage="http://www.videolan.org/"
                        id="vlc" events="false">
                    <param name="mrl" :value="$route.query.deviceAddress"/>
                    <param name="volume" value="50"/>
                    <param name="autoplay" value="true"/>
                    <param name="loop" value="false"/>
                    <param name="fullscreen" value="false"/>
                    <param name="controls" value="false"/>
                    <param name="windowless" value="true"/>
                </object>
                <object
                        :class="[isShow ? 'videoSmall' : 'video']"
                        type="application/x-vlc-plugin"
                        v-if="isActive"
                        pluginspage="http://www.videolan.org/"
                        id="vlc2" events="false">
                    <param name="mrl" :value="$route.query.infraredAddress"/>
                    <param name="volume" value="50"/>
                    <param name="autoplay" value="true"/>
                    <param name="loop" value="false"/>
                    <param name="fullscreen" value="false"/>
                    <param name="controls" value="false"/>
                    <param name="windowless" value="true"/>
                </object>
                 <div class="clickMock"  @click="videoChooseFun()">
                </div>

这样子之后就可以用div覆盖object了~不过还有一个问题，大小视频切换的时候样式还是会出问题，小视频和大视频位置互换了但是视频却还是小的。还要做一点小小的改动。

 videoChooseFun() {
          this.isActive = false;
            setTimeout(()=>{
                this.isActive = true
            },10)
            this.isShow = !this.isShow
      }

这样子就ok了~完美解决大小视频切换，只是切换的时候要重新加载视频，显得有点卡。后期再做优化。
发现360极速模式下ok，ie下还是需要用按钮来获取点击事件。那么就用js判断一下ie，再做一个按钮来切换就ok了。最后附上vlc文档：https://wiki.videolan.org/Documentation:WebPlugin/#Embed_tag_attributes