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

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Instanciation du lecteur multimédia

Le point d'entrée du code QML dans cet exemple est Main.qml. 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, le site MediaPlayer est créé et les deux propriétés responsables de la sortie vidéo et audio sont définies. Tout d'abord, videoOutput qui rend le viseur vidéo et ensuite audioOutput qui fournit la sortie audio pour le 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 du type VideoOutput est définie sur true lorsque la propriété mediaStatus du type MediaPlayer est supérieure à 0. mediaStatus est un type d'énumération et est égal à 0 lorsqu'aucun média n'a été défini, et supérieur à 0 dans le cas contraire. Par conséquent, l'adresse VideoOutput est visible lorsqu'un média a été défini.

Le type MediaPlayer possède une propriété de signal appelée onErrorOccurred qui peut être remplacée spécifiquement pour gérer les erreurs. Dans ce cas, le signal ouvre une page MessageDialog à l'aide de la méthode open() et définit sa propriété text comme une propriété MediaPlayer appelée errorString.

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

Contrôles de lecture

Pour disposer d'un lecteur multimédia utilisable, il faut une interface permettant de contrôler la lecture. Cette interface est créée dans son propre fichier de composants, 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()
}

Lorsqu'ils sont créés, les objets sont transmis à ce type, tels que les informations sur les pistes, les informations sur les métadonnées et l'objet MediaPlayer lui-même. Dans PlaybackControl.qml, chacun de ces objets a une propriété required property, ce qui signifie que ces propriétés doivent être définies lorsque l'objet PlaybackControl est créé.

Item {
    id: playbackController

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

Ces contrôles de lecture peuvent être divisés en plusieurs sections. En haut à gauche du panneau se trouve une collection de boutons utilisés pour ouvrir un fichier, soit en sélectionnant un fichier à partir d'un explorateur de fichiers, soit en entrant une URL. Le fichier est chargé dans MediaPlayer en définissant la propriété source. Les deux boutons sont instanciés à l'aide d'une propriété 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, gérant la lecture, la pause et la recherche de dix secondes en avant ou en arrière. Le média est lu et mis en pause à l'aide des méthodes play() et pause(), respectivement. Pour savoir quand dessiner un bouton de lecture ou de pause, la propriété playbackState est interrogée. Par exemple, lorsqu'elle est égale à la valeur enum MediaPlayer.PlayingState, le bouton de pause est affiché.

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 naviguer dix secondes en avant ou en arrière, la propriété position du type MediaPlayer est incrémentée de 10 000 millisecondes et 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 de lecture et audio

Dans PlaybackControl.qml, un type AudioControl et un type PlaybackSeekControl sont instanciés. Ils sont tous deux définis dans leur propre fichier de composants et sont respectivement responsables du contrôle du volume et de la recherche de lecture. Le type AudioControl définit un bouton pour couper le son et un bouton Slider, de QtQuick Controls, pour régler le volume du lecteur. Ces deux attributs sont exposés en définissant une propriété 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

Le site PlaybackSeekControl utilise un site RowLayout contenant un site Slider et un site Text de part et d'autre. Les deux éléments Text affichent l'heure actuelle et le temps restant du média en cours de lecture. Ils sont tous deux calculés à l'aide de deux propriétés du 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
}

L'adresse Slider n'est activée que si le lecteur multimédia est consultable et non, par exemple, un média en direct. Le type MediaPlayer possède une propriété à cet effet, appelée seekable. Le value du Slider est calculé à l'aide des propriétés position et duration du 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 des pistes, ainsi que la possibilité de mettre à jour le taux de lecture. Cette page Popup est définie dans SettingsPopup.qml.

Les métadonnées sont contenues dans leur propre fichier de composants, MetadataInfo.qml, qui contient une fonction ListModel, une fonction pour l'effacer, clear(), et une fonction pour la remplir, read(MediaMetadata metadata). La fonction read(MediaMetadata metadata) prend comme paramètre un objet de type MediaMetaData, et navigue dans sa structure clé-valeur pour extraire ses données dans le model du ListView. Les méthodes utilisées pour ce faire sont keys(), qui renvoie toutes les clés du MediaMetaData, et {stringValue(Key key)}, qui renvoie le value pour un key donné .

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 dans un type ListView. Le delegate de ce ListView est une ligne de deux éléments Text, correspondant aux paires clé-valeur extraites de l'élément MediaMetaData.

De l'autre côté de Popup se trouvent les contrôles de la 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 à partir d'un site 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 site ListModel contient les titres des pistes ou, pour les sous-titres en particulier, les langues. Ces informations sont introduites 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()
}

La fonction model définie dans TracksInfo est ensuite interrogée dans ComboBoxes dans SettingsPopup pour sélectionner la piste en cours.

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

Exemple de projet @ code.qt.io