Reproductor multimedia

Reproducción de audio y vídeo utilizando Qt Quick.

Aplicación multimedia que reproduce audio

Este ejemplo demuestra una aplicación QML que puede reproducir archivos de audio y video usando varios codecs.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creator, abra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Estructura del proyecto

Esta arquitectura de aplicaciones se compone de tres módulos QML personalizados:

MediaControl
MediaPlayer
Config

Esto también se refleja en el archivo de nivel superior CMakeLists.txt:

add_subdirectory(MediaPlayer)

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

Cada módulo QML se crea utilizando la macro qt_add_qml_module, por ejemplo ver cómo se crea el módulo Config.

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 aplicación

En su núcleo se trata de una aplicación QML, consulte Introducción a la programación con Qt Quick: Una aplicación de alarma para obtener información específica al respecto. Esta documentación se centra en cómo este ejemplo utiliza la macro Qt Multimedia QML Types.

El módulo QML Custom Config

Este tipo controla temas y diseños para una aplicación, dependiendo del sistema operativo de destino.

Primero lo declaramos singleton, ya que sólo necesitamos que se instancie una vez y crear copias sería un desperdicio de recursos.

Para ello añadimos lo siguiente en la parte superior de Config.qml

pragma Singleton

Luego creamos un archivo qmldir en el directorio Config llamado qmldir que contiene lo siguiente:

module Config
singleton Config 1.0 Config.qml

Ahora, para utilizarlo en nuestra aplicación, veamos cómo se hace referencia a él en el archivo Main.qml de MediaPlayer:

    color: Config.mainColor

El módulo personalizado MediaControls QML

Este módulo contiene todos los tipos utilizados para definir los controles de la aplicación, incluyendo:

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

Consulte el archivo de definición de cada tipo específico para obtener información detallada sobre cómo se implementan estos controles. Son una evolución de los controles del ejemplo de reproductor multimedia QML.

El módulo QML personalizado `MediaPlayer`

Este módulo tiene el archivo Main.qml que declara donde se utilizan la mayoría de los tipos de nivel superior para la aplicación, y crucialmente donde se declaran los tipos QML Qt Multimedia MediaPlayer y 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()
            }
        }
    }

El módulo contiene los otros tipos de aduana utilizados para recuperar y mostrar información de archivos, así como para llamar al selector de archivos.

ErrorPopup.qml
Imágenes.qml
MetadataInfo.qml
PlayerMenuBar.qml
PlaylistInfo.qml
SettingsInfo.qml
ThemeInfo.qml
TouchMenu.qml
TracksInfo.qml
TracksOptions.qml
UrlPopup.qml

Consulte el archivo de definición de cada tipo específico para obtener información detallada sobre cómo se implementan los tipos. Algunos son una evolución de los que se encuentran en QML Media Player Example.

Nuevas funciones

Esta aplicación de ejemplo tiene algunas nuevas funcionalidades implementadas por tipos, como PlaylistInfo y ThemeInfo. Consulta los respectivos archivos .qml para ver en detalle cómo se implementan.

Archivos fuente

Proyecto de ejemplo @ code.qt.io

Ver también Todos los Ejemplos Qt, Qt Quick Ejemplos y Tutoriales, y Qt Multimedia Ejemplos.

© 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.