[
]()
[
]()
If you are looking for QMediaPlayer v2.+ (with Quasar v2/Vue v3 support) look into the
next
branch. For v2.+ documentation, go here.
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.
<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="https://github.com/quasarframework/quasar-ui-qmediaplayer/raw/dev/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.
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:
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 = 3
For 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 = 4
For 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 jeff@quasar.dev