Skip to content

Commit f74766f

Browse files
freeshineitfreeshineit
committed
docs: add themeDate doc
1 parent 1334738 commit f74766f

File tree

2 files changed

+208
-6
lines changed

2 files changed

+208
-6
lines changed

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -179,19 +179,19 @@ const player = new EZUIKitPlayer({
179179
180180
### 使用示例
181181

182-
> 1. 快速创建视频播放页面
182+
#### 快速创建视频播放页面
183183

184184
&emsp;&emsp;&emsp;&emsp;<b>基本使用：</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/index.html" target="_blank">基本使用示例</a>
185185

186-
> 2. 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题，可以动态配置你的播放主题，控件，示例展示了获取一个主题后使用示例。
186+
#### 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题，可以动态配置你的播放主题，控件，示例展示了获取一个主题后使用示例。
187187

188188
&emsp;&emsp;&emsp;&emsp;<b>自定义主题：</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/template.html" target="_blank">自定义主题示例</a>
189189

190-
> 3. 你可以本地创建一个主题配置，可以本地配置你的播放主题，控件，示例展示了本地配置项使用示例。
190+
#### 你可以本地创建一个主题配置，可以本地配置你的播放主题，控件，示例展示了本地配置项使用示例。
191191

192192
&emsp;&emsp;&emsp;&emsp;<b>本地主题配置：</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/themeData.html" target="_blank">本地主题配置示例</a>
193193

194-
> 4. 我们提供了一些通用场景的主题，PC 端预览，PC 端回放，移动端预览，移动端回放，你也可以直接使用。
194+
#### 我们提供了一些通用场景的主题，PC 端预览，PC 端回放，移动端预览，移动端回放，你也可以直接使用。
195195

196196
&emsp;&emsp;&emsp;&emsp;<b>PC 端预览-固定主题：</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/pcLive.html" target="_blank">PC 端预览-固定主题示例</a>
197197

@@ -201,7 +201,7 @@ const player = new EZUIKitPlayer({
201201

202202
&emsp;&emsp;&emsp;&emsp;<b>移动端回放-固定主题：</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/mobileRec.html" target="_blank">移动端回放-固定主题示例</a>
203203

204-
> 同一个页面播放多个视频，可以参考：
204+
#### 同一个页面播放多个视频，可以参考：
205205

206206
&emsp;&emsp;&emsp;&emsp;<b>单页面多实例(视频多窗口)：</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/multi.html" target="_blank">单页面多实例(视频多窗口)示例</a>
207207

@@ -256,7 +256,7 @@ ezopen://open.ys7.com/${设备序列号}/{通道号}.hd.live<br/>
256256
</table>
257257

258258
</td><td>N</td></tr>
259-
<tr><td>themeData</td><td>Object</td><td>
259+
<tr><td>themeData</td><td><a href="./themeData.md" target="_blank">ThemeData</a></td><td>
260260
themeData将主题数据本地化，设置本地数据，需要删除template参数 <br />
261261
你可以通过themeData修改按钮位置，颜色，头部底部颜色等配置。
262262

‎themeData.md

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
## themeData
2+
3+
themeData将主题数据本地化，设置本地数据，需要删除template参数, 你可以通过themeData修改按钮位置，颜色，头部底部颜色等配置。
4+
5+
```ts
6+
/**
7+
* 控件按钮或文本
8+
*/
9+
interface ThemeDataBtn {
10+
/**
11+
* 按钮图标ID
12+
*/
13+
"iconId": string,
14+
/**
15+
* left: 左侧 right: 右侧
16+
*/
17+
"part": "left" | "right",
18+
/**
19+
* 默认选中
20+
*/
21+
"defaultActive": 0 | 1,
22+
/** 按钮名称*/
23+
"memo": "顶部设备名称",
24+
/** 0: 显示 1: 隐藏 */
25+
"isrender": 1 | 0
26+
}
27+
28+
/**
29+
* 主题数据
30+
*/
31+
interface ThemeData {
32+
/**
33+
* header/ footer 聚焦时间 (单位秒)，默认 5 秒后自动隐藏; 0 一直展示；
34+
*/
35+
"autoFocus": number,
36+
/**
37+
* 封面图片
38+
* 默认 https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png
39+
*/
40+
"poster": string,
41+
/**
42+
* 顶部
43+
*/
44+
"header": {
45+
/** 字体/图标颜色 */
46+
"color": string,
47+
/**
48+
* 按钮激活色
49+
*/
50+
"activeColor": string,
51+
/**
52+
* 按钮背景色
53+
*/
54+
"backgroundColor": string,
55+
/**
56+
* 控件按钮列表
57+
*/
58+
"btnList": ThemeDataBtn[]
59+
},
60+
/**
61+
* 底部
62+
*/
63+
"footer": {
64+
/** 字体/图标颜色 */
65+
"color": string,
66+
/**
67+
* 按钮激活色
68+
*/
69+
"activeColor": string,
70+
/**
71+
* 按钮背景色
72+
*/
73+
"backgroundColor": string,
74+
/**
75+
* 控件按钮列表
76+
*/
77+
"btnList": ThemeDataBtn[]
78+
}
79+
}
80+
```
81+
82+
83+
#### 配置示例
84+
85+
```json
86+
{
87+
"autoFocus": 5,
88+
"poster":"https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
89+
"header": {
90+
"color": "#1890ff",
91+
"activeColor": "#FFFFFF",
92+
"backgroundColor": "#000000",
93+
"btnList": [
94+
{
95+
"iconId": "deviceID",
96+
"part": "left",
97+
"defaultActive": 0,
98+
"memo": "顶部设备名称",
99+
"isrender": 1
100+
},
101+
{
102+
"iconId": "deviceName",
103+
"part": "left",
104+
"defaultActive": 0,
105+
"memo": "顶部设备ID",
106+
"isrender": 1
107+
},
108+
{
109+
"iconId": "cloudRec",
110+
"part": "right",
111+
"defaultActive": 0,
112+
"memo": "头部云存储回放",
113+
"isrender": 0
114+
},
115+
{
116+
"iconId": "rec",
117+
"part": "right",
118+
"defaultActive": 0,
119+
"memo": "头部本地回放",
120+
"isrender": 0
121+
}
122+
]
123+
},
124+
"footer": {
125+
"color": "#FFFFFF",
126+
"activeColor": "#1890FF",
127+
"backgroundColor": "#00000021",
128+
"btnList": [
129+
{
130+
"iconId": "play",
131+
"part": "left",
132+
"defaultActive": 1,
133+
"memo": "播放",
134+
"isrender": 1
135+
},
136+
{
137+
"iconId": "capturePicture",
138+
"part": "left",
139+
"defaultActive": 0,
140+
"memo": "截屏按钮",
141+
"isrender": 1
142+
},
143+
{
144+
"iconId": "sound",
145+
"part": "left",
146+
"defaultActive": 0,
147+
"memo": "声音按钮",
148+
"isrender": 1
149+
},
150+
{
151+
"iconId": "pantile",
152+
"part": "left",
153+
"defaultActive": 0,
154+
"memo": "云台控制按钮",
155+
"isrender": 1
156+
},
157+
{
158+
"iconId": "recordvideo",
159+
"part": "left",
160+
"defaultActive": 0,
161+
"memo": "录制按钮",
162+
"isrender": 1
163+
},
164+
{
165+
"iconId": "talk",
166+
"part": "left",
167+
"defaultActive": 0,
168+
"memo": "对讲按钮",
169+
"isrender": 1
170+
},
171+
{
172+
"iconId": "zoom",
173+
"part": "left",
174+
"defaultActive": 0,
175+
"memo": "电子放大",
176+
"isrender": 1
177+
},
178+
{
179+
"iconId": "hd",
180+
"part": "right",
181+
"defaultActive": 0,
182+
"memo": "清晰度切换按钮",
183+
"isrender": 1
184+
},
185+
{
186+
"iconId": "webExpend",
187+
"part": "right",
188+
"defaultActive": 0,
189+
"memo": "网页全屏按钮",
190+
"isrender": 1
191+
},
192+
{
193+
"iconId": "expend",
194+
"part": "right",
195+
"defaultActive": 0,
196+
"memo": "全局全屏按钮",
197+
"isrender": 1
198+
}
199+
]
200+
}
201+
}
202+
```

0 commit comments

Comments
 (0)