QMediaPlayer is a Quasar component that provides refined HTML5 audio and video controls for Vue and Quasar applications.
QMediaPlayer v3 prepares the project for Quasar CLI Vite 3. The app extension is Vite-only, requires @quasar/app-vite >=3.0.0, and no longer supports webpack-based Quasar apps.
This is a pnpm workspace mono-repo. You cannot use npm for building.
- /ui - standalone npm package (go here for more information)
- /app-extension - Quasar app extension
- /docs - Q-Press documentation site with docs, demos, and examples
- live demo - live Q-Press docs, demos, and examples
pnpm install
pnpm build:ui
pnpm build:docs
pnpm --filter docs devWe need help translating the language files. They are currently built from English source strings. If you know another language, please open a PR and help us out.
Completed translations include English, German, Polish, Chinese, Dutch, Czech, Slovak, Portuguese (BR), Traditional Chinese, Romanian, Slovenian, Arabic, French, Spanish, Swedish, Russian, Japanese, Korean, Turkish, and Persian.
<template>
<q-media-player type="video" :sources="sources" poster="/media/poster.jpg" show-big-play-button />
</template>
<script setup lang="ts">
import { QMediaPlayer } from '@quasar/quasar-ui-qmediaplayer'
import '@quasar/quasar-ui-qmediaplayer/dist/index.css'
const sources = [
{
src: '/media/video.mp4',
type: 'video/mp4',
},
]
</script>If QMediaPlayer is useful in your workflow and you want to support ongoing maintenance:
- GitHub Sponsors: https://github.com/sponsors/hawkeye64
- PayPal: https://paypal.me/hawkeye64
MIT (c) Jeff Galbraith jeff@quasar.dev