@mindedge/vuetify-player 0.3.0 → 0.4.0

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 (12) hide show
  1. package/README.md +88 -50
  2. package/package.json +1 -1
  3. package/src/components/Media/CaptionsMenu.vue +260 -94
  4. package/src/components/Media/Html5Player.vue +595 -349
  5. package/src/components/Media/PlaylistMenu.vue +40 -42
  6. package/src/components/Media/SettingsMenu.vue +98 -0
  7. package/src/components/Media/YoutubePlayer.vue +5 -1
  8. package/src/components/VuetifyPlayer.vue +214 -28
  9. package/src/i18n/en-US.js +10 -0
  10. package/src/i18n/es-ES.js +16 -3
  11. package/src/i18n/i18n.js +6 -1
  12. package/src/i18n/sv-SE.js +12 -0
package/README.md CHANGED
@@ -11,7 +11,9 @@ An accessible, localized, full featured media player with Vuetifyjs
11
11
  - [Define ads / preroll / postroll](#the-ads-array)
12
12
  - [Supported Attributes](#supported-vuetifyplayer-attributes)
13
13
  - [Supported Events](#supported-vuetifyplayer-events)
14
+ - [Supported Slots](#supported-vuetifyplayer-slots)
14
15
  - [Captions](#captions)
16
+ - [Supported Keyboard Shortcuts](#supported-keyboard-shortcuts)
15
17
  - [License](#license)
16
18
 
17
19
  ---
@@ -190,59 +192,80 @@ See [Full media `src` structure for where the ads array is placed](#full-media-s
190
192
 
191
193
  ## Supported `<VuetifyPlayer>` Attributes
192
194
 
193
- | Attribute Name | Datatype | Allowed Values | Default | Description |
194
- | ------------------------- | --------- | -------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
195
- | `language` | `String` | en-US \| See BCP 47 Spec | "en-US" | Defines which locale the video player controls will load in |
196
- | `src` | `Object` | See [src attribute](#the-src-attribute) | {} | A single media source |
197
- | `playlist` | `Array ` | See [playlist attribute](#the-playlist-attribute) | [] | A collection of media source(s) |
198
- | `type` | `String` | video \| audio \| image | "video" | In audio mode the player has a max-height of 40px |
199
- | `autoplay` | `Boolean` | true \| false | false | Autoplay on load. It's in the spec but DON'T USE THIS |
200
- | `autopictureinpicture` | `Boolean` | true \| false | false | Start with picture in picture mode |
201
- | `controls` | `Boolean` | true \| false | true | Show video controls. When false only play/pause allowed but clicking on the video itself |
202
- | `controlslist` | `String` | nodownload nofullscreen noremoteplayback | "nodownload noremoteplayback" | Space separated string per <video>. Allowed 'nodownload nofullscreen noremoteplayback' |
203
- | `crossorigin` | `String` | anonymous \| use-credentials | "anonymous" | Indicates whether to use CORS to fetch the related video |
204
- | `disablepictureinpicture` | `Boolean` | true \| false | true | Shows the picture in picture button |
205
- | `disableremoteplayback` | `Boolean` | true \| false | true | Shows the remote playback button but functionality does not exist when clicked |
206
- | `height` | `String` | `css pixel value` | "auto" | The players height |
207
- | `width` | `String` | `css pixel value` | "100%" | The players width |
208
- | `rewind` | `Boolean` | true \| false | true | Enabled the rewind 10s button |
209
- | `loop` | `Boolean` | true \| false | false | Loop the video on completion |
210
- | `muted` | `Boolean` | true \| false | false | Start the video muted |
211
- | `playsinline` | `Boolean` | true \| false | false | Force inline & disable fullscreen |
212
- | `poster` | `String` | `image url` | "" | Overridden with the playlist.poster if one is set there |
213
- | `preload` | `String` | "none" \| "metadata" \| "auto" \| `_empty string_` | "" | Empty string = `auto` Provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. |
214
- | `captionsmenu` | `Boolean` | true \| false | true | Show the captions below the video |
215
- | `playlistmenu` | `Boolean` | true \| false | true | Show the playlist menu if there's multiple videos |
216
- | `playlistautoadvance` | `Boolean` | true \| false | true | Play the next source group |
217
- | `playbackrates` | `Array` | [`array of numbers`] | [0.5, 1, 1.5, 2] | Default playback speeds. Anything below 0.25 and above 4 will make cause audio distortion |
195
+ | Attribute Name | Datatype | Allowed Values | Default | Description |
196
+ | ------------------------------ | --------- | -------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
197
+ | `language` | `String` | en-US \| See BCP 47 Spec | "en-US" | Defines which locale the video player controls will load in |
198
+ | `src` | `Object` | See [src attribute](#the-src-attribute) | {} | A single media source |
199
+ | `playlist` | `Array ` | See [playlist attribute](#the-playlist-attribute) | [] | A collection of media source(s) |
200
+ | `type` | `String` | auto \| video \| audio \| image | "auto" | In audio mode the player has a max-height of 40px |
201
+ | `autoplay` | `Boolean` | true \| false | false | Autoplay on load. It's in the spec but DON'T USE THIS |
202
+ | `autopictureinpicture` | `Boolean` | true \| false | false | Start with picture in picture mode |
203
+ | `controls` | `Boolean` | true \| false | true | Show video controls. When false only play/pause allowed but clicking on the video itself |
204
+ | `controlslist` | `String` | nodownload nofullscreen noremoteplayback | "nodownload noremoteplayback" | Space separated string per <video>. Allowed 'nodownload nofullscreen noremoteplayback' |
205
+ | `crossorigin` | `String` | anonymous \| use-credentials | "anonymous" | Indicates whether to use CORS to fetch the related video |
206
+ | `disablepictureinpicture` | `Boolean` | true \| false | true | Shows the picture in picture button |
207
+ | `disableremoteplayback` | `Boolean` | true \| false | true | Shows the remote playback button but functionality does not exist when clicked |
208
+ | `height` | `String` | `css pixel value` | "auto" | The players height |
209
+ | `width` | `String` | `css pixel value` | "100%" | The players width |
210
+ | `rewind` | `Boolean` | true \| false | true | Enabled the rewind 10s button |
211
+ | `loop` | `Boolean` | true \| false | false | Loop the video on completion |
212
+ | `muted` | `Boolean` | true \| false | false | Start the video muted |
213
+ | `playsinline` | `Boolean` | true \| false | false | Force inline & disable fullscreen |
214
+ | `poster` | `String` | `image url` | "" | Overridden with the playlist.poster if one is set there |
215
+ | `preload` | `String` | "none" \| "metadata" \| "auto" \| `_empty string_` | "" | Empty string = `auto` Provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. |
216
+ | `captionsmenu` | `Boolean` | true \| false | true | Allow the captions below the video |
217
+ | `playlistmenu` | `Boolean` | true \| false | true | Show the playlist menu if there's multiple videos |
218
+ | `playlistautoadvance` | `Boolean` | true \| false | true | Play the next source group |
219
+ | `playbackrates` | `Array` | [`array of numbers`] | [0.5, 1, 1.5, 2] | Default playback speeds. Anything below 0.25 and above 4 will make cause audio distortion |
220
+ | `captions-expanded` | `Boolean` | true \| false | undefined | Supports `.sync`. The initial state of the captions transcript being expanded. |
221
+ | `captions-hide-expand` | `Boolean` | true \| false | true | Show / allow the captions transcript expand button for users |
222
+ | `captions-paragraph-view` | `Boolean` | true \| false | undefined | Supports `.sync`. The initial state of the captions transcript paragraph view |
223
+ | `captions-hide-paragraph-view` | `Boolean` | true \| false | false | Allow the captions transcript paragraph view for users |
224
+ | `captions-autoscroll` | `Boolean` | true \| false | false | Supports `.sync`. The initial state for the captions transcript autoscroll state |
225
+ | `captions-hide-autoscroll` | `Boolean` | true \| false | undefined | Allow users to enable / disable captions transcript autoscrolling |
226
+ | `captions-hide-close` | `Boolean` | true \| false | false | Allow users to show / hide the captions transcript box |
227
+ | `captions-visible` | `Boolean` | true \| false | false | Supports `.sync`. The initial state for the captions transcript visibility |
218
228
 
219
229
  ## Supported `<VuetifyPlayer>` Events
220
230
 
221
- | Event name | Returns | When it's triggered |
222
- | -------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------- |
223
- | `abort` | `Event` | Download interrupted |
224
- | `canplay` | `Event` | Playback can start |
225
- | `canplaythrough` | `Event` | Playback can continue and should not be interrupted. Readstate is 3 |
226
- | `emptied` | `Event` | The network connection is down |
227
- | `ended` | `Event` | When playback has stopped because the end of the media was reached |
228
- | `error` | `Event` | A network error occurred during the download |
229
- | `loadeddata` | `Event` | When the frame at the current playback position of the media has finished loading; often the first frame |
230
- | `loadedmetadata` | `Event` | When the metadata has been loaded |
231
- | `play` | `Event` | The media has received a request to start playing |
232
- | `pause` | `Event` | Playback has been suspended |
233
- | `progress` | `Event` | The progress event is fired periodically as the browser loads a resource. |
234
- | `seeking` | `Event` | Playback has moved to a new location |
235
- | `timeupdate` | `Object` | The current time was changed. Object contains { event: Event, current_percent: Number } |
236
- | `ratechange` | `Number` | The playback speed multiplier |
237
- | `stalled` | `Event` | The browser tried to download but has not received data yet |
238
- | `volumechange` | `Number` | The volume or muted button changed. Value from 0.0 to 1 |
239
- | `waiting` | `Event` | Pause playback to download more data |
240
- | `click:fullscreen` | `true` \| `false` | When the fullscreen button is clicked. true on fullscreen, false on exiting fullscreen |
241
- | `click:pictureinpicture` | `true` \| `false` | When the picture-in-picture button is clicked. true on enabled, false on disabled |
242
- | `click:captions-expand` | `true` \| `false` | When the expand captions button is clicked. true on expanded, false on collapsed |
243
- | `click:captions-paragraph` | `true` \| `false` | When the view as paragraph button is clicked. true when viewing as a paragraph, false when viewing as timed captions |
244
- | `mouseover` | `MouseEvent` | Mouse over the media |
245
- | `mouseout` | `MouseEvent` | Mouse left the media |
231
+ | Event name | Returns | When it's triggered |
232
+ | -------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------- |
233
+ | `abort` | `Event` | Download interrupted |
234
+ | `canplay` | `Event` | Playback can start |
235
+ | `canplaythrough` | `Event` | Playback can continue and should not be interrupted. Readstate is 3 |
236
+ | `emptied` | `Event` | The network connection is down |
237
+ | `ended` | `Event` | When playback has stopped because the end of the media was reached |
238
+ | `error` | `Event` | A network error occurred during the download |
239
+ | `load` | `Event` | The media is being initialized and loaded |
240
+ | `loadeddata` | `Event` | When the frame at the current playback position of the media has finished loading; often the first frame |
241
+ | `loadedmetadata` | `Event` | When the metadata has been loaded |
242
+ | `play` | `Event` | The media has received a request to start playing |
243
+ | `pause` | `Event` | Playback has been suspended |
244
+ | `progress` | `Event` | The progress event is fired periodically as the browser loads a resource. |
245
+ | `seeking` | `Event` | Playback has moved to a new location |
246
+ | `timeupdate` | `Object` | The current time was changed. Object contains { event: Event, current_percent: Number } |
247
+ | `ratechange` | `Number` | The playback speed multiplier |
248
+ | `stalled` | `Event` | The browser tried to download but has not received data yet |
249
+ | `volumechange` | `Number` | The volume or muted button changed. Value from 0.0 to 1 |
250
+ | `waiting` | `Event` | Pause playback to download more data |
251
+ | `mouseover` | `MouseEvent` | Mouse over the media |
252
+ | `mouseout` | `MouseEvent` | Mouse left the media |
253
+ | `click:fullscreen` | `true` \| `false` | When the fullscreen button is clicked. true on fullscreen, false on exiting fullscreen |
254
+ | `click:pictureinpicture` | `true` \| `false` | When the picture-in-picture button is clicked. true on enabled, false on disabled |
255
+ | `click:captions-expand` | `true` \| `false` | When the expand captions button is clicked. true on expanded, false on collapsed |
256
+ | `click:captions-paragraph-view` | `true` \| `false` | When the view as paragraph button is clicked. true when viewing as a paragraph, false when viewing as timed captions |
257
+ | `click:captions-autoscroll` | `true` \| `false` | When the autoscroll captions button is clicked. true on autoscrolling otherwise false |
258
+ | `click:captions-close` | `true` \| `false` | When the c;pse captions button is clicked. true on closed, false on visible |
259
+ | `update:captions-expanded` | `true` \| `false` | When the captions expand state is updated |
260
+ | `update:captions-paragraph-view` | `true` \| `false` | When the captions paragraph-view state is updated |
261
+ | `update:captions-autoscroll` | `true` \| `false` | When the captions autoscroll state is updated |
262
+ | `update:captions-visible` | `true` \| `false` | When the captions visible state is updated |
263
+
264
+ ## Supported `<VuetifyPlayer>` Slots
265
+
266
+ | Slot name | Attributes | Description |
267
+ | ----------- | ---------- | --------------------------------------------------------------------------- |
268
+ | `no-source` | `none` | Displayed over the media skeleton loader when no media source is configured |
246
269
 
247
270
  ## Captions
248
271
 
@@ -264,6 +287,21 @@ This text will show up on a new line in the player.
264
287
  sentence here to break it up
265
288
  ```
266
289
 
290
+ ## Supported Keyboard Shortcuts
291
+
292
+ | Key | Action |
293
+ | --------------- | ----------------------- |
294
+ | `k` | Toggle play / pause |
295
+ | `m` | Toggle mute |
296
+ | `{Left Arrow}` | Rewind 5 seconds |
297
+ | `{Right Arrow}` | Fast forward 5 seconds |
298
+ | `j` | Rewind 10 seconds |
299
+ | `l` | Fast forward 10 seconds |
300
+ | `{Up Arrow}` | Increase volume by 10% |
301
+ | `{Down Arrow}` | Decrease volume by 10% |
302
+ | `f` | Toggle fullscreen |
303
+ | `c` | Toggle closed captions |
304
+
267
305
  ## License
268
306
 
269
307
  ### MIT License
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mindedge/vuetify-player",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "private": false,
5
5
  "description": "Accessible, localized, full featured media player with Vuetifyjs",
6
6
  "author": "Jacob Rogaishio",