videoPlay.vue
4.86 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<template>
<div class="ocx-box" id="ocx-box" v-show="isShow">
<object
id="VionVideo"
classid="clsid:93F960BB-5AF9-402B-A3DF-06112F14DC02"
codebase="VionPlatformVideo.ocx"
width="100%"
height="100%"
>
<!-- <param name="_Version" value="65536">
<param name="_ExtentX" value="2646">
<param name="_ExtentY" value="1323">
<param name="_StockProps" value="0"> -->
</object>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
urlFlag: false,
isShow: true
};
},
props: ["playurl", "type"],
methods: {
videoPlay: function() {
this.urlFlag = false;
console.log(this.playurl);
if (!this.playurl.sip_serv_ip) {
let url = this.playurl.rtsp_url;
try {
let isLoadingOcx =
typeof document.getElementById("VionVideo").GetVersion() ===
"string"
? true
: false;
if (isLoadingOcx) {
let ocxPlayRes = document
.getElementById("VionVideo")
.StartPlay(url, 0);
console.log("视频流:", url);
if (ocxPlayRes != 0) {
alert("播放失败!");
}
} else {
this.installOcxInfo();
}
} catch (error) {
console.log(error);
}
} else {
debugger
let OcxResponse = document
.getElementById("VionVideo")
.StartPlaySip(
this.playurl.sip_serv_id,
this.playurl.sip_serv_ip,
this.playurl.sip_serv_port,
this.playurl.sip_dev_id,
this.playurl.sip_password,
this.playurl.devId,
0
);
console.log("video Ocx播放sip流返回值:", OcxResponse);
if (OcxResponse != 0 && OcxResponse != 200) {
alert("播放失败!");
}
}
},
downOcx: function() {
if (this.fileUrl !== "" && !this.installOcx) {
location.href = this.fileUrl;
}
},
installOcxInfo: function() {
this.$confirm("为了正常使用,是否安装OCX控件?", "友情提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.installOcx = false;
this.downloadOCx();
})
.catch(() => {
this.installOcxInfo();
});
},
initocx() {
VionVideo.Init(0, "Null", 4);
},
downloadOCx() {
if (navigator.userAgent.indexOf("Trident") > -1) {
let params = {
file_type: "video_ocx"
};
this.$api.ops.downloadOcx(params).then(response => {
if (response.ecode) {
this.$message({
type: "error",
message: response.enode
});
} else {
location.href = response.file_url;
}
});
} else {
this.$message.error("视频控件加载失败请用IE10及以上版本打开！");
}
},
checkIEversion() {
var agent = navigator.userAgent.toLowerCase();
if (
/(msie\s|trident.*rv:)([\w.]+)/.test(agent) &&
document.documentMode < 10
) {
this.$message.error("IE 版本过低请升级到IE10级以上版本！");
}
},
/**IE
* 检查浏览器
*/
checkIE() {
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 || isEdge || isIE11) {
return true;
} else {
return false;
}
}
},
created() {},
computed: {
...mapState(["ocxstate"])
},
watch: {
ocxstate(val) {
try {
if (val == 0) {
this.isShow = false;
document.getElementById("VionVideo").StartPlay(1);
} else {
this.isShow = true;
document.getElementById("VionVideo").StartPlay(0);
}
} catch (error) {
console.log(error);
}
}
},
mounted() {
if (this.checkIE()) {
try {
let isLoadingOcx =
typeof document.getElementById("VionVideo").GetVersion() === "string"
? true
: false;
if (!isLoadingOcx) {
this.installOcxInfo();
}
} catch (error) {
this.downloadOCx();
}
}
},
beforeDestroy: function() {
// if (this.videoplayer.techName_ == "Flash" && this.videoplayer.pause) {
// this.videoplayer.pause();
// }
}
};
</script>
<style lang="stylus" scoped>
.ocx-box{
height 100%
width 100%
}
</style>