ravnur-player-public 3.3.0 → 3.3.5

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.
Files changed (5) hide show
  1. package/README.md +2 -450
  2. package/dist/RavnurMediaPlayer.min.js +1 -1
  3. package/dist/cdn/RavnurMediaPlayer.min.js +1 -1
  4. package/dist/cdn/RavnurMediaPlayer.min.js.zip +0 -0
  5. package/package.json +8 -8
package/README.md CHANGED
@@ -1,451 +1,3 @@
1
- # Ravnur Media Player Documentation
1
+ ## Visit GitHub for Ravnur Media Player Documentation
2
2
 
3
- 1. [Installation](#installation)
4
- - [Using CDN](#using-cdn)
5
- - [Add to Codebase](#add-to-codebase)
6
- - [Using private NPM registry](#using-private-npm-registry)
7
-
8
- 2. [Initialization](#initialization)
9
-
10
- 3. [Setup](#setup)
11
-
12
- 4. [Demo page](#player-demo-page)
13
-
14
- 5. [Options](#player-options)
15
-
16
- 6. [Events](#player-events)
17
-
18
- 7. [Emits](#player-emits)
19
-
20
- 8. [Methods](#player-methods)
21
-
22
- 7. [Types (Flow syntax)](#types-flow-syntax)
23
-
24
-
25
- ## 1. <a id="installation"></a>Installation
26
-
27
- ### <a id="using-cdn"></a>Using CDN
28
-
29
- Include the Ravnur Media Player script in your HTML file by adding the following CDN link in the `<head>` section:
30
-
31
- ```
32
- <script src="https://cdn.example.com/RavnurMediaPlayer.min.js"></script>
33
- ```
34
-
35
- ### <a id="add-to-codebase"></a>Add to Codebase
36
-
37
- Alternatively, you can include the Ravnur Media Player script to your project's codebase. Ensure that you include the script in your HTML file:
38
-
39
- ```
40
- <script src="path/to/RavnurMediaPlayer.min.js"></script>
41
- ```
42
-
43
- ### <a id="using-private-npm-registry"></a>Using private NPM registry
44
-
45
- You can also install Ravnur Media Player using the npm private registry. If this is the right option for you, follow the steps below:
46
-
47
- 1. Request an access token from the Ravnur administrator.
48
- 2. Generate a base64 string using the provided token.
49
-
50
- ```
51
- NPM_TOKENB64=$(echo -n '... your token here ...' | base64)
52
- ```
53
-
54
- 3. Update your `.npmrc` file as shown below. You can leave `username` and `email` blank.
55
-
56
- ```
57
- @ravnur:registry=https://ravnur.pkgs.visualstudio.com/Ravnur/_packaging/ravnur-npm/npm/registry/
58
- ; begin auth token
59
- //ravnur.pkgs.visualstudio.com/Ravnur/_packaging/ravnur-npm/npm/registry/:username=
60
- //ravnur.pkgs.visualstudio.com/Ravnur/_packaging/ravnur-npm/npm/registry/:_password=${NPM_TOKENB64}
61
- //ravnur.pkgs.visualstudio.com/Ravnur/_packaging/ravnur-npm/npm/registry/:email=
62
- //ravnur.pkgs.visualstudio.com/Ravnur/_packaging/ravnur-npm/npm/:username=
63
- //ravnur.pkgs.visualstudio.com/Ravnur/_packaging/ravnur-npm/npm/:_password=${NPM_TOKENB64}
64
- //ravnur.pkgs.visualstudio.com/Ravnur/_packaging/ravnur-npm/npm/:email=
65
- ; end auth token
66
- ```
67
- 4. Install Ravnur Player, ensuring that you specify the correct version.
68
-
69
- ```
70
- npm install @ravnur/player@^3.1.1
71
- ```
72
-
73
- 5. Include the player import in the file.
74
-
75
- ```
76
- import RavnurPlayer from '@ravnur/player';
77
- ```
78
-
79
-
80
- ## 2. <a id="initialization"></a>Initialization
81
-
82
- To use Ravnur Media Player, initiate a new instance by providing the target element and styles:
83
-
84
- ```
85
- // Replace 'yourElementId' with the ID of the HTML element where you want the player.
86
- const element = document.getElementById('yourElementId');
87
-
88
- // Object containing custom styling options (Optional)
89
- const styles = { ... }; // Player$Styles type
90
-
91
- // Initialize Ravnur Media Player
92
- const player = new RavnurMediaPlayer(element, styles);
93
- ```
94
-
95
- ## 3. <a id="setup"></a>Setup
96
-
97
- After initialization, set up the player with a video source and additional options.
98
-
99
- ```
100
- // Object containing video source information. See Main Types section below.
101
- let video = { ... }; // Player$Source type
102
-
103
- // Object containing player options
104
- let options = { ... };
105
-
106
- player.setup(video, options);
107
- ```
108
-
109
- ## <a id="player-demo-page"></a>Demo page
110
-
111
- https://strmsdemo.z13.web.core.windows.net/
112
-
113
- ## <a id="player-options"></a>Options
114
-
115
- | Property | Default value | Type | Description |
116
- | :--- | :----: | :---: | :--- |
117
- | logger | `null` | `Player$Logger` | Custom logger |
118
- | loggerLevel | `2` | `number` | This parameter sets the severity of logs. |
119
- | i18n | | `Player$Translation` | Custom translations object |
120
- | showPlay | `true` | `boolean` | Shows play button |
121
- | showProgress | `true` | `boolean` | Shows progress bar |
122
- | showVolume | `true` | `boolean` | Shows volume control |
123
- | showFullScreen | `true` | `boolean` | Shows full screen button |
124
- | showTheaterMode | `false` | `boolean` | Shows theater mode button |
125
- | showClosedCaptions | `true` | `boolean` | Shows captions |
126
- | showTOC | `true` | `boolean` | Shows chapters |
127
- | showAnnotations | `true` | `boolean` | Shows annotations |
128
- | showQuality | `true` | `boolean` | Shows quality levels |
129
- | showAudioTracks | `true` | `boolean` | Shows audio tracks |
130
- | showPoster | `true` | `boolean` | Shows poster image |
131
- | showPlaceholder | `true` | `boolean` | Adds play button as overlay |
132
- | showPlaybackRate | `true` | `boolean` | Shows playback rate option in settings |
133
- | showForward | `true` | `boolean` | Shows 10 sec forward button |
134
- | showBackward | `true` | `boolean` | Shows 10 sec backward button |
135
- | showSettings | `true` | `boolean` | Shows settings button |
136
- | showDownload | `true` | `boolean` | Shows download button |
137
- | showTitle | `true` | `boolean` | Shows media title |
138
- | showNextFrame | `false` | `boolean` | Shows next frame button |
139
- | showPrevFrame | `false` | `boolean` | Shows prev frame button |
140
- | showCCLayout | `true` | `boolean` | Enables caption layout option in CC settings |
141
- | showPrev? | `false` | `boolean` | Shows next track button in full screen mode |
142
- | showNext? | `false` | `boolean` | Shows prev track button in full screen mode |
143
- | showCrawl? | `false` | `boolean` | Shows crawl text |
144
- | crawl | `null` | `Player$CrawlOptions` | Crawl text configurations |
145
- | isProgressLiveStream | `false` |`boolean` | If `true`, disables progressbar click event and current time indicatior |
146
- | useMux | `false` | `boolean` | Enables MUX |
147
- | showSubtitles | `false` | `boolean` | Disables captions build in manifest |
148
- | isAudio | `false` | `boolean` | Turns on players audio mode |
149
- | timecode | `0` | `number` | Sets time code value |
150
- | frameRate | `23.976` | `number` | Sets frame rate value |
151
- | clip | `undefined` | `[number, number]` | Plays part of the media |
152
- | autoStart | `false` | `boolean` | Enables autoplay |
153
- | startTime | `null` | `number`| Sets media start time |
154
- | endTime | `null` | `number` | Sets media end time |
155
- | useNativeControls | `false` | `boolean` | Removes all elements from the player and allows only native controls |
156
- | useOriginTimeForPreview | `true` | `boolean` | Enables origin time frame for preview |
157
- | playlistmode | `auto` | `Player$PlaylistMode` | Controls playlist position |
158
- | plalistAutoGoNext | `true` | `boolean` | Plays next media when current ended |
159
- | playlistitle | `''` | `string` | Playlist title value |
160
- | playlistforcepoint | `0` | `number` | Minimum width in pixels. If the player is resized to a width lower than this value, the playlist mode will be changed to 'bottom'.|
161
- | playLoop | `false` | `boolean` | Automatically starts playing from the beginning when the media has ended. |
162
- | hideplaylist | `false` | `boolean` | Hides playlist media previews |
163
- | showExtensions | `true` | `boolean` | Shows custom extensions |
164
- | alwaysShowExtensions | `true` | `boolean` | Keeps showing extensions even if media is playing |
165
- | extensionsVisibilityTimeout | `2000` ms on the desktop and `4000` ms on mobile | `number` | Hides extensions if media is playing after this time. |
166
- | skipDelta | `10` | `number` | Value in seconds which is used for media skip forward/backward functionality |
167
- | keyboardListeners | `{}` | `{ [keyCode]: (player) => void }` | List of key codes with custom handle functions |
168
- | globalKeyboardListeners | `false` | `boolean` | Controls whether keyboard events are listened to globally across the entire webpage or just within the specific player element |
169
- | isHandlingKeyboardEvents | `true` | `boolean` | Enables keyboard event handling |
170
- | bufferingTimeout | `200` | `number` | Specifies the delay, in milliseconds, before displaying the processing spinner during buffering |
171
- | hls | `{ maxFragLookUpTolerance: 0.001, maxMaxBufferLength: 60 }` | `Player$HlsOptions` | Hls.js options |
172
- | mux | `{ page_type: 'watchpage', player_name: 'RavnurPlayer', player_version: '1.0.0', video_stream_type: 'on-demand', }` | `Player$MuxOptions` | Mux options |
173
- | isMobile | `true` on mobile devices | `boolean` | Enables mobile mode in the player |
174
- | hlsjsURL | `https://cdn.jsdelivr.net/ hls.js/latest/hls.min.js` | `string` | URL to specific hls.js version |
175
- | flashPath | `/` | `string` | Path to specific Flash version |
176
- | muxURL | `https://src.litix.io/ core/2/mux.js` | `string` | Path to specific Mux version |
177
- | savePlayTime | `false` | `boolean` | If enabled, the player will save the last watched time in the browser's local storage. This allows the player to resume playback from the saved time during the next visit. |
178
- | aesToken | `undefined` | `string` | AES Token value |
179
- | playbackRates | `undefined` | Array of numbers | Custom playback rate options: an array of numbers from 0.01 to 5. For example, `[0.25, 0.50, 1, 1.75]`. Option 1 is always present as "Standard", and option 5 is hidden for audio-only media.|
180
-
181
- ## <a id="player-events"></a>Events
182
-
183
- You can listen to player events using the `player.on()` method. Additionally, the player supports all HTMLMediaElement events. For details, refer to the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
184
-
185
-
186
- | Name | Data | Description |
187
- | :--- | :----: | :--- |
188
- |audiotrackswitched| `null` | Triggered when the player changes audio tracks |
189
- |handle-play-clicked|`null`|Triggered when the play button is clicked|
190
- |theaterchanging|`null`|Triggered when theater mode is changed|
191
- |fullscreenchanging|`boolean`|Triggered when full-screen mode changes|
192
- |toclang|`string`|Triggered when cue points language changes|
193
- |cclang|`string`|Triggered when captions language changes|
194
- |annotationslang|`string`|Triggered when annotations language changes|
195
- |qualitychange|`string`|Triggered when the quality level changes|
196
- |resizeplayer| `{ width, height, outerWidth }` |Triggered when the player size changes|
197
- |prevtrack|`null`|Triggered when switching to the previous track in the playlist|
198
- |nexttrack|`null`|Triggered when switching to the next track in the playlist|
199
- |mobiletouch|`null`|Triggered on mobile touch events|
200
- |downloadRequested|`string`|Triggered when someone requests media download, returns download URL|
201
- |statechanged|`Player$State`|Triggered when the player state changes|
202
- |cclayoutchange|`{ mode, fontSize }`|Triggered when closed captions layout changes|
203
- |captionschange|`Player$TimeDataSource`|Triggered when captions change|
204
- |changeplaylistmode|`bottom` \| `right`|Triggered when the player playlist mode changes|
205
- |changesource|`Player$Source`|Triggered when the current media source changes|
206
-
207
-
208
- ## <a id="player-emits"></a>Emits
209
-
210
- You have the option to manually trigger these events. For instance, you can use the following example: `player.bus.emit('fullscreenchanging', false);`
211
-
212
- | Name | Payload | Description |
213
- | :--- | :----: | :--- |
214
- |fullscreenchanging|`boolean`|Alters full-screen mode|
215
- |toclang|`string`|Modifies language for cue points|
216
- |cclang|`string`|Modifies language for captions|
217
- |annotationslang|`string`|Modifies language for annotations|
218
- |prevtrack|`null`|Switches to the previous media in the playlist|
219
- |nexttrack|`null`|Switches to the next media in the playlist|
220
- |changeplaylistmode|`bottom` \| `right`|Changes the player's playlist mode|
221
- |changesource|`Player$Source`|Changes the current media source|
222
-
223
- ## <a id="player-methods"></a>Methods
224
-
225
- Example of usage: `player.controller.getCurrentTime();`.
226
-
227
- | Method | Payload | Return | Description |
228
- | :--- | :----: | :----: | :--- |
229
- |getCurrentTime| - | `number` | Retrieves the current time of the media in seconds|
230
- |setCurrentTime| `number` | - | Sets the player's playback time|
231
- |isPaused| - | `boolean` | Checks if the media is currently paused|
232
- |isEnded| - | `boolean` | Checks if the media has reached the end|
233
- |isMuted| - | - | Checks if the player is currently muted|
234
- |play| - | `Promise` | Initiates playback of the media. Returns a `Promise` resolved when playback begins|
235
- |pause| - | - | Pauses the current playback|
236
- |prevFrame| - | - | Steps to the previous frame in the media|
237
- |nextFrame| - | - | Steps to the next frame in the media|
238
- |getDuration| - | `number` | Retrieves the duration of the media in seconds|
239
- |setMuted| `boolean` | - | Adjusts the muted state of the player|
240
- |getVolume| - | `number` | Retrieves the current volume level|
241
- |setVolume| `number` | - | Sets the volume level of the player|
242
- |getLevels| - | Array of objects | Retrieves the available quality levels|
243
- |getLevel| - | Object | Retrieves the current quality level|
244
- |setLevel| Object | - | Sets the quality level of the media|
245
- |isMultiQuality| - | `boolean` | Checks if the media has multiple quality options|
246
- |isMultiAudioTracks| - | `boolean` | Checks if the media has multiple audio tracks|
247
- |getAudioTracks| - | Array of objects | Retrieves the available audio tracks|
248
- |getAudioTrack| - | `number` | Retrieves the index of the current audio track|
249
- |setAudioTrack| `number` | - | Sets the current audio track by index|
250
- |load| `Player$Source` | - | Loads a new media source|
251
- |getBufferedPercent| - | `number` | Retrieves the current buffered percentage|
252
- |getElement| - | HTML element | Retrieves the player element|
253
- |_getFrameDuration| - | `number` | Retrieves the current frame duration|
254
- |refreshCrawlExtension|`crawl: Player$CrawlOptions, visibility: boolean`||Refreshes crawl options in the player|
255
- |setPlaybackRate|`number`||Sets the current playback rate|
256
-
257
-
258
- ## <a id="types-flow-syntax"></a>Types (Flow syntax)
259
-
260
- ```
261
- type Player$LoggerFn = (...args: Array<mixed>) => void
262
-
263
- type Player$Logger = {
264
- debug : Player$LoggerFn,
265
- log : Player$LoggerFn,
266
- warn : Player$LoggerFn,
267
- error : Player$LoggerFn
268
- }
269
-
270
- type Player$CrawlOptions = {
271
- text: string,
272
- speed: number,
273
- backgroundColor: string,
274
- textColor: string
275
- }
276
-
277
- type Player$PlaylistMode = 'bottom' | 'right' | 'auto';
278
-
279
- type Player$HlsOptions = {
280
- maxFragLookUpTolerance: number,
281
- maxMaxBufferLength: number
282
- }
283
-
284
- type Player$MuxOptions = {
285
- property_key: string,
286
- page_type: '' | 'watchpage' | 'iframe',
287
- viewer_user_id: string,
288
- experiment_name: string,
289
- sub_property_id: string,
290
- player_name: 'RavnurPlayer',
291
- player_version: string,
292
- player_init_time: number | null | '',
293
- video_id: string,
294
- video_title: string,
295
- video_series: string,
296
- video_producer: string,
297
- video_content_type: '' | 'short' | 'movie' | 'episode' | 'clip' | 'trailer' | 'event',
298
- video_language_code: string,
299
- video_variant_name: string,
300
- video_variant_id: string,
301
- video_duration: number | null | '',
302
- video_stream_type: 'live' | 'on-demand',
303
- video_encoding_variant: string,
304
- video_cdn: string
305
- }
306
-
307
- type Player$SourceStatus = 0 | 1 | 2;
308
-
309
- type Player$TimeDataSource = {
310
- src: string,
311
- label: string,
312
- srclang: string,
313
- default?: boolean,
314
- type?: 'json' | 'vtt',
315
- state?: Player$SourceStatus
316
- }
317
-
318
- type Player$Source = {
319
- id: string;
320
- src: string,
321
- type: string,
322
- title: string,
323
- annotations?: Player$TimeDataSource[],
324
- chapters?: Player$TimeDataSource[],
325
- cc?: Player$TimeDataSource[],
326
- preview?: ?string,
327
- poster?: ?string,
328
- thumbnails?: ?string,
329
- clip?: ?[number, number] // [ 10, 300 ] sec
330
- }
331
-
332
- type Player$CCColor = '#F44336'
333
- | '#9C27B0' | '#3F51B5' | '#2196F3' | '#4CAF50'
334
- | '#FFEB3B' | '#FF9800' | '#795548' | '#9E9E9E' | '#FFF' | '#000'
335
-
336
- type Player$CCFontSize = '75%' | '100%' | '125%' | '150%' | '200%'
337
-
338
- type Player$CCFontFamily = '"Courier New", Courier, "Nimbus Mono L", "Cutive Mono", monospace'
339
- | '"Times New Roman", Times, Georgia, Cambria, "PT Serif Caption", serif'
340
- | '"Deja Vu Sans Mono", "Lucida Console", Monaco, Consolas, "PT Mono", monospace'
341
- | 'Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, sans-serif'
342
-
343
- type Player$CCLocation = 'over' | 'below'
344
-
345
- type Player$StateCC = {
346
- color: Player$CCColor,
347
- bgcolor: Player$CCColor,
348
- fontSize: Player$CCFontSize,
349
- fontFamily: Player$CCFontFamily,
350
- location: Player$CCLocation,
351
- lang: ?string,
352
- sources: Player$TimeDataSource[],
353
- loading?: boolean,
354
- timedata: Player$TimeData[],
355
- timedataLang: string
356
- }
357
-
358
- type Player$StateTOC = {
359
- lang: ?string,
360
- sources: Player$TimeDataSource[],
361
- timedata: Player$TimeData[],
362
- timedataLang: string
363
- }
364
-
365
- type Player$State = {
366
- isFullScreen: boolean,
367
- isTheaterMode: boolean,
368
- cc: Player$StateCC,
369
- toc: Player$StateTOC
370
- }
371
-
372
- type Player$Styles = {
373
- accentColor: string,
374
- mainColor: string,
375
- submenuBgColor: string,
376
- submenuColor: string,
377
- chaptersBubbleColor: string,
378
- pltHeight: string,
379
- rplaylistHeight: string
380
- }
381
-
382
- type Player$TimeData = {
383
- id: string,
384
- from: number,
385
- to: number,
386
- text: string,
387
- title?: ?string
388
- }
389
-
390
- type Player$Translation = {
391
- 'fullscreen': string,
392
- 'exit-fullscreen': string,
393
- 'theater': string,
394
- 'exit-theater': string,
395
- 'play': string,
396
- 'pause': string,
397
- 'replay': string,
398
- 'standard-playbackrate': string,
399
- 'forward': string,
400
- 'backward': string,
401
- 'prevframe': string,
402
- 'nextframe': string,
403
- 'annotations': string,
404
- 'quality': string,
405
- 'audio-track': string,
406
- 'playback-rate': string,
407
- 'settings': string,
408
- 'buffering': string,
409
- 'cc': string,
410
- 'chapters': string,
411
- 'back': string,
412
- 'settings-fontcolor': string,
413
- 'settings-fontsize': string,
414
- 'settings-fontfamily': string,
415
- 'settings-background': string,
416
- 'settings-captionlocations': string,
417
- 'help': string,
418
- 'download': string,
419
- 'video-only': string,
420
- 'video-and': string,
421
- 'language': string,
422
- 'unapproved-source': string,
423
- 'translate': string,
424
- 'translating': string,
425
- 'monoserif' : string,
426
- 'propserif' : string,
427
- 'monosans' : string,
428
- 'propssans' : string,
429
- 'cc-location-over' : string,
430
- 'cc-location-below' : string,
431
- 'red' : string,
432
- 'purple' : string,
433
- 'indigo' : string,
434
- 'blue' : string,
435
- 'green' : string,
436
- 'yellow' : string,
437
- 'orange' : string,
438
- 'brown' : string,
439
- 'grey' : string,
440
- 'white' : string,
441
- 'black' : string,
442
- 'help-bacward' : string,
443
- 'help-play' : string,
444
- 'help-skip' : string,
445
- 'help-volume' : string,
446
- 'help-esc' : string,
447
- 'no-video' : string,
448
- 'no-flash' : string,
449
- 'playlist-count-of': string
450
- }
451
- ```
3
+ You can find the detailed instructions at the following link: [RavPlayer Repository](https://github.com/Ravnur-Inc/ravplayer)