미디어 플레이어

Qt Quick 을 사용하여 오디오 및 비디오 재생하기

이 예는 다양한 코덱을 사용하여 오디오 및 비디오 파일을 재생할 수 있는 간단한 멀티미디어 플레이어를 보여줍니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

프로젝트 구조

이 애플리케이션 아키텍처는 세 개의 사용자 지정 QML 모듈로 구성되어 있습니다:

MediaControl
MediaPlayer
Config

이는 최상위 수준 CMakeLists.txt 파일에도 반영되어 있습니다:

add_subdirectory(MediaPlayer)
add_subdirectory(MediaControls)
add_subdirectory(Config)

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

각 QML 모듈은 qt_add_qml_module 매크로를 사용하여 생성됩니다(예: 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 애플리케이션

이 애플리케이션의 핵심은 QML 애플리케이션이며, 이와 관련된 정보는 Qt Quick 프로그래밍 시작하기를 참조하세요. 이 문서에서는 이 예제에서 어떻게 Qt Multimedia QML Types.

사용자 정의 구성 QML 모듈

이 유형은 대상 운영 체제에 따라 애플리케이션의 테마와 레이아웃을 제어합니다.

먼저 한 번만 인스턴스화하면 되고 복사본을 만드는 것은 리소스 낭비가 될 수 있으므로 싱글톤으로 선언합니다.

이를 위해 다음과 같이 추가합니다. Config.qml

pragma Singleton

그런 다음 Config 디렉터리에 qmldir 이라는 이름의 qmldir 파일을 만듭니다:

module Config
singleton Config 1.0 Config.qml

이제 애플리케이션에서 이 파일을 사용하려면 MediaPlayer 의 Main.qml 파일에서 어떻게 참조되는지 확인하세요:

    color: Config.mainColor

커스텀 MediaControls QML 모듈

이 모듈에는 다음을 포함하여 애플리케이션의 컨트롤을 정의하는 데 사용되는 모든 유형이 들어 있습니다:

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

이러한 컨트롤이 구현되는 방식에 대한 자세한 내용은 각 특정 유형의 정의 파일을 참조하세요. 이 컨트롤은 QML 미디어 플레이어 예제의 컨트롤을 발전시킨 것입니다.

사용자 지정 `MediaPlayer` QML 모듈

이 모듈에는 애플리케이션의 최상위 유형 대부분이 사용되는 곳, 그리고 결정적으로 Qt Multimedia MediaPlayer 및 VideoOutput QML 유형이 선언되는 곳을 선언하는 Main.qml 파일이 있습니다.

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

이 모듈에는 파일 정보를 검색하고 표시하고 파일 선택기를 호출하는 데 사용되는 다른 커스텀 유형이 포함되어 있습니다.

ErrorPopup.qml
Images.qml
MetadataInfo.qml
PlayerMenuBar.qml
재생목록정보.qml
SettingsInfo.qml
ThemeInfo.qml
TouchMenu.qml
TracksInfo.qml
TracksOptions.qml
UrlPopup.qml

유형이 구현되는 방법에 대한 자세한 내용은 각 특정 유형의 정의 파일을 참조하세요. 일부는 QML 미디어 플레이어 예제에서 볼 수 있는 것을 발전시킨 것입니다.

새로운 기능

이 예제 애플리케이션에는 PlaylistInfo 및 ThemeInfo 과 같은 유형에 의해 구현된 몇 가지 새로운 기능이 있습니다. 이러한 기능이 구현되는 방법에 대한 자세한 내용은 각 .qml 파일을 참조하세요.

예제 프로젝트 @ code.qt.io

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