Exemple de lecteur multimédia QML

Cet exemple présente un lecteur multimédia simple capable de lire des fichiers audio et vidéo à l'aide de divers codecs.

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l'exemple à l'adresse Examples. Pour plus d'informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l'exemple dans la liste. Pour plus d'informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Instanciation du MediaPlayer

Le point d’entrée du code QML dans cet exemple est Main.qml. Ici, un ApplicationWindow est créé et des propriétés telles que id, title, width et height sont définies.

ApplicationWindow {
    id: root
    title: qsTr("Multimedia Player")
    width: 1280
    height: 720

Ensuite, l’objet ` MediaPlayer ` est créé et les deux propriétés chargées de la sortie vidéo et audio sont définies. D’une part, ` videoOutput `, qui affiche le viseur vidéo, et d’autre part ` audioOutput `, qui fournit la sortie audio du lecteur.

MediaPlayer {
    id: mediaPlayer
    ...
videoOutput: videoOutput
audioOutput: AudioOutput {
    id: audio
    muted: playbackController.muted
    volume: playbackController.volume
}
    ...
VideoOutput {
    id: videoOutput
    anchors.fill: parent
    visible: mediaPlayer.mediaStatus > 0

    TapHandler {
        onDoubleTapped: {
            root.fullScreen ?  root.showNormal() : root.showFullScreen()
            root.fullScreen = !root.fullScreen
        }
    }
}

La propriété « visible » de type « VideoOutput » est définie sur « true » lorsque la propriété « mediaStatus » de « MediaPlayer » est supérieure à 0. « mediaStatus » est un type d’énumération et vaut 0 lorsqu’aucun média n’a été défini, et est supérieur à 0 dans le cas contraire. Par conséquent, le « VideoOutput » est visible lorsqu’un média a été défini.

Le type « MediaPlayer » dispose d’une propriété de signal appelée « onErrorOccurred » qui peut être redéfinie spécifiquement pour gérer les erreurs. Dans ce cas, le signal ouvre un « MessageDialog » à l’aide de la méthode « open() » et définit sa propriété « text » sur une propriété « MediaPlayer » appelée « errorString ».

onErrorOccurred: {
    mediaError.text = mediaPlayer.errorString
    mediaError.open()
}

Commandes de lecture

Pour disposer d’un lecteur multimédia fonctionnel, il faut une interface permettant de contrôler la lecture. Celle-ci est définie dans son propre fichier de composant, PlaybackControl.qml, et instanciée dans Main.qml.

PlaybackControl {
    id: playbackController
    ...
onTracksChanged: {
    audioTracksInfo.read(mediaPlayer.audioTracks)
    videoTracksInfo.read(mediaPlayer.videoTracks)
    subtitleTracksInfo.read(mediaPlayer.subtitleTracks, 6) /* QMediaMetaData::Language = 6 */
    updateMetadata()
    mediaPlayer.play()
}

Une fois créé, ce type reçoit des objets tels que les informations sur les pistes, les métadonnées et l'objet ` MediaPlayer ` lui-même. Dans ` PlaybackControl.qml`, chacun de ces objets dispose d’une propriété ` required property`, ce qui signifie que ces propriétés doivent être définies lors de la création de l’objet ` PlaybackControl `.

Item {
    id: playbackController

    required property MediaPlayer mediaPlayer
    required property MetadataInfo metadataInfo
    required property TracksInfo audioTracksInfo
    required property TracksInfo videoTracksInfo
    required property TracksInfo subtitleTracksInfo

Ces commandes de lecture peuvent être réparties en plusieurs sections. En haut à gauche du panneau se trouve un ensemble de boutons permettant d’ouvrir un fichier, soit en sélectionnant un fichier dans un explorateur de fichiers, soit en saisissant une URL. Le fichier est chargé dans l’ MediaPlayer en définissant la propriété source. Les deux boutons sont instanciés à l’aide d’un CustomButton custom component .

CustomButton {
    id: fileDialogButton
    icon.source: "../images/open_new.svg"
    flat: false
    onClicked: fileDialog.open()
}

CustomButton {
    id: openUrlButton
    icon.source: "../images/link.svg"
    flat: false
    onClicked: urlPopup.open()
}

Trois boutons sont créés et centrés sur ce panneau ; ils permettent de lancer la lecture, de mettre en pause et d’avancer ou de reculer de dix secondes. La lecture du média est lancée et mise en pause à l’aide des méthodes play() et pause(), respectivement. Pour savoir quand afficher un bouton de lecture ou de pause, la propriété playbackState est interrogée. Par exemple, lorsqu’elle est égale à la valeur d’énumération MediaPlayer.PlayingState, le bouton de pause s’affiche.

CustomRoundButton {
    id: playButton
    visible: playbackController.mediaPlayer.playbackState !== MediaPlayer.PlayingState
    icon.source: "../images/play_symbol.svg"
    onClicked: playbackController.mediaPlayer.play()
}

CustomRoundButton {
    id: pauseButton
    visible: playbackController.mediaPlayer.playbackState === MediaPlayer.PlayingState
    icon.source: "../images/pause_symbol.svg"
    onClicked: playbackController.mediaPlayer.pause()
}

Pour avancer ou reculer de dix secondes, la propriété position de type MediaPlayer est incrémentée de 10 000 millisecondes, puis définie à l’aide de la méthode setPosition().

CustomRoundButton {
    id: forward10Button
    icon.source: "../images/forward10.svg"
    onClicked: {
        const pos = Math.min(playbackController.mediaPlayer.duration,
                           playbackController.mediaPlayer.position + 10000)
        playbackController.mediaPlayer.setPosition(pos)
    }
}

Recherche dans la lecture et audio

Dans ` PlaybackControl.qml`, un objet de type ` AudioControl ` et un autre de type ` PlaybackSeekControl ` sont instanciés. Ils sont tous deux définis dans leur propre fichier de composant et sont respectivement chargés du contrôle du volume et de la recherche de position de lecture. Le type ` AudioControl ` définit un bouton permettant de couper le son ainsi qu’un attribut ` Slider`, issu de ` QtQuick Controls`, permettant de régler le volume du lecteur. Ces deux attributs sont exposés via la définition des propriétés ` mute ` et ` volume `, et sont accessibles à partir de la définition ` AudioOutput ` dans ` Main.qml`.

property alias muted: muteButton.checked
property real volume: slider.value

L’ PlaybackSeekControl utilise un RowLayout contenant un Slider flanqué de part et d’autre d’un élément Text. Les deux éléments Text affichent l’heure actuelle et la durée restante du média en cours de lecture. Ces deux valeurs sont calculées à l’aide de deux propriétés de type MediaPlayer: position, qui indique la position de lecture actuelle en millisecondes, et duration, qui indique la durée du média en millisecondes.

Label {
    id: currentTime
    Layout.preferredWidth: 45
    text: seekController.formatToMinutes(seekController.mediaPlayer.position)
    horizontalAlignment: Text.AlignLeft
    font.pixelSize: 11
}
    ...
Label {
    id: remainingTime
    Layout.preferredWidth: 45
    text: seekController.formatToMinutes(seekController.mediaPlayer.duration - seekController.mediaPlayer.position)
    horizontalAlignment: Text.AlignRight
    font.pixelSize: 11
}

La fonction « Slider » n’est activée que lorsque le lecteur multimédia permet la recherche et ne diffuse pas, par exemple, de contenu en direct. Le type « MediaPlayer » dispose d’une propriété dédiée appelée « seekable ». La durée de lecture restante (« value ») de la piste en cours de lecture (« Slider ») est calculée à partir des propriétés « position » et « duration » de l’objet « MediaPlayer ».

enabled: seekController.mediaPlayer.seekable
value: seekController.mediaPlayer.position / seekController.mediaPlayer.duration

Métadonnées et informations sur les pistes

Le type PlaybackControl instancie un SettingsPopup, qui contient des informations sur les métadonnées du média actuellement chargé et la sélection de piste, ainsi que la possibilité de mettre à jour la vitesse de lecture. Cette Popup est définie dans SettingsPopup.qml.

Les métadonnées sont contenues dans leur propre fichier composant, MetadataInfo.qml. Celui-ci contient un objet de type ` ListModel`, une fonction permettant de le vider, ` clear()`, et une fonction permettant de le remplir, ` read(MediaMetadata metadata)`. La fonction ` read(MediaMetadata metadata) ` prend comme paramètre un objet de type ` MediaMetaData` et parcourt sa structure clé-valeur pour extraire ses données dans le champ ` model ` de l’objet ` ListView`. Les méthodes utilisées à cette fin sont ` keys()`, qui renvoie toutes les clés du ` MediaMetaData`, et `{stringValue(Key key)}`, qui renvoie la valeur ` value ` associée à une clé donnée ` key`.

function read(metadata) {
    if (!metadata)
        return
    for (const key of metadata.keys())
        if (metadata.stringValue(key))
            listModel.append({
                                name: metadata.metaDataKeyToString(key),
                                value: metadata.stringValue(key)
                            })
}

ListModel {
    id: listModel
}

Les données sont ensuite affichées dans SettingsPopup.qml sous la forme d’un type ListView. L’ delegate de ce ListView est une ligne composée de deux éléments Text, correspondant aux paires clé-valeur extraites de l’élément MediaMetaData.

De l’autre côté de l’ Popup, on trouve les commandes de vitesse de lecture et la sélection des pistes pour l’audio, la vidéo et les sous-titres. La vitesse de lecture est choisie parmi une liste ComboBox et définie à l’aide de la propriété playbackRate.

settingsController.mediaPlayer.playbackRate = (currentIndex + 1) * 0.25

Le type appelé « TracksInfo », défini dans TracksInfo.qml, contient les données relatives aux pistes. Plus précisément, un « ListModel » contenant les titres des pistes ou, pour les sous-titres en particulier, les langues. Ces informations sont renseignées dans Main.qml en appelant la fonction « read(MediaMetadata mediaMetadata) » définie dans le type « TracksInfo ».

onTracksChanged: {
    audioTracksInfo.read(mediaPlayer.audioTracks)
    videoTracksInfo.read(mediaPlayer.videoTracks)
    subtitleTracksInfo.read(mediaPlayer.subtitleTracks, 6) /* QMediaMetaData::Language = 6 */
    updateMetadata()
    mediaPlayer.play()
}

L’ model, défini dans TracksInfo, est ensuite interrogé dans les ComboBoxs de la SettingsPopup afin de sélectionner la piste actuelle.

settingsController.mediaPlayer.pause()
tracksInfo.selectedTrack = currentIndex
settingsController.mediaPlayer.play()

Exemple de projet @ code.qt.io