ocxplay.vue
4.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<template>
<div style="width: 100%; height: 100%; position: relative">
<p
style="
position: absolute;
top: 113px;
z-index: 99;
text-align: center;
width: 100%;
"
v-if="noIE"
>
请选择IE9以上版本查看视频！
</p>
<object
v-show="videoShow"
id="nvrTotalOcx"
name="nvrTotalOcx"
classid="CLSID:96DFBBAF-4220-4978-9681-4ABA534A7718"
codebase="./static/OcxInstall/VionNvrVideoInstall.exe#version=1,0,24"
style="width: 100%; height: 100%"
>
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
<embed wmode="opaque" />
<param name="wmode" value="transparent" />
</object>
<!--安装弹框-->
<el-dialog
title="提示"
:visible.sync="stepDialogVisible"
width="252px"
:close-on-click-modal="false"
@close="stepClose"
>
<span
>本网站需要安装视频插件才可正常使用，请安装完成后请手动重启浏览器</span
>
<div slot="footer" class="dialog-footer">
<el-button @click="stepDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<!--更新弹框-->
<el-dialog
title="提示"
:visible.sync="updateDialogVisible"
width="252px"
:close-on-click-modal="false"
@close="stepClose"
>
<span
>该网站当前视频插件版本为{{
currentVersion
}}，可能导致部分功能不完善，请更新到最新版本1.0.33</span
>
<div slot="footer" class="dialog-footer">
<el-button @click="updateDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
videoShow: true,
noIE: false,
currentVersion: 0,
updateDialogVisible: false,
stepDialogVisible: false,
};
},
mounted() {
setTimeout(() => {
this.initVideo();
}, 300);
},
methods: {
stepClose() {
this.videoShow = true;
},
initVideo() {
var ieVer = this.IEVersion();
if (ieVer == 7 || ieVer == 8 || ieVer == 6 || ieVer == "-1") {
this.noIE = true;
} else {
this.noIE = false;
try {
this.currentVersion = document
.getElementById("nvrTotalOcx")
.GetOcxVersion();
var versionArr = this.currentVersion.split(".");
var versionNum = 0;
versionArr.forEach((item, index, arr) => {
versionNum = versionNum + Number(item);
});
if (versionNum < 34) {
this.videoShow = false;
this.updateDialogVisible = true;
window.open("./OcxInstall/NvrVideoInstall_1.0.33.exe");
}
} catch (e) {
this.videoShow = false;
this.stepDialogVisible = true;
window.open("./OcxInstall/NvrVideoInstall_1.0.33.exe");
return false;
}
}
if (typeof nvrTotalOcx != "undefined") {
var testStr = "Null";
nvrTotalOcx.Init(0, testStr, 1);
nvrTotalOcx.SetSingleWindow(true);
nvrTotalOcx.SetParam("VideoSize", 0);
var medianame = "视频0";
// var hostname = window.location.hostname;
var hostname = "192.168.9.120";
var port = 8554;
var url = "rtsp://" + hostname + ":" + port + "/ch0";
nvrTotalOcx.PlayRealVideo(url, 1, "video", hostname, 0);
window.onbeforeunload = function () {
nvrTotalOcx.CloseVideoByChannelnum(1);
};
}
},
IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE =
userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 =
userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6; //IE版本<=7
}
} else if (isEdge) {
return "edge"; //edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1; //不是ie浏览器
}
},
hideHanlde() {
this.videoShow = false;
},
showHanlde() {
this.videoShow = true;
},
},
};
</script>
<style>
</style>