@sgrsoft/vpe-react-sdk 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -11
- package/dist/vpe-react-sdk.es.js +8028 -7402
- package/dist/vpe-react-sdk.umd.js +91 -79
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
# VPE React SDK
|
|
1
|
+
# VPE React SDK
|
|
2
2
|
|
|
3
3
|
React 19/Vite 기반 VPE 플레이어 UI 라이브러리입니다. hls.js/dashjs는 번들에 포함되지 않으며, 외부 플러그인으로 주입합니다.
|
|
4
4
|
|
|
5
|
+
## 주요 기능
|
|
6
|
+
- HLS/DASH/MP4 재생 및 재생 타입 자동 판별
|
|
7
|
+
- 플레이리스트 재생, 다음/이전 이동, 자동 다음 재생(카운트다운)
|
|
8
|
+
- DRM 지원: Widevine/PlayReady/FairPlay + DRM 라이선스/인증서 헤더 전달
|
|
9
|
+
- 토큰 기반 스트림 URL 자동 부착(`options.token`)
|
|
10
|
+
- 커스텀 컨트롤바 레이아웃(라이브/VOD, PC/모바일/전체화면 분기)
|
|
11
|
+
- 이벤트 브리지(`onEvent`) 및 외부 컨트롤(Ref/UMD 인스턴스)
|
|
12
|
+
- 에러 UI 기본 제공 및 `errorOverride`로 커스터마이즈
|
|
13
|
+
|
|
5
14
|
## 설치
|
|
6
15
|
```bash
|
|
7
16
|
pnpm add @sgrsoft/vpe-react-sdk
|
|
@@ -22,20 +31,43 @@ export function App() {
|
|
|
22
31
|
return (
|
|
23
32
|
<VpePlayer
|
|
24
33
|
accessKey="..."
|
|
25
|
-
appId="..."
|
|
26
34
|
platform="pub"
|
|
27
35
|
stage="prod"
|
|
28
|
-
aspectRatio="16/9"
|
|
29
36
|
hls={Hls}
|
|
30
37
|
dashjs={dashjs}
|
|
31
38
|
options={{
|
|
32
|
-
|
|
39
|
+
aspectRatio: "16/9",
|
|
40
|
+
playlist: [
|
|
41
|
+
{
|
|
42
|
+
file: "https://.../master.m3u8",
|
|
43
|
+
poster: "https://.../poster.jpg",
|
|
44
|
+
vtt: [{ label: "KR", src: "https://.../subtitle.vtt", default: true }],
|
|
45
|
+
},
|
|
46
|
+
],
|
|
33
47
|
}}
|
|
34
48
|
/>
|
|
35
49
|
);
|
|
36
50
|
}
|
|
37
51
|
```
|
|
38
52
|
|
|
53
|
+
### React (Ref로 제어)
|
|
54
|
+
```tsx
|
|
55
|
+
import { useRef } from "react";
|
|
56
|
+
import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";
|
|
57
|
+
|
|
58
|
+
export function App() {
|
|
59
|
+
const playerRef = useRef<PlayerHandle>(null);
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<>
|
|
63
|
+
<VpePlayer ref={playerRef} accessKey="..." options={{ playlist: [{ file: "..." }] }} />
|
|
64
|
+
<button onClick={() => playerRef.current?.play()}>Play</button>
|
|
65
|
+
<button onClick={() => playerRef.current?.fullscreenOn()}>Fullscreen</button>
|
|
66
|
+
</>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
39
71
|
## 레이아웃 시스템 사용 가이드
|
|
40
72
|
`VpePlayer`는 `layout` props로 컨트롤바 구성을 유연하게 커스터마이즈할 수 있습니다.
|
|
41
73
|
기본값은 내부 `defaultLayout`이며, 지정하지 않으면 기본 레이아웃을 사용합니다.
|
|
@@ -100,15 +132,57 @@ const responsiveLayout = {
|
|
|
100
132
|
### 4) 그룹 옵션 요약
|
|
101
133
|
- `items`: 버튼 배열 또는 커스텀 ReactNode
|
|
102
134
|
- `wrapper`: `"Group"` 또는 `"Blank"` (미지정 시 기본 컨테이너)
|
|
103
|
-
- `cap`:
|
|
104
|
-
- `noPadding`: 그룹 패딩 제거
|
|
135
|
+
- `cap`: 그룹에 버튼간 간격
|
|
105
136
|
- `align`: `"left" | "right" | "center"`
|
|
106
137
|
|
|
107
138
|
### 5) 사용 가능한 `items`
|
|
108
139
|
```
|
|
109
140
|
PlayBtn, VolumeBtn, TimeBtn, SubtitleBtn, FullscreenBtn, SettingBtn, PipBtn,
|
|
110
|
-
LevelSelectBtn,
|
|
111
|
-
SkipForwardBtn, SkipBackBtn, CurrentTimeBtn, MuteBtn,
|
|
141
|
+
LevelSelectBtn, MetaDesc, BigPlayBtn, SeekBar, SettingModal, DurationBtn,
|
|
142
|
+
SkipForwardBtn, SkipBackBtn, CurrentTimeBtn, MuteBtn, PrevBtn, NextBtn,
|
|
143
|
+
NextPrevBtn, Blank
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## 이벤트
|
|
147
|
+
`onEvent` 또는 UMD 인스턴스의 `on`으로 이벤트를 수신합니다.
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
<VpePlayer
|
|
151
|
+
accessKey="..."
|
|
152
|
+
options={{ playlist: [{ file: "..." }] }}
|
|
153
|
+
onEvent={(event) => {
|
|
154
|
+
if (event.type === "error") {
|
|
155
|
+
console.log(event.data);
|
|
156
|
+
}
|
|
157
|
+
}}
|
|
158
|
+
/>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
지원 이벤트: `stateChange`, `ready`, `play`, `pause`, `ended`, `fullscreen`, `fullscreenExit`, `loadingStart`,
|
|
162
|
+
`loadingEnd`, `bufferingStart`, `bufferingEnd`, `seeking`, `seeked`, `waiting`, `volumechange`, `timeupdate`,
|
|
163
|
+
`controlbarActive`, `controlbarDeactive`, `next`, `prev`, `skipForward`, `skipBack`, `playlistChange`, `error`
|
|
164
|
+
|
|
165
|
+
## DRM/토큰 적용 예시
|
|
166
|
+
```ts
|
|
167
|
+
options={{
|
|
168
|
+
token: "token=...",
|
|
169
|
+
playlist: [
|
|
170
|
+
{
|
|
171
|
+
drm: {
|
|
172
|
+
"com.widevine.alpha": {
|
|
173
|
+
src: "https://.../manifest.mpd",
|
|
174
|
+
licenseUri: "https://.../license",
|
|
175
|
+
licenseRequestHeader: { Authorization: "Bearer ..." },
|
|
176
|
+
},
|
|
177
|
+
"com.apple.fps": {
|
|
178
|
+
src: "https://.../master.m3u8",
|
|
179
|
+
licenseUri: "https://.../fps-license",
|
|
180
|
+
certificateUri: "https://.../fps-cert",
|
|
181
|
+
},
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
],
|
|
185
|
+
}}
|
|
112
186
|
```
|
|
113
187
|
|
|
114
188
|
### UMD
|
|
@@ -120,9 +194,18 @@ SkipForwardBtn, SkipBackBtn, CurrentTimeBtn, MuteBtn, Blank
|
|
|
120
194
|
<div id="video"></div>
|
|
121
195
|
<script>
|
|
122
196
|
ncplayer.use(window.Hls).use(window.dashjs);
|
|
123
|
-
const player = new ncplayer("video", {
|
|
124
|
-
|
|
125
|
-
});
|
|
197
|
+
const player = new ncplayer("video", { aspectRatio: "16/9" });
|
|
198
|
+
player.on("ready", (event) => console.log(event));
|
|
126
199
|
// player.destroy() 로 해제 가능
|
|
127
200
|
</script>
|
|
128
201
|
```
|
|
202
|
+
|
|
203
|
+
## UMD setup 함수
|
|
204
|
+
```html
|
|
205
|
+
<script>
|
|
206
|
+
const instance = window.vpe.setup("#video", "YOUR_ACCESS_KEY", {
|
|
207
|
+
options: { aspectRatio: "16/9", playlist: [{ file: "..." }] },
|
|
208
|
+
});
|
|
209
|
+
// instance.render({ options: { ... } }) 로 재렌더 가능
|
|
210
|
+
</script>
|
|
211
|
+
```
|