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