@kkcompany/player 1.15.29
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 +197 -0
- package/core.js +2345 -0
- package/index.d.ts +87 -0
- package/index.esm.js +1916 -0
- package/index.js +14152 -0
- package/modules.d.ts +87 -0
- package/modules.js +8470 -0
- package/package.json +52 -0
- package/plugins.d.ts +5 -0
- package/plugins.js +8046 -0
- package/react.d.ts +148 -0
- package/react.js +9872 -0
package/README.md
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
# BlendVision Player SDK
|
|
2
|
+
|
|
3
|
+
The BlendVision Player SDK is a web video player which supports video playback. You can check the demo [here](https://playcraft-v1-10-0-canary-0-ii72jy5u8-kksweb.vercel.app/player-sdk?autoplay=true&mockContentId=2).
|
|
4
|
+
|
|
5
|
+
## How to Install?
|
|
6
|
+
|
|
7
|
+
There are 2 methods to install BlendVision Player SDK as described below.
|
|
8
|
+
You can install BlendVision Player SDK through npm:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @web-kks/blendvision-player-sdk-for-web
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Alternatively, you can refer to an up‐to‐date version on our CDN:
|
|
15
|
+
|
|
16
|
+
```html
|
|
17
|
+
<script src="https://unpkg.com/@web-kks/blendvision-player-sdk-for-web"></script>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Polyfills
|
|
21
|
+
|
|
22
|
+
Note that this project includes no polyfills by default.
|
|
23
|
+
|
|
24
|
+
If you use any other ES6+ features that need runtime support (such as `Array.at()`), make sure you are [including the appropriate polyfills manually](https://github.com/zloirock/core-js/blob/master/README.md), or that the browsers you are targeting already support them.
|
|
25
|
+
|
|
26
|
+
## How to Create a Player?
|
|
27
|
+
|
|
28
|
+
Create an instance of this player class.
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<!-- the element where you would like to display the player -->
|
|
32
|
+
<div id='my-player'></div>
|
|
33
|
+
|
|
34
|
+
<script src='https://unpkg.com/@web-kks/blendvision-player-sdk-for-web' defer></script>
|
|
35
|
+
<script>
|
|
36
|
+
var config = {
|
|
37
|
+
title: 'Title',
|
|
38
|
+
source: '...',
|
|
39
|
+
}
|
|
40
|
+
var Player = BlendVision.default
|
|
41
|
+
var player = Player("my-player", config)
|
|
42
|
+
</script>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Source
|
|
46
|
+
|
|
47
|
+
An object or an array of objects contains `{type, src}`.
|
|
48
|
+
|
|
49
|
+
- Type: type of manifests
|
|
50
|
+
- Src: manifest URL of video
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
[
|
|
54
|
+
{
|
|
55
|
+
type: 'dash',
|
|
56
|
+
src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths/dash.mpd',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'hls',
|
|
60
|
+
src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8',
|
|
61
|
+
}
|
|
62
|
+
]
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
In iOS browsers and macOS Safari, the player chooses the first HLS manifest and plays with built-in player provided by Apple.
|
|
66
|
+
|
|
67
|
+
In other browsers, the player looks for the first DASH manifest and plays with MediaSource Extensions.
|
|
68
|
+
|
|
69
|
+
### DRM
|
|
70
|
+
|
|
71
|
+
To play videos with content protection, you should specify license server URLs and options in drm:
|
|
72
|
+
|
|
73
|
+
```js
|
|
74
|
+
[
|
|
75
|
+
{
|
|
76
|
+
type: 'dash',
|
|
77
|
+
src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths/dash.mpd',
|
|
78
|
+
drm: {
|
|
79
|
+
widevine: 'https://drm.ex.com/portal',
|
|
80
|
+
playready: 'https://drm.ex.com/portal',
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
type: 'hls',
|
|
85
|
+
src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8',
|
|
86
|
+
drm: {
|
|
87
|
+
fairplay: {
|
|
88
|
+
licenseUri: 'https://drm.ex.com/portal',
|
|
89
|
+
certificateUri: 'https://drm.ex.com/portal/certificate'
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
**`source.drm.widevine.level`**
|
|
97
|
+
|
|
98
|
+
Due to the best compatibility, in most situations, there’s no need to set Widevine level.
|
|
99
|
+
|
|
100
|
+
Actual robustness/security level is determined by the browser, it may use L3 even if L1 works well.
|
|
101
|
+
|
|
102
|
+
When you view the below message in the console on Chrome, it is [safe to ignore](https://bugs.chromium.org/p/chromium/issues/detail?id=720013).
|
|
103
|
+
|
|
104
|
+
> It is recommended that a robustness level be specified. Not specifying the robustness level could result in unexpected behavior, potentially including failure to play.
|
|
105
|
+
|
|
106
|
+
- In the case of hardware based content protection(L1) is required, please set `HW_SECURE_DECODE`.
|
|
107
|
+
- If you have a list of devices that don't play well with L1, please set `SW_SECURE_DECODE` to force L3.
|
|
108
|
+
- For advanced or experimental usage, the possible value is one of `SW_SECURE_CRYPTO`, `SW_SECURE_DECODE`, `HW_SECURE_CRYPTO`, `HW_SECURE_DECODE`, and `HW_SECURE_ALL`, which is specific to Widevine and not supported in other key systems.
|
|
109
|
+
|
|
110
|
+
## Features & Definition
|
|
111
|
+
|
|
112
|
+
### Play
|
|
113
|
+
|
|
114
|
+
This method plays a video.
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
player.play()
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Pause
|
|
121
|
+
|
|
122
|
+
This method pauses the playback of a video.
|
|
123
|
+
|
|
124
|
+
```js
|
|
125
|
+
player.pause()
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Seek
|
|
129
|
+
|
|
130
|
+
This method sets the current playback position in seconds, or gets the current playback position of a video.
|
|
131
|
+
|
|
132
|
+
```js
|
|
133
|
+
player.seek(50) // Set the current playback position to 50 seconds
|
|
134
|
+
var current = player.seek() // `current` is the current position in seconds
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### Forward
|
|
138
|
+
|
|
139
|
+
This method seeks forward the current playback position in seconds.
|
|
140
|
+
|
|
141
|
+
```js
|
|
142
|
+
player.forward() // Forward 10 seconds
|
|
143
|
+
player.forward(100) // Forward 100 seconds
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Rewind
|
|
147
|
+
|
|
148
|
+
This method rewinds the current playback position in seconds.
|
|
149
|
+
|
|
150
|
+
```js
|
|
151
|
+
player.rewind() // Rewind 10 seconds
|
|
152
|
+
player.rewind(100) // Rewind 100 seconds
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### UI Controls
|
|
156
|
+
|
|
157
|
+
This method sets the UI state if state is given, or gets current UI state.
|
|
158
|
+
|
|
159
|
+
```js
|
|
160
|
+
player.uiControls('SHOW') // Show UI
|
|
161
|
+
player.uiControls('HIDE') // Hide UI
|
|
162
|
+
player.uiControls('AUTOHIDE') // Make UI auto hide
|
|
163
|
+
var current = player.uiControls() // `current` is the current UI state
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Volume
|
|
167
|
+
|
|
168
|
+
This method sets the volume level of player on a scale from `0` to `1`, or gets the volume level.
|
|
169
|
+
|
|
170
|
+
```js
|
|
171
|
+
player.volume(0.5) // Set volume to 50%
|
|
172
|
+
var current = player.volume() // `current` is the current volume
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Mute
|
|
176
|
+
|
|
177
|
+
This method mutes the player.
|
|
178
|
+
|
|
179
|
+
```js
|
|
180
|
+
player.mute() // Mute the player
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Unmute
|
|
184
|
+
|
|
185
|
+
This method unmutes the player.
|
|
186
|
+
|
|
187
|
+
```js
|
|
188
|
+
player.unmute() // Unmute the player
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Release
|
|
192
|
+
|
|
193
|
+
This method removes the player.
|
|
194
|
+
|
|
195
|
+
```js
|
|
196
|
+
player.release() // Release the player
|
|
197
|
+
```
|