vue中使用webVideoCtrl播放海康插件

最新推荐文章于 2025-06-17 15:41:07 发布

星雨我心愿

最新推荐文章于 2025-06-17 15:41:07 发布

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue 监控视频

本文链接：https://blog.youkuaiyun.com/mysunli/article/details/103800229

本文介绍了如何在Vue项目中使用webVideoCtrl插件播放海康监控视频，通过引入插件文件并配置相关参数实现视频播放。同时提到了需要安装WebComponents.exe以确保正常工作。代码示例包括子组件和父组件的交互，欢迎技术交流和优化建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司有个监控视频的项目要用到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, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
            vid