vue中使用webVideoCtrl播放海康插件

    最近公司有个监控视频的项目要用到webVideoCtrl插件来播放视频，研究了两天终于搞定。只需要传IP、用户名、密码、端口号即可播放，插件可在网上搜索下载。

     新建文件夹来存放webVideoCtrl插件，然后在index.html中引进，如图：

这样就把所需的插件引进去了，我们可以愉快的写代码了。注意要安装WebComponents.exe。

贴出完整代码，子组件

<template>
    <div class="video-player">
        <div id="divPlugin" class="divPlugin"></div>
        <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
        </div> -->
        <!-- <div class="down" v-else>
            <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
        </div> -->
    </div>
</template>
<script>
export default {
name: 'videoPlayer',
props: {
        //从父组件传来的数据，IP、用户名、密码、端口号
        companyVideoData:{
            type:Object
    },
    //分屏
    videoType:Number
},
    data(){
        return {
            plugin:true ,
            iWidth: "100%",
            iHeight: "100%",
            webVideo: {},
            iStreamType: 1,
            iProtocol: 1,
            bZeroChannel: false,
            xmlDocData:{},
            g_iWndIndex:0, //可以不用设置这个变量，有窗口参数的接口中，