QMediaPlayer is an app extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.
This work is currently in alpha and there are expected changes while things get worked out.
WARNING
This app extension has been updated to work with changes that will be released with
@quasar/app - 1.0.0-beta.9. If you have not upgraded to1.0.0-beta.9this app extension will not work.
If you have installed before @quasar/app - 1.0.0-beta.9 then follow these before upgrading Quasar.
- Remove:
quasar ext -r @quasar/qmediaplayer - Upgrade:
yarn upgrade - Re-install:
quasar ext add @quasar/qmediaplayer
In your Quasar project:
quasar ext add @quasar/qmediaplayer
Can be found here.
Can be found here.
TBD
We need help translating the language files. They are all currently using English. If you know another language, please PR and help us out.
| Vue Property | Type | Mode | Description |
|---|---|---|---|
| type | String | Both | ['video','audio'] This determines the type of player. (Default: 'video') |
| color | String | Both | One from Quasar Color Palette. It determines the color of the MediaPlayer controls. (Default: 'white') |
| mobile-mode | Boolean | Video | In normal mode, the controls show/hide with mouse movements. When set to true, the controls' visibility is controlled by touch/click. (Default: false) |
| sources | Array | Both | Required. This is an array of one or more objects, that looks like this: { src: 'https://your-server/your-video.mov', type: 'video/mp4' } |
| poster | String | Video | The poster image to display before the video is started. |
| tracks | Array | Video | This is an array of one or more objects, that looks like this: { src: 'https://your-server//path-to-subtitles-en.vtt', kind: 'subtitles', srclang: 'en', label: 'English } |
| track-language | String | Video | A value that corresponds to the 'label' attribute of the 'tracks' property. This will be the default language. |
| preload | String | Both | ['none', 'metadata', 'auto'] Provides a hint to the browser about what the author thinks will lead to the best user experience. (Default: 'metadata'). |
| dense | Boolean | Both | When true displays controls window on one line. |
| dark | Boolean | Both | When component is rendered on a dark background. |
| autoplay | Boolean | Both | Automatically start video/audio when it is ready to play. (Default: false) |
| cross-origin | String,null | Both | [null, 'anonymous', 'use-credentials'] |
| volume | Number | Both | A value from 0-100 (as a percentage). (Default: 60) |
| muted | Boolean | Both | If the player should be muted. (Default: false) |
| show-big-play-button | Boolean | Video | Show/hide the Big Play Button. (Default: true) |
| show-spinner | Boolean | Both | If the spinner should be displayed while video/audio is loading. (Default: true) |
| controls-display-time | Number | Video | The amount of idle time in milliseconds to wait before hiding the controls (default 2000). This is applied when the mouse cursor is within the QMediaPlayer window but has not moved. |
| playback-rates | Array | Video | This is an array of one or more objects, that look like this: { label: '.5x', value: 0.5 }. Note: The default playbackRates include 0.5, 1, 1.5 and 2.0." |
| playback-rate | Number | Video | Corresponds to the value in playback-rates. |
| background-color | String | Both | One from Quasar Color Palette. It determines the background color of the MediaPlayer. (Default: 'black') |
cross-origin:
Whether to use CORS for fetching assets.
- anonymous - CORS requests for this element will not have the credentials flag set.
- use-credentials - CORS requests for this element will have the credentials flag set; this means the request will provide credentials.
- null - do not use CORS.
preload:
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
- none: Indicates that the audio should not be preloaded.
- metadata: Indicates that only audio metadata (e.g. length) is fetched.
- auto: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.
| Vue Method | Mode | Description |
|---|---|---|
| showControls() | Video | Show the controls. |
| hideControls() | Video | Hide the controls. |
| toggleControls() | Video | Toggle the controls. |
| togglePlay() | Both | Toggles between play/pause states. |
| toggleMuted() | Both | Toggles between mute/unmute states.. |
| toggleFullscreen() | Video | Toggle fullscreen mode. |
| setCurrentTime(seconds) | Both | Set the current time of the video/audio player (in seconds). |
| setVolume(percent) | Both | Sets the volume as a percent (0-100). |
| Vue Event | Mode | Description |
|---|---|---|
| @loaded() | Both | Emitted when the media has been loaded. |
| @ready() | Both | Emitted when the media is ready to play. You cannot play/pause or setCurrentTime before this event. |
| @duration(seconds) | Both | Emitted when the duration of the media has been determined. |
| @ended() | Both | Emitted when the media has finished playing. |
| @error(MediaError) | Both | Emitted when the is a media error. |
| @paused() | Both | Emitted when the media is paused. |
| @playing() | Both | Emitted when the media starts playing. This will also emit after a pause or a wait. |
| @timeupdate(curTime, remaining) | Both | Emitted wenever there is a time update (during play). |
| @fullscreen(true/false) | Video | Emitted when entering/exiting fullscreen mode. |
| @waiting() | Both | Emitted when the media player goes into a wait state (typically waiting while downloading) |
| @showControls(true/false) | Video | Emitted when the Controls are toggled (show/hide). |
| @volume(percent) | Both | Emitted when the volume changes. |
| @muted(true/false) | Both | Emitted when the mute changes. |
| Vue Slots | Mode | Description |
|---|---|---|
| old-browser | Both | When the browser does not support HTML5 (or has Javascript turned off). |
| overlay | Both | User to overlay any HTML over the media window. |
| error-window | Both | Used to display an error. |
| controls | Both | With this slot all of the controls can be replaced. |
| spinner | Both | With this slot the loading spinner can be replaced. |
| big-play-button | Video | With this slot the Big Play Button can be replaced. |
| display-time | Both | With this slot the display time can be replaced. |
| position-slider | Both | With this slot the positioning slider can be replaced. |
| duration-time | Both | With this slot the duration time can be replaced. |
| play | Both | With this slot the play button can be replaced. |
| volume | Both | With this slot the volume mute/unmute button can be replaced. |
| volume-slider | Both | With this slot the volume slider can be replaced. |
| settings | Video | With this slot the Settings icon can be replaced. |
| settings-menu | Video | With this slot the Settings Menu can be replaced. |
| fullscreen | Video | With this slot the Fullscreen icon can be replaced. |