Back to Qt.io
Contact Us Blog Download Qt
このページでは

メディアプレーヤー

Qt Quick を使用したオーディオおよびビデオの再生。

オーディオを再生するマルチメディアアプリケーション

この例では、さまざまなコーデックを使用してオーディオおよびビデオファイルを再生できる QML アプリケーションを紹介します。

例の実行

以下の手順でサンプルを実行できます。

プロジェクト構造

Config、MediaControls、MediaPlayer モジュールを含む Qt Creator のプロジェクト構造

このアプリケーションのアーキテクチャは、3つのカスタムQMLモジュールで構成されています：

  • MediaControl
  • MediaPlayer
  • Config

これは、最上位のCMakeLists.txt ファイルにも反映されています：

add_subdirectory(MediaPlayer)

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.

カスタム Config 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 Media Player Exampleに含まれるコントロールを発展させたものです。

カスタムMediaPlayer QMLモジュール

このモジュールには Main.qml ファイルが含まれており、このファイルでは、アプリケーションのトップレベル型の大部分が使用される場所、そして特に重要な点として、Qt Multimedia 、MediaPlayer 、VideoOutput といった 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
  • PlaylistInfo.qml
  • SettingsInfo.qml
  • ThemeInfo.qml
  • TouchMenu.qml
  • TracksInfo.qml
  • TracksOptions.qml
  • UrlPopup.qml

各具体的な型の実装方法の詳細については、それぞれの定義ファイルを参照してください。一部は、QML Media Player Exampleに含まれるものを発展させたものです。

新機能

このサンプルアプリケーションには、PlaylistInfo やThemeInfo など、タイプによって実装された新しい機能がいくつかあります。これらの実装方法の詳細については、それぞれの.qmlファイルを参照してください。

ソースファイル

code.qt.io 上のサンプルプロジェクト

関連項目： すべての Qt サンプル、Qt Quick のサンプルとチュートリアル、およびQt Multimedia のサンプル。

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