QMediaPlayer gives Quasar apps a consistent audio and video player experience without forcing you back to browser-default media controls. Start with a source list, then layer in colors, captions, poster images, dense layouts, custom icon sets, or language packs as the UI needs them.
Music courtesy of Free Music Archive. Videos and subtitles courtesy of Blender Foundation and Tears of Steel.
WARNING
Some example videos are remotely hosted and may load slowly or fail depending on your network location.
Need adaptive streaming adapters, runtime blobs, custom language or icon sets, overlays, or deeper styling hooks? See the Advanced page after the basics here.
API
Basic Playback
Start with type and either source or sources. Audio and video share the same component API, so switching between media types usually means changing the source data rather than rebuilding the UI.
Auto Pause
Use auto-pause when videos live inside long documentation pages, feeds, dashboards, or galleries where playback should stop once the player is no longer visible. QMediaPlayer pauses when the component is completely outside the viewport and intentionally does not auto-resume.
Color
Use color props to align the player with your design system. The big play button can be customized separately, which is useful when the video poster needs a stronger call to action.
Background Color
Background colors help audio players feel intentional in cards, drawers, and hero sections where there is no video poster to carry the visual design.
Poster
Poster images are useful for setting context before playback starts, especially when videos appear in content-heavy pages. Use fallback-poster when you want a reusable default image while still letting an explicit poster take precedence.
Native audio elements do not support poster images. When audio needs artwork, use the video player mode with an audio source.
Dark
Dark mode variants let media sit naturally inside dashboards, video galleries, or dark-themed documentation pages.
Dense
Dense controls are a good fit for compact cards, sidebars, and other constrained layouts.
Audio Without Video
By default, QMediaPlayer can use the video element for audio playback. If that causes platform-specific issues, use no-video to force an audio element.
Volume Controls
Hide the volume slider when space is tight or when volume should be managed elsewhere in the application.
Disabled Seek
Disable seeking when the media experience should be linear, such as training content, onboarding videos, or guided audio.
Bottom Controls
Bottom controls keep actions predictable for larger videos and layouts where overlay controls would fight with the media content.
TIP
You do not have to use type="audio" to play audio. The type="video" mode can also play audio sources.
Portrait And Mobile
QMediaPlayer supports portrait media and mobile-friendly controls. mobile-mode turns off the hover-driven controls window so tapping the video toggles the controls display.
Sources
Use source for a single source or sources when the browser should choose from multiple formats.
Tracks
Tracks are captions or subtitles. Start playback, then use the options menu to choose a language track.
In the example below, the default language track is French.
For adaptive streaming, runtime files, overlays, icon sets, localization, and deeper styling, continue with the Advanced page.