Lecteur multimédia

Cet exemple présente une application QML 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 dans « 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 » depuis 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.

Structure du projet

L'architecture de cette application se compose de trois modules QML personnalisés :

• MediaControl
• MediaPlayer
• Config

Cela se reflète également dans le fichier CMakeLists.txt de niveau supérieur :

add_subdirectory(MediaPlayer)

target_link_libraries(MediaPlayerApp PRIVATE
    Qt6::Core
    Qt6::Svg
    Qt6::Quick
    Qt6::Multimedia
    MediaControlsplugin
    MediaPlayerplugin
    Configplugin

Chaque module QML est créé à l’aide de la macro ` qt_add_qml_module ` ; voir par exemple comment le module `Config` est créé.

qt_add_library(Config STATIC)

set_source_files_properties(Config.qml
    PROPERTIES
        QT_QML_SINGLETON_TYPE true
)

qt_add_qml_module(Config
    URI "Config"
    OUTPUT_DIRECTORY Config
    QML_FILES
        "Config.qml"
)

Qt Quick Application

Il s'agit essentiellement d'une application QML ; consultez la section « Premiers pas avec Qt Quick: une application d'alarme » pour obtenir des informations spécifiques à ce sujet. Cette documentation se concentre sur la manière dont cet exemple utilise le Qt Multimedia QML Types.

Le module QML « Config » personnalisé

Ce type permet de contrôler les thèmes et les mises en page d’une application, en fonction du système d’exploitation cible.

Nous le déclarons d’abord comme singleton, car nous n’avons besoin qu’il soit instancié une seule fois et la création de copies constituerait un gaspillage de ressources.

Pour ce faire, nous ajoutons ce qui suit en haut du fichier Config.qml

pragma Singleton

Nous créons ensuite un fichier qmldir dans le répertoire Config, nommé qmldir, qui contient ce qui suit :

module Config
singleton Config 1.0 Config.qml

Pour l’utiliser dans notre application, voyez comment il est référencé dans le fichier Main.qml de MediaPlayer:

    color: Config.mainColor

Le module QML personnalisé MediaControls

Ce module regroupe tous les types utilisés pour définir les contrôles de l’application, notamment :

• AudioControl.qml
• ControlImages.qml
• CustomButton.qml
• CustomRadioButton.qml
• CustomSlider.qml
• Commande de lecture.qml
• CommandeDeVitesseDeLecture.qml
• PlaybackSeekControl.qml

Consultez le fichier de définition de chaque type spécifique pour plus de détails sur la manière dont ces contrôles sont implémentés. Ils constituent une évolution des contrôles de l'exemple de lecteur multimédia QML.

Le module QML personnalisé « MediaPlayer »

Ce module contient le fichier Main.qml qui définit l'emplacement où la plupart des types de niveau supérieur de l'application sont utilisés, et surtout où sont déclarés les types QML Qt Multimedia, MediaPlayer et VideoOutput.

    MediaPlayer {
        id: mediaPlayer

        playbackRate: playbackControl.playbackRate
        videoOutput: videoOutput
        audioOutput: AudioOutput {
            id: audio
            volume: playbackControl.volume
        }
        source: new URL("https://download.qt.io/learning/videos/media-player-example/Qt_LogoMergeEffect.mp4")

        function updateMetadata() {
            root.metadataInfo.clear()
            root.metadataInfo.read(mediaPlayer.metaData)
        }

        onMetaDataChanged: updateMetadata()
        onActiveTracksChanged: updateMetadata()
        onErrorOccurred: {
            errorPopup.errorMsg = mediaPlayer.errorString
            errorPopup.open()
        }
        onTracksChanged: {
            settingsInfo.tracksInfo.selectedAudioTrack = mediaPlayer.activeAudioTrack
            settingsInfo.tracksInfo.selectedVideoTrack = mediaPlayer.activeVideoTrack
            settingsInfo.tracksInfo.selectedSubtitleTrack = mediaPlayer.activeSubtitleTrack
            updateMetadata()
        }

        onMediaStatusChanged: {
            if ((MediaPlayer.EndOfMedia === mediaStatus && mediaPlayer.loops !== MediaPlayer.Infinite) &&
                    ((root.currentFile < playlistInfo.mediaCount - 1) || playlistInfo.isShuffled)) {
                if (!playlistInfo.isShuffled) {
                    ++root.currentFile
                }
                root.playMedia()
            } else if (MediaPlayer.EndOfMedia === mediaStatus && root.playlistLooped && playlistInfo.mediaCount) {
                root.currentFile = 0
                root.playMedia()
            }
        }
    }

    VideoOutput {
        id: videoOutput

        anchors.top: fullScreen || Config.isMobileTarget ? parent.top : menuBar.bottom
        anchors.bottom: fullScreen ? parent.bottom : playbackControl.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: fullScreen ? 0 : 20
        anchors.rightMargin: fullScreen ? 0 : 20
        visible: mediaPlayer.hasVideo

        property bool fullScreen: false

        TapHandler {
            onDoubleTapped: {
                if (parent.fullScreen) {
                    root.showNormal()
                } else {
                    root.showFullScreen()
                }
                parent.fullScreen = !parent.fullScreen
            }
            onTapped: {
                root.closeOverlays()
            }
        }
    }

Le module contient les autres types personnalisés utilisés pour récupérer et afficher les informations sur les fichiers, ainsi que pour appeler le sélecteur de fichiers.

• ErrorPopup.qml
• Images.qml
• MetadataInfo.qml
• PlayerMenuBar.qml
• PlaylistInfo.qml
• Informations sur les paramètres.qml
• ThèmeInfo.qml
• MenuTactile.qml
• Informations sur les pistes.qml
• Options des pistes.qml
• UrlPopup.qml

Consultez le fichier de définition de chaque type spécifique pour plus de détails sur la manière dont les types sont implémentés. Certains sont une évolution de ceux que l'on trouve dans l'exemple de lecteur multimédia QML.

Nouvelles fonctionnalités

Cette application d'exemple intègre de nouvelles fonctionnalités implémentées par des types, telles que PlaylistInfo et ThemeInfo. Consultez les fichiers .qml correspondants pour plus de détails sur leur implémentation.

Fichiers source

Projet d'exemple sur code.qt.io