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.

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 .

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

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

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:

playbackControlPanel

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

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 MediaPlayer .

Example project @ code.qt.io