If you are looking for QMediaPlayer v2.+ (with Quasar v2/Vue v3 support) look into the
nextbranch. For v2.+ documentation, go here.
- /ui - standalone npm package (go here for more information)
- /app-extension - Quasar app extension
- /demo - docs, demo and examples project
- live demo - live docs, demo and examples
If you fork or download this project, make sure you have the Quasar CLI globally installed:
$ npm i -g @quasar/cli
The workflow to build the demo, on a fresh project, is as follows:
$ cd ui
$ yarn
$ yarn build
$ cd ../demo
$ yarn
$ quasar dev
We need help translating the language files. They are all currently using English. If you know another language, please PR and help us out.
- English
- German/Deutsch (@mstaack/@smolinari)
- Polish/Polski (@kubawolanin)
- Chinese/中文 (@songzhi)
- Dutch (stefanvanherwijnen)
- Čeština (@valasek)
- Slovenčina (@valasek)
- Português (BR) (TobyMosque)
- 中文(繁體) (618457)
- Română (@pdanpdan/@rstoenescu)
- Slovenski Jezik (@borutjures)
- العربية (Arabic) (Khalid)
- Français (@fmarquis
- Español (@luismiguelgilbert)
- Svensk (@Someone92)
- русский/Russian (@Dmitrij-Polyanin)
- 日本語 (にほんご) (@mesqueeb)
- 한국어 (@bichikim)
- Turkish (@Anaxilaus)
- Persian/فارسی (@neokazemi)
<q-media-player
type="video"
background-color="black"
:muted="muted"
radius="1rem"
:autoplay="true"
:show-big-play-button="true"
:sources="video.sources"
:poster="video.poster"
:tracks="video.tracks"
track-language="English"
@ended="onEnded"
>
<template v-if="overlay" v-slot:overlay>
<div>
<img
src="quasar-logo.png"
style="width: 30vw; max-width: 50px; opacity: 0.25;"
>
</div>
</template>
</q-media-player>and the data...
data () {
return {
video: {
label: 'Tears of Steel',
poster: 'media/TearsOfSteel/TearsOfSteel.jpeg',
sources: [
{
src: 'http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov',
type: 'video/mp4'
}
],
tracks: [
{
src: 'media/TearsOfSteel/TOS-en.vtt',
kind: 'subtitles',
srclang: 'en',
label: 'English'
},
{
src: 'media/TearsOfSteel/TOS-de.vtt',
kind: 'subtitles',
srclang: 'de',
label: 'German'
},
{
src: 'media/TearsOfSteel/TOS-es.vtt',
kind: 'subtitles',
srclang: 'es',
label: 'Spanish'
},
{
src: 'media/TearsOfSteel/TOS-fr-Goofy.vtt',
kind: 'subtitles',
srclang: 'fr',
label: 'French'
},
{
src: 'media/TearsOfSteel/TOS-it.vtt',
kind: 'subtitles',
srclang: 'it',
label: 'Italian'
},
{
src: 'media/TearsOfSteel/TOS-nl.vtt',
kind: 'subtitles',
srclang: 'nl',
label: 'Dutch'
}
]
}
}
}audio: {
sources: [
{
src: 'https://raw.githubusercontent.com/quasarframework/quasar-ui-qmediaplayer/dev/demo/public/media/Scott_Holmes_-_04_-_Upbeat_Party.mp3',
type: 'audio/mp3'
}
]
}It is important to note that if you desire fullscreen, then you must add Quasar's AppFullscreen plug-in to your quasar.conf.js. For more information, please refer to the documentation:
// quasar.conf.js
return {
framework: {
plugins: [
'AppFullscreen'
]
}
}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.
For more detailed information go here.
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.
For more detailed information go here.
You can capture the networkState with the @networkState event.
NETWORK_EMPTY = 0
NETWORK_IDLE = 1
NETWORK_LOADING = 2
NETWORK_NO_SOURCE = 3For more detailed information go here.
You can capture the MediaError with the @error event.
MEDIA_ERR_ABORTED = 1
MEDIA_ERR_NETWORK = 2
MEDIA_ERR_DECODE = 3
MEDIA_ERR_SRC_NOT_SUPPORTED = 4For more detailed information go here.
If you want to use the playsinline property with iOS, you will need to add the following to the config.xml for your iOS build:
<preference name="AllowInlineMediaPlayback" value="true" />If you find you have a need access to the underlying media player, you can set up a ref on QMediaPlayer and access $media directly, even capturing and handling your own events.
<q-media-player
ref="myPlayer"
...
/>then
// in code some where
this.$refs.myPlayer.$media
// examples to call native functions directly:
// this.$refs.myPlayer.$media.pause()
// this.$refs.myPlayer.$media.play()
// or via QMediaPlayer
// this.$refs.myPlayer.pause()
// this.$refs.myPlayer.play()If you appreciate the work that went into this, please consider donating to Quasar or Jeff.
MIT (c) Jeff Galbraith [email protected]
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent