最近公司有个监控视频的项目要用到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, //可以不用设置这个变量,有窗口参数的接口中,