Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3bf6661

Browse files
yujianbohzyujianbohz
committed
[ADD]版本2.3更新，支持多窗口直播，预览模式，错误码
1 parent dc46653 commit 3bf6661

File tree

9 files changed

+5478
-206
lines changed

9 files changed

+5478
-206
lines changed

‎README.md‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ UIKit JavaScript是用于WEB端，移动H5端的JavaScript插件，使用UIKit J
7676
`player.stop()`
7777

7878
## <a name="back">四、预览，回放</a>
79+
7980
1.页面创建div标签
8081
```
8182
<div id="myPlayer"></div>
@@ -99,12 +100,14 @@ UIKit JavaScript是用于WEB端，移动H5端的JavaScript插件，使用UIKit J
99100
属性名|示例|默认值|说明
100101
---|:--:|---|---:
101102
id| myPlayer| null|*必填，元素标签id
102-
url | ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live |null| 直播地址<br>支持ezopen协议格式（推荐）<br>支持ws, wss格式预览地址播放
103+
url | ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live |null| 直播地址<br>支持ezopen协议格式（推荐）<br>支持ws, wss格式预览地址播放<br>多窗口模式请用英文逗号（,）分隔
103104
accessToken|"at.8o2k6dbpcvtr13reaa96hbnya6fee2wf-9gu6zcjmh2-1j4yrsb-imvlc5poc"|null|用户通过官网或者接口获取的accessToken
104105
decoderPath|解码器相对路径|null|*必填，预览需要本地加载解码器，请填写ezuikit所在相对路径|
105106
width|400|null|视频元素宽度
106107
height|400|null|视频元素高度
107-
autoplay|true|false|是否自动播放
108+
autoplay|true|true|是否自动播放
109+
splitBasis|1|1|多窗口设置窗口切割参数
110+
handleError|null|null|错误回调方法，用于捕获错误
108111

109112

110113
3.方法集
@@ -113,7 +116,29 @@ UIKit JavaScript是用于WEB端，移动H5端的JavaScript插件，使用UIKit J
113116
`player.play()`
114117
- 预览，回放停止
115118

116-
`player.stop()`
119+
`player.stop()`
120+
121+
3.多窗口模式
122+
123+
>支持 1\*1，2\*2，3\*3，4\*4 多窗口播放
124+
125+
>### 实现多窗口仅需两步：
126+
- 设置窗口切割参数（1\*1，2\*2，3\*3，4\*4） splitBasis
127+
- 多窗口url通过逗号分隔
128+
```
129+
var player = new EZUIPlayer({
130+
id: 'myPlayer',
131+
url: {url0},{url1},{url2},{url3}, // ezopen播放地址逗号分隔
132+
autoplay: true,
133+
accessToken: "at.8o2k6dbpcvtr13reaa96hbnya6*************c",
134+
decoderPath: '{{location path}}',
135+
width: 1200, // 宽度高度为容器规格，将按照窗口数均分
136+
height: 800,
137+
splitBasis: 2 //设置窗口切割参数
138+
});
139+
```
140+
141+
117142
## 五、<a name="ezopen">播放地址获取及EZOPEN协议说明</a>
118143

119144
你可以通过开放平台官网获取各种格式视频直播地址，包含HLS格式，RTMP格式，WS格式，FLV格式等，EZUIKit支持所有格式直播视频播放。你可以将以上格式直播地址配置在UIKIT中直接播放，但需要注意，并非所有浏览器支持任意格式直播地址，为方便开发者使用，开放平台通过EZOPEN协议可以通过你终端类型帮助你轻松适配最优播放地址格式：

‎demo/demo-jsdecoder-mulit-split.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<meta name="renderer" content="webkit">
8+
<title>EZOPEN播放协议</title>
9+
<style>
10+
body {
11+
margin: 0;
12+
}
13+
14+
#url,
15+
#url2,
16+
#accessToken {
17+
width: 100%;
18+
}
19+
20+
.btn-container {
21+
margin: 10px;
22+
}
23+
</style>
24+
</head>
25+
<script>
26+
</script>
27+
28+
<body>
29+
<script src="../ezuikit.js"></script>
30+
<!-- <script src="../js/jsPlugin-1.2.0.js"></script> -->
31+
<!-- <script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.min.js"></script> -->
32+
<script src="../js/jquery.min.js"></script>
33+
<h2>预览，回放 多窗口模式示例：</h2>
34+
<!-- <p>ezopen地址用逗号分隔</p> -->
35+
<textarea id="url" placeholder="这里输入ezopen地址">ezopen://open.ys7.com/b3aaef239a974c5dbe768984d1a5731d.live,ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live,ezopen://open.ys7.com/6538e95071194d2f9ca9ca9e3c09904e.live,ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live</textarea>
36+
<!-- <textarea id="url" placeholder="这里输入ezopen地址">ezopen://open.ys7.com/b3aaef239a974c5dbe768984d1a5731d.live</textarea> -->
37+
<textarea id="accessToken" placeholder="这里输入accessToken">at.12zcwvys36992fts7xanq6ym0dn9utxm-7auuqr4eqq-0tq3rwu-mfg4yysjw</textarea>
38+
<div class="btn-container">
39+
<button id="init">开始初始化</button>
40+
<button id="start">播放</button>
41+
<button id="stop">全部结束</button>
42+
</div>
43+
<div id="playWind" style="width: 1200px; height: 800px;">
44+
</div>
45+
<script>
46+
var decoder;
47+
$("#init").click(function () {
48+
var url = $('#url').val().trim();
49+
var accessToken = $('#accessToken').val().trim();
50+
decoder = new EZUIKit.EZUIPlayer({
51+
id: 'playWind',
52+
autoplay: true,
53+
url: url,
54+
accessToken: accessToken,
55+
decoderPath: '../',
56+
width: 1200,
57+
height: 800,
58+
splitBasis: 2, // 1*1 2*2 3*3 4*4
59+
});
60+
// 这里是打印日志，本例抛出到播放页面
61+
decoder.on('log', log);
62+
function log(str) {
63+
var div = document.createElement('DIV');
64+
div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
65+
document.body.appendChild(div);
66+
}
67+
$("#start").click(function () {
68+
decoder.play({
69+
//index:[0,1],
70+
// handleError: handleError,
71+
// handleSuccess: handleSuccess,
72+
});
73+
})
74+
$("#stop").click(function () {
75+
decoder.stop();
76+
})
77+
})
78+
79+
</script>
80+
</body>
81+
82+
</html>

‎demo/demo-jsdecoder.html‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
<script src="../ezuikit.js"></script>
3030
<!-- <script src="../js/jsPlugin-1.2.0.js"></script> -->
3131
<script src="../js/jquery.min.js"></script>
32-
<h2>预览，回放</h2>
33-
<textarea id="url" placeholder="这里输入ezopen地址"></textarea>
34-
<textarea id="accessToken" placeholder="这里输入accessToken"></textarea>
32+
<h2>预览，回放功能示例：</h2>
33+
<textarea id="url" placeholder="这里输入ezopen地址">ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507x.live</textarea>
34+
<textarea id="accessToken" placeholder="这里输入accessToken">at.12zcwvys36992fts7xanq6ym0dn9utxm-7auuqr4eqq-0tq3rwu-mfg4yysjw</textarea>
3535
<div class="btn-container">
3636
<button id="init">开始初始化</button>
3737
<button id="start">播放</button>
@@ -41,6 +41,10 @@ <h2>预览，回放</h2>
4141
</div>
4242
<script>
4343
$("#init").click(function () {
44+
function handleError(e){
45+
console.log('捕获到错误',e)
46+
//alert(e)
47+
}
4448
var url = $('#url').val().trim();
4549
var accessToken = $('#accessToken').val().trim();
4650
var decoder = new EZUIKit.EZUIPlayer({
@@ -51,6 +55,7 @@ <h2>预览，回放</h2>
5155
decoderPath: '../',
5256
width: 600,
5357
height: 400,
58+
handleError: handleError,
5459
});
5560
// 这里是打印日志，本例抛出到播放页面
5661
decoder.on('log', log);
@@ -60,7 +65,15 @@ <h2>预览，回放</h2>
6065
document.body.appendChild(div);
6166
}
6267
$("#start").click(function () {
63-
decoder.play();
68+
function handleError(e){
69+
console.log('handleError',e)
70+
}
71+
function handleSuccess(){
72+
console.log('handleSuccess')
73+
}
74+
decoder.play({
75+
handleError: handleError,
76+
});
6477
})
6578
$("#pause").click(function () {
6679
decoder.pause();

0 commit comments

Comments
 (0)