QML Media Player Example#

Playing audio and video using Qt Quick.


This example demonstrates a simple multimedia player that can play audio and video files using various codecs.

Running the Example#

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.


At its core this is a QML application, see Getting Started Programming with Qt Quick for information specific to that. This documentation is focused on how this example utilizes the Qt Multimedia QML types .


Using MediaPlayer and VideoOutput#

In main.qml a MediaPlayer instance is connected to a VideoOutput to play back the video:

videoOutput is declared like so:



This QML type handles media selection from a url or local file, exiting the application, viewing meta data, and the selection of available video, audio or subtitle tracks.

Accessing the mediaPlayer object is done through properties:


A FileDialog, fileDialog, is created with an onAccepted function that will stop mediaPlayer, load the source by setting the source property and then play it automatically:

This is triggered in the Menu File, which is a child of the MenuBar :



While urlPopup handles prompting and capturing a url, it is the loadUrl function that interacts with mediaPlayer like so:

Getting meta data#


In the declaration of mediaPlayer, in main.qml, there is the function updateMetadata():

It is called in the following places:

Reading is done by the MetadataInfo type’s read() function

The information is displayed via an Overlay item.

Tracks information and control#

This is defined in TracksInfo.qml and reading available tracks is done in a similar way to MetadataInfo:

To set a track, the property selectedTrack is set like so:

The onSelectectedTrackChanged signal, in each relevant TracksInfo instance in main.qml, is what makes changes to mediaPlayer like so:



This item has controls for Playback control , Play Pause Stop , Playback rate control and Playback seek control .

Playback control#

This qml type handles media playback and interacts with the MediaPlayer in main.qml.

Here are the property definitions.


Play Pause Stop#


Play , stop and pause interactions with the MediaPlayer object are done like so:

Playback states done using playbackstate like so:

Playback seek control#

Defined in PlaybackSeekControl.qml, this component comprises of an item with a Text, mediaTime, and Slider , mediaSlider, in a RowLayout .

mediaTime uses MediaPlayer ‘s position property like so:

mediaSlider uses the MediaPlayer seekable , duration , and position properties like so:

Playback rate control#

This type is defined in PlaybackRateControl.qml like so:

Audio control#


This type is defined in AudioControl.qml, and utilizes the muted and volume properties of the AudioOutput instantiated within the MediaPlayer , which is instantiated in main.qml.

Example project @ code.qt.io