Beispiel für einen QML-Media-Player

Dieses Beispiel zeigt einen einfachen Multimedia-Player, der Audio- und Videodateien mit verschiedenen Codecs abspielen kann.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Instanziieren des MediaPlayers

Der Einstiegspunkt für den QML-Code in diesem Beispiel ist „ Main.qml “. Hier wird ein „ ApplicationWindow “ erstellt und Eigenschaften wie „ id “, „ title “, „ width “ und „ height “ werden festgelegt.

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

Anschließend wird das „ MediaPlayer “ erstellt und die beiden Eigenschaften definiert, die für die Video- und Audioausgabe zuständig sind. Zum einen „ videoOutput “, das den Video-Sucher rendert, und zum anderen „ audioOutput “, das die Audioausgabe für den Player bereitstellt.

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
        }
    }
}

Die Eigenschaft „ visible “ vom Typ „ VideoOutput “ wird auf „ true “ gesetzt, wenn die Eigenschaft „ mediaStatus “ des „ MediaPlayer “ größer als 0 ist. „ mediaStatus “ ist ein Aufzählungstyp und hat den Wert 0, wenn keine Medien festgelegt wurden, andernfalls einen Wert größer als 0. Daher ist der „ VideoOutput “ sichtbar, wenn Medien festgelegt wurden.

Der Typ „ MediaPlayer “ verfügt über eine Signal-Eigenschaft namens „ onErrorOccurred “, die speziell zur Fehlerbehandlung überschrieben werden kann. In diesem Fall öffnet das Signal mithilfe der Methode „ open() “ eine „ MessageDialog “ und setzt deren Eigenschaft „ text “ auf eine „ MediaPlayer “-Eigenschaft namens „ errorString “.

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

Steuerelemente für die Wiedergabe

Um einen funktionsfähigen Mediaplayer zu erhalten, muss eine Schnittstelle zur Steuerung der Wiedergabe vorhanden sein. Diese wird in einer eigenen Komponentendatei, „ PlaybackControl.qml “, erstellt und in „ Main.qml “ instanziiert.

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

Bei der Erstellung werden Objekte an diesen Typ weitergeleitet, darunter Titelinformationen, Metadaten und das ` MediaPlayer `-Objekt selbst. In ` PlaybackControl.qml` verfügt jedes dieser Objekte über eine ` required property`-Eigenschaft, was bedeutet, dass diese Eigenschaften beim Erstellen des ` PlaybackControl `-Objekts gesetzt werden müssen.

Item {
    id: playbackController

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

Diese Wiedergabesteuerelemente lassen sich in verschiedene Bereiche unterteilen. Oben links im Panel befindet sich eine Reihe von Schaltflächen, mit denen eine Datei geöffnet werden kann, entweder durch Auswahl einer Datei aus einem Datei-Explorer oder durch Eingabe einer URL. Die Datei wird durch Setzen der Eigenschaft „ source “ in das „ MediaPlayer “-Objekt geladen. Beide Schaltflächen werden mithilfe eines „ CustomButton “-Objekts instanziiert: „ 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()
}

Es werden drei Schaltflächen erstellt und auf diesem Panel zentriert, die die Funktionen „Wiedergabe“, „Pause“ sowie das Springen um zehn Sekunden vorwärts oder rückwärts übernehmen. Die Medien werden mithilfe der Methoden „ play() “ bzw. „ pause() “ abgespielt bzw. angehalten. Um zu erkennen, wann eine Wiedergabe- oder Pause-Schaltfläche gezeichnet werden muss, wird die Eigenschaft „ playbackState “ abgefragt. Ist ihr Wert beispielsweise gleich dem Enum-Wert „ MediaPlayer.PlayingState “, wird die Pause-Schaltfläche gezeichnet.

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()
}

Um zehn Sekunden vor- oder zurückzuspringen, wird die Eigenschaft „ position “ vom Typ „ MediaPlayer “ um 10.000 Millisekunden erhöht und mithilfe der Methode „ setPosition() “ gesetzt.

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

Wiedergabe-Seeking und Audio

In „ PlaybackControl.qml “ werden ein „ AudioControl “- und ein „ PlaybackSeekControl “-Typ instanziiert. Diese sind beide in ihrer eigenen Komponentendatei definiert und jeweils für die Lautstärkeregelung bzw. die Wiedergabesuche zuständig. Der Typ „ AudioControl “ definiert eine Schaltfläche zum Stummschalten sowie ein „ Slider “ aus „ QtQuick Controls “ zum Einstellen der Lautstärke des Players. Beide Attribute werden durch die Definition der Eigenschaften „ mute “ und „ volume “ bereitgestellt und sind über die Definition „ AudioOutput “ in „ Main.qml “ zugänglich.

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

Der „ PlaybackSeekControl “ verwendet ein „ RowLayout “, das ein „ Slider “ enthält, das auf beiden Seiten von einem „ Text “-Element eingerahmt ist. Die beiden „ Text “-Elemente zeigen die aktuelle Zeit und die verbleibende Zeit des gerade wiedergegebenen Mediums an. Diese werden beide anhand von zwei Eigenschaften des Typs „ MediaPlayer “ berechnet: „ position “, das die aktuelle Wiedergabeposition in Millisekunden angibt, und „ duration “, das die Dauer des Mediums in Millisekunden angibt.

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
}

Die Eigenschaft „ Slider “ ist nur aktiviert, wenn der Media-Player suchbar ist und es sich nicht beispielsweise um Live-Medien handelt. Der Typ „ MediaPlayer “ verfügt hierfür über eine Eigenschaft namens „ seekable “. Die Eigenschaft „ value “ des „ Slider “ wird anhand der Eigenschaften „ position “ und „ duration “ des „ MediaPlayer “ berechnet.

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

Metadaten und Titelinformationen

Der Typ „ PlaybackControl “ instanziiert ein „ SettingsPopup “, das Informationen zu den Metadaten der aktuell geladenen Medien und der Titelauswahl enthält sowie die Möglichkeit bietet, die Wiedergaberate anzupassen. Dieses „ Popup “ ist in „ SettingsPopup.qml “ definiert.

Die Metadaten sind in einer eigenen Komponentendatei enthalten: MetadataInfo.qml. Sie enthält ein „ ListModel “-Objekt, eine Funktion zum Löschen desselben ( clear()) sowie eine Funktion zum Befüllen desselben ( read(MediaMetadata metadata)). Die Funktion „ read(MediaMetadata metadata) “ nimmt als Parameter ein Objekt vom Typ „ MediaMetaData “ entgegen und durchläuft dessen Schlüssel-Wert-Struktur, um die Daten in die „ model “ des „ ListView “ zu extrahieren. Die hierfür verwendeten Methoden sind „ keys() “, die alle Schlüssel des „ MediaMetaData “ zurückgibt, und „{stringValue(Key key)}“, die den „ value “ für einen bestimmten „ key “ zurückgibt.

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
}

Die Daten werden dann in „ SettingsPopup.qml “ in einem Typ „ ListView “ angezeigt. Die „ delegate “ dieses „ ListView “ ist eine Zeile aus zwei „ Text “-Elementen, die den aus dem „ MediaMetaData “-Element abstrahierten Schlüssel-Wert-Paaren entsprechen.

Auf der anderen Seite des Popup befinden sich Steuerelemente für die Wiedergaberate sowie die Titelauswahl für Audio, Video und Untertitel. Die Wiedergaberate wird aus einem ComboBox ausgewählt und über die Eigenschaft playbackRate festgelegt.

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

Der Typ „ TracksInfo “, der in „ TracksInfo.qml “ definiert ist, enthält die Daten zu den Spuren. Genauer gesagt handelt es sich um ein „ ListModel “, das die Titel der Spuren oder – speziell bei Untertiteln – die Sprachen enthält. Diese Informationen werden in „ Main.qml “ durch Aufruf der Funktion „ read(MediaMetadata mediaMetadata) “ eingefügt, die im Typ „ TracksInfo “ definiert ist.

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

Anschließend wird die in TracksInfo definierte „ model “ in den „ ComboBox“-Elementen des „ SettingsPopup “ abgefragt, um die aktuelle Tonspur auszuwählen.

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

Beispielprojekt @ code.qt.io