QML Media Player Example#

Playing audio and video using Qt Quick.

../_images/qmlmediaplayer.jpg

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.

Overview#

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 .

../_images/architecture-overview.gif

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:

PlayerMenuBar#

../_images/PlayerMenuBar.gif

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:

fileDialog#

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 :

loadUrl#

../_images/url.png

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

Getting meta data#

../_images/meta-data.png

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:

playbackControlPanel#

../_images/playbackControlPanel.gif

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.

Connections:

Play Pause Stop#

../_images/play-pause-stop.gif

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#

../_images/audio-control.gif

This type is defined in AudioControl.qml, and utilizes the muted and volume properties of MediaPlayer .

Example project @ code.qt.io