vue用iframe播放海康视频
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
</head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}
.plugin {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="divPlugin" class="plugin"></div>
</body>
<script type="text/javascript" src="static/haikang/jquery-1.7."></script>
<script type="text/javascript" src="static/haikang/"></script>
<script>
// 向父vue页面发送信息
window.parent.postMessage({
cmd: 'run',
params: {
success: true
}
}, '*');
// 接受父页面发来的信息
window.addEventListener("message", function(event){
var data = event.data;
switch (data.cmd) {
case 'getFormJson':
// 处理业务逻辑
companyVideoData = data.params
videoInitPlugin()
break;
}
});
var companyVideoData = {}
// 接受父页面发来的信息
function videoInitPlugin() {
var iRet = WebVideoCtrl.I_CheckPluginInstall();
if (iRet === -1) {
alert("您还未安装过插件，请安装插件！");
return;
}
initPlugin();
}
//插件初始化
function initPlugin() {
var that = this;
WebVideoCtrl.I_InitPlugin('100%', '100%', {
szContainerID: 'divPlugin',
bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
iWndowType: 1, // 窗口数量n*n
szColorProperty: 'plugin-background:000000; sub-background:000000; sub-border:000000; sub-border-select:000000',
// bDebugMode: true,
cbSelWnd: function (xmlDoc) {
},
});
// 绑定的dom名称
WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');
clickLogin(companyVideoData);
}
function clickLogin(data) {
var that = this;
WebVideoCtrl.I_Login(
data.IP,
1,
data.Port,
data.Username,
data.Password,
{
async: false,
success: function (xmlDoc) {
console.log("开始预览", that.cName); //不能删除
that.getChannelInfo();
},
error: function () {
console.log("login error");
},
}
);
}
//获取通道
function getChannelInfo() {
var that = this;
// =
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(that.companyVideoData.IP, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("VideoInputChannel");
// nAnalogChannel = ;
that.initPlay();
console.log("获取模拟通道成功！", that.cName)
},
error: function () {
console.log("获取模拟通道失败！"+WebVideoCtrl.I_GetLastError())
},
});
// 数字通道
WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
that.initPlay();
// that.$emit("func", oChannels); //获取数字通道传给父组件
console.log("获取数字通道成功！")
},
error: function () {
WebVideoCtrl.I_GetLastError();
console.log("获取数字通道失败！"+WebVideoCtrl.I_GetLastError())
},
});
// 零通道
WebVideoCtrl.I_GetZeroChannelInfo(that.companyVideoData.IP, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("ZeroVideoChannel");
console.log("获取零通道成功！")
},
error: function () {
console.log("获取零通道失败！"+WebVideoCtrl.I_GetLastError())
},
});
}
//初始化视频，为了让用户进来就可以看到视频播放
function initPlay() {
let szIP = companyVideoData.IP; //ip地址
var iStreamType = 1;
// 目前只需要显示一个通道
var iChannelID = parseInt(1, 10);
WebVideoCtrl.I_StartRealPlay(szIP, {
iStreamType: iStreamType,
iChannelID: iChannelID,
iWndIndex: 0,
});
WebVideoCtrl.I_ChangeWndNum(1); //分屏
}
// 点击查看具体哪个监控
function startRealPlay(oChannels) {
let that = this;
let szIP = companyVideoData.IP; //ip地址
let iChannelID = oChannels; //播放通道号
var iStreamType = 1;
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
if (oWndInfo != null) {
// 已经在播放了，先停止
WebVideoCtrl.I_Stop();
}
WebVideoCtrl.I_StartRealPlay(szIP, {
iStreamType: iStreamType,
iChannelID: iChannelID,
});
}
</script>
</html>