Lecteur de médias

Lecture de fichiers audio et vidéo à l'aide de Qt Quick.

Application multimédia jouant de l'audio

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

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.

Structure du projet

Cette architecture d'application est composée de trois modules QML personnalisés :

MediaControl
MediaPlayer
Config

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

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

A la base, il s'agit d'une application QML, voir Getting Started programming with Qt Quick: An Alarm Application pour des informations spécifiques à ce sujet. Cette documentation se concentre sur la façon dont cet exemple utilise la macro Qt Multimedia QML Types.

Le module QML Custom Config

Ce type de module contrôle les thèmes et les dispositions d'une application, en fonction du système d'exploitation cible.

Tout d'abord, nous déclarons qu'il s'agit d'un singleton, car nous n'avons besoin de l'instancier qu'une seule fois et créer des copies serait un gaspillage de ressources.

Pour ce faire, nous ajoutons ce qui suit en haut de la page 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, voyons comment il est référencé dans le fichier Main.qml de MediaPlayer:

    color: Config.mainColor

Le module QML MediaControls personnalisé

Ce module contient tous les types utilisés pour définir les contrôles de l'application :

AudioControl.qml
ControlImages.qml
CustomButton.qml
CustomRadioButton.qml
CustomSlider.qml
PlaybackControl.qml
PlaybackRateControl.qml
PlaybackSeekControl.qml

Voir le fichier de définition de chaque type spécifique pour plus de détails sur la façon dont ces contrôles sont mis en œuvre. Il s'agit d'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éclare où la plupart des types de haut niveau de l'application sont utilisés, et surtout où les types QML Qt Multimedia MediaPlayer et VideoOutput sont déclarés.

    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 douaniers 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
SettingsInfo.qml
ThemeInfo.qml
TouchMenu.qml
TracksInfo.qml
TracksOptions.qml
UrlPopup.qml

Voir le fichier de définition de chaque type spécifique pour plus de détails sur la façon dont les types sont mis en œuvre. Certains sont une évolution de ceux trouvés dans l'exemple de lecteur multimédia QML.

Nouvelles fonctionnalités

Cet exemple d'application comporte de nouvelles fonctionnalités mises en œuvre par des types tels que PlaylistInfo et ThemeInfo. Voir les fichiers .qml respectifs pour plus de détails sur leur mise en œuvre.

Fichiers sources

Projet d'exemple @ code.qt.io

Voir aussi Tous les exemples Qt, Qt Quick Exemples et tutoriels, et Qt Multimedia Exemples.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.