video.html
5.66 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
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover">
<title>
</title>
<link href="js/main.css?v=5" type="text/css" rel="stylesheet">
<script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/spin.min.js?v=1.2.6"></script>
<script src="js/slplayer.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.video{
position: relative;
width: 100%;
height: 434.78upx;
}
.video > div {
color: red;
font-size: 24px;
position: absolute;
}
.video > canvas {
width: 100%;
height: 100%;
}
.terminal {
margin: 0 auto;
display: block;
margin-top: 10px;
width: 16rem;
height: 10rem;
}
.terminal > textarea {
width: 100%;
height: 100%;
color: white;
background-color: black;
font-family: 'Lucida Console', Monaco, monospace;
outline: none;
}
</style>
</head>
<body>
<div class="video">
<canvas id="canvas" style="background: black;">
</canvas>
<div id="preview"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
$.fn.spin = function(opts) {
this.each(function() {
var $this = $(this),
data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (opts !== false) {
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
}
});
return this;
};
$('#preview').spin();
//window.parent.childToParent();
var chanid = localStorage.getItem('channelId');
//var chanid='FL00179K07:1';
// var serveip = "47.94.37.10:39401";
var serveip = "video.keliuyun.com"
var account = "storeVideo";
var pwd = "Vion2019";
var tk = ""; // 用来保存登录时获取的token，并作为申请预览时的url附带参数
var liveUrl = "";
var player = "";
var Module = {
/* ************************************ */
// 定义视频画布
canvas: document.getElementById("canvas"),
/* ************************************ */
// 设置相应的事件回调
onStart: function () {
console.log("onStart...")
},
onEnd: function () {
console.log("onEnd...")
},
onError: function (code, err) {
$('#preview').spin(false);
alert('error: ', code, err)
console.log('error: ', code, err);
},
onVideoStart: function () {
$('#preview').spin(false);
var ifr=$('#iframeId', parent.document);
ifr.height($('#canvas').height()+12)
console.log('onVideoStart。。。');
},
// 录像回放中返回时间刻度
onPlayTime: function (ts) {
if(ts==0) return;
var date = new Date(ts * 1000);//如果date为10位不需要乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
var timestamp = Y + M + D + h + m + s;
console.log(timestamp)
}
};
// 创建播放器对像
// 此方法只适用于支持H5的游览器，不支持IE系统
SLPlayer(Module).then(function (obj) {
player = obj;
console.log("实例成功")
login();
getUrl();
});
// 定时器测压力
//循环执行，每隔1秒钟执行一次 1000
// window.setInterval(getUrl, 1000);
//ajax的post请求
function ajaxPost(url, data, fn) {
$.ajax({
method:"POST",
url:url,
async:false,
headers: {
// "Content-Type":"application/x-www-form-urlencoded; charset=UTF-8",
"Accept":"application/json",
"Content-Type":"application/json"
},
data:JSON.stringify(data),
traditional: true,
success: fn,
error: function() {
console.log("服务器或网络错误：", url);
}
});
}
// 登录
function login(){
var param = {
"user": account,
"password": pwd,
"force": 0,
"login_mode": 0
};
// ajax post方式发送请求
ajaxPost("https://"+ serveip +":18443/webapi/login",param,function(res){
if (res.ret == 0) {
tk = res.tk
} else{
alert(res.msg)
}
});
}
// 获取预览的url
function getUrl(){
var param = {
"chan_serial": chanid // 获取预览的url接口，只需要通道id一个参数
};
// ajax post方式发送请求
ajaxPost("https://"+ serveip +":18443/webapi/v4/preview/view?tk="+tk,param,function(res){
console.log(JSON.stringify(res));
if (res.ret == 0) {
liveUrl = res.view_context.replace("ws://","wss://").replace(":39401",":18443")
liveUrl = liveUrl.replace("127.0.0.1", "video.keliuyun.com")
player.start(liveUrl)
} else{
console.log(res.msg)
}
});
}
}
</script>
</html>