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

Skip to content

Commit fe3aa10

Browse files
yujianbohzyujianbohz
committed
[ADD]新增多窗口示例
1 parent 392cda9 commit fe3aa10

File tree

2 files changed

+214
-0
lines changed

2 files changed

+214
-0
lines changed

‎demos/base-demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ <h2>视频模式使用示例：</h2>
2626
<button onClick="startTalk()">开始对讲</button>
2727
<button onClick="stopTalk()">结束对讲</button>
2828
</div>
29+
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
2930
</div>
3031
<script>
3132
var playr = new EZUIKit.EZUIKitPlayer({

‎demos/base-demo/multi-demo.html‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7+
<title>Document</title>
8+
<script src="./ezuikit.js"></script>
9+
</head>
10+
11+
<body>
12+
<div className="demo">
13+
<h2>多个视频窗口模式使用示例：</h2>
14+
<div style="display: inline-block;vertical-align: top;width: 40%;">
15+
<h3>窗口1：</h3>
16+
<div id="video-container" style="width:400px;">
17+
</div>
18+
<div>
19+
<button onClick="play()">play</button>
20+
<button onClick="stop()">stop</button>
21+
<button onClick="getOSDTime()">getOSDTime</button>
22+
<button onClick="capturePicture()">capturePicture</button>
23+
<button onClick="openSound()">openSound</button>
24+
<button onClick="closeSound()">closeSound</button>
25+
<button onClick="startSave()">startSave</button>
26+
<button onClick="stopSave()">stopSave</button>
27+
</div>
28+
</div>
29+
<div style="display: inline-block;vertical-align: top;width: 40%;">
30+
<h3>窗口2：</h3>
31+
<div id="video-container2" style="width:400px;">
32+
</div>
33+
<div>
34+
<button onClick="play2()">play</button>
35+
<button onClick="stop2()">stop</button>
36+
<button onClick="getOSDTime2()">getOSDTime2</button>
37+
<button onClick="capturePicture2()">capturePicture</button>
38+
<button onClick="openSound2()">openSound</button>
39+
<button onClick="closeSound2()">closeSound</button>
40+
<button onClick="startSave2()">startSave</button>
41+
<button onClick="stopSave2()">stopSave</button>
42+
</div>
43+
</div>
44+
</div>
45+
<script>
46+
var playr1 = new EZUIKit.EZUIKitPlayer({
47+
id: 'video-container', // 视频容器ID
48+
accessToken: 'xx.16xf4zx0598fciw0delqzohqxxz6u8ei-1vxaom5kzu-1lz6z9x-uboj6tj3a',
49+
url: 'ezopen://open.ys7.com/xxx/1.live',
50+
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
51+
autoplay: true,
52+
// 视频上方头部控件
53+
header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
54+
// 视频下方底部控件
55+
footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
56+
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
57+
// plugin: ['talk'], // 加载插件，talk-对讲
58+
// controls: true, //['play','voice','hd','fullScreen'], // 视频控制相关控件，如果template参数不为simple,该字段将被覆盖
59+
openSoundCallBack: (data) => console.log("开启声音回调", data),
60+
closeSoundCallBack: (data) => console.log("关闭声音回调", data),
61+
startSaveCallBack: (data) => console.log("开始录像回调", data),
62+
stopSaveCallBack: (data) => console.log("录像回调", data),
63+
capturePictureCallBack: (data) => console.log("截图成功回调", data),
64+
fullScreenCallBack: (data) => console.log("全屏回调", data),
65+
getOSDTimeCallBack: (data) => console.log("获取OSDTime回调", data),
66+
handleSuccess: (data) = function () { console.log("播放成功回调", data) },
67+
handleError: (data) => console.log("播放失败回调", data),
68+
handleTalkSuccess: () => console.log("对讲成功回掉"),
69+
handleTalkError: (data) = function () { console.log("对讲失败", data) },
70+
width: 400,
71+
height: 300,
72+
});
73+
function play() {
74+
var playPromise = playr.play();
75+
playPromise.then((data) => {
76+
console.log("promise 获取 数据", data)
77+
})
78+
}
79+
function stop() {
80+
var stopPromise = playr.stop();
81+
stopPromise.then((data) => {
82+
console.log("promise 获取 数据", data)
83+
})
84+
}
85+
function getOSDTime() {
86+
var getOSDTimePromise = playr.getOSDTime();
87+
getOSDTimePromise.then((data) => {
88+
console.log("promise 获取 数据", data)
89+
})
90+
}
91+
function getOSDTime2() {
92+
var getOSDTimePromise = playr2.getOSDTime();
93+
getOSDTimePromise.then((data) => {
94+
console.log("promise 获取 数据", data)
95+
})
96+
}
97+
function capturePicture() {
98+
var capturePicturePromise = playr.capturePicture();
99+
capturePicturePromise.then((data) => {
100+
console.log("promise 获取 数据", data)
101+
})
102+
}
103+
function openSound() {
104+
var openSoundPromise = playr.openSound();
105+
openSoundPromise.then((data) => {
106+
console.log("promise 获取 数据", data)
107+
})
108+
}
109+
function closeSound() {
110+
var closeSoundPromise = playr.closeSound();
111+
closeSoundPromise.then((data) => {
112+
console.log("promise 获取 数据", data)
113+
})
114+
}
115+
function startSave() {
116+
var startSavePromise = playr.startSave();
117+
startSavePromise.then((data) => {
118+
console.log("promise 获取 数据", data)
119+
})
120+
}
121+
function stopSave() {
122+
var stopSavePromise = playr.stopSave();
123+
stopSavePromise.then((data) => {
124+
console.log("promise 获取 数据", data)
125+
})
126+
}
127+
</script>
128+
<script>
129+
var playr2 = new EZUIKit.EZUIKitPlayer({
130+
id: 'video-container2', // 视频容器ID
131+
accessToken: 'xx.16xf4zx0598fciw0delqzohqxxz6u8ei-1vxaom5kzu-1lz6z9x-uboj6tj3aa',
132+
url: 'ezopen://open.ys7.com/xxx/1.live',
133+
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
134+
autoplay: true,
135+
// 视频上方头部控件
136+
header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
137+
// 视频下方底部控件
138+
footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
139+
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
140+
// plugin: ['talk'], // 加载插件，talk-对讲
141+
// controls: true, //['play','voice','hd','fullScreen'], // 视频控制相关控件，如果template参数不为simple,该字段将被覆盖
142+
openSoundCallBack: (data) => console.log("开启声音回调", data),
143+
closeSoundCallBack: (data) => console.log("关闭声音回调", data),
144+
startSaveCallBack: (data) => console.log("开始录像回调", data),
145+
stopSaveCallBack: (data) => console.log("录像回调", data),
146+
capturePictureCallBack: (data) => console.log("截图成功回调", data),
147+
fullScreenCallBack: (data) => console.log("全屏回调", data),
148+
getOSDTimeCallBack: (data) => console.log("获取OSDTime回调", data),
149+
handleSuccess: (data) = function () { console.log("播放成功回调", data) },
150+
handleError: (data) => console.log("播放失败回调", data),
151+
handleTalkSuccess: () => console.log("对讲成功回掉"),
152+
handleTalkError: (data) = function () { console.log("对讲失败", data) },
153+
width: 400,
154+
height: 300,
155+
});
156+
function play2() {
157+
var playPromise = playr2.play();
158+
playPromise.then((data) => {
159+
console.log("promise 获取 数据", data)
160+
})
161+
}
162+
function stop2() {
163+
var stopPromise = playr2.stop();
164+
stopPromise.then((data) => {
165+
console.log("promise 获取 数据", data)
166+
})
167+
}
168+
function getOSDTime2() {
169+
var getOSDTimePromise = playr2.getOSDTime();
170+
getOSDTimePromise.then((data) => {
171+
console.log("promise 获取 数据", data)
172+
})
173+
}
174+
function getOSDTime2() {
175+
var getOSDTimePromise = playr2.getOSDTime();
176+
getOSDTimePromise.then((data) => {
177+
console.log("promise 获取 数据", data)
178+
})
179+
}
180+
function capturePicture2() {
181+
var capturePicturePromise = playr2.capturePicture();
182+
capturePicturePromise.then((data) => {
183+
console.log("promise 获取 数据", data)
184+
})
185+
}
186+
function openSound2() {
187+
var openSoundPromise = playr2.openSound();
188+
openSoundPromise.then((data) => {
189+
console.log("promise 获取 数据", data)
190+
})
191+
}
192+
function closeSound2() {
193+
var closeSoundPromise = playr2.closeSound();
194+
closeSoundPromise.then((data) => {
195+
console.log("promise 获取 数据", data)
196+
})
197+
}
198+
function startSave2() {
199+
var startSavePromise = playr2.startSave();
200+
startSavePromise.then((data) => {
201+
console.log("promise 获取 数据", data)
202+
})
203+
}
204+
function stopSave2() {
205+
var stopSavePromise = playr2.stopSave();
206+
stopSavePromise.then((data) => {
207+
console.log("promise 获取 数据", data)
208+
})
209+
}
210+
</script>
211+
</body>
212+
213+
</html>

0 commit comments

Comments
 (0)