quasarframework/quasar-ui-qmediaplayer
Fork: 52 Star: 213 (更新于 2024-10-24 08:19:09)
license: MIT
Language: JavaScript .
QMediaPlayer for Quasar
最后发布版本: v2.0.0-beta.6 ( 2022-03-14 00:11:21)
QMediaPlayer (Vue Plugin, UMD and Quasar App Extension)
If you are looking for QMediaPlayer v2.+ (with Quasar v2/Vue v3 support) look into the
next
branch. For v2.+ documentation, go here.
Structure
- /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
Demo Workflow
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
Language Files
We need help translating the language files. They are all currently using English. If you know another language, please PR and help us out.
Completed languages
- 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)
Example Code
Video example
<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 example
audio: {
sources: [
{
src: 'https://raw.githubusercontent.com/quasarframework/quasar-ui-qmediaplayer/dev/demo/public/media/Scott_Holmes_-_04_-_Upbeat_Party.mp3',
type: 'audio/mp3'
}
]
}
Other
Fullscreen
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'
]
}
}
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.
For more detailed information go here.
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.
For more detailed information go here.
networkState
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.
MediaError
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.
iOS
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" />
Direct Access
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()
Donate
If you appreciate the work that went into this, please consider donating to Quasar or Jeff.
License
MIT (c) Jeff Galbraith jeff@quasar.dev
最近版本更新:(数据更新于 2024-10-10 22:39:58)
2022-03-14 00:11:21 v2.0.0-beta.6
2021-12-12 06:12:17 v2.0.0-beta.5
2021-12-12 06:04:17 v2.0.0-beta.4
2021-10-29 03:56:46 v2.0.0-beta.3
2021-10-28 02:59:15 v2.0.0-beta.2
2021-10-27 23:11:50 v2.0.0-beta.1
2021-08-06 22:08:25 v1.4.1
2021-07-26 01:39:24 v2.0.0-alpha.2
2021-07-26 01:34:10 v1.4.0
2021-07-26 00:35:15 v2.0.0-alpha.1
quasarframework/quasar-ui-qmediaplayer同语言 JavaScript最近更新仓库
2024-11-05 19:13:47 jerryc127/hexo-theme-butterfly
2024-11-05 13:53:42 LiteLoaderQQNT/LiteLoaderQQNT
2024-11-03 02:40:36 chris81605/Degrees-of-Lewdity_Cheat_Extended
2024-11-01 21:55:46 projectdiscovery/nuclei-templates
2024-11-01 19:24:44 NumberSir/DoL-I18n-Build
2024-11-01 12:25:14 midoks/mdserver-web