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

QML メディアプレーヤーの例

QMLのMediaPlayer 型を使用したオーディオおよびビデオの再生。

再生コントロールと動画プレビュー領域が表示された動画プレーヤー

このサンプルでは、さまざまなコーデックを使用してオーディオおよびビデオファイルを再生できる、シンプルなマルチメディアプレーヤーを紹介します。

例の動作確認

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

MediaPlayerのインスタンス化

この例の QML コードのエントリポイントは `Main.qml` です。ここでは `ApplicationWindow ` が作成され、`id`、`title`、`width `、`height ` などのプロパティが設定されます。

ApplicationWindow {
    id: root
    title: qsTr("Multimedia Player")
    width: 1280
    height: 720

次に、MediaPlayer が作成され、動画および音声の出力を担当する2つのプロパティが定義されます。1つ目は、動画ビューファインダーをレンダリングするvideoOutput 、2つ目は、プレーヤーの音声出力を提供するaudioOutput です。

MediaPlayer {
    id: mediaPlayer
    ...
videoOutput: videoOutput
audioOutput: AudioOutput {
    id: audio
    muted: playbackController.muted
    volume: playbackController.volume
}
    ...
VideoOutput {
    id: videoOutput
    anchors.fill: parent
    visible: mediaPlayer.mediaStatus > 0

    TapHandler {
        onDoubleTapped: {
            root.fullScreen ?  root.showNormal() : root.showFullScreen()
            root.fullScreen = !root.fullScreen
        }
    }
}

VideoOutput 型のvisible プロパティは、MediaPlayer のmediaStatus プロパティが0より大きい場合に、true に設定されます。mediaStatus は列挙型であり、メディアが設定されていない場合は0となり、それ以外の場合は0より大きくなります。したがって、メディアが設定されている場合、VideoOutput は表示されます。

MediaPlayer 型には、エラー処理のために特にオーバーライドできるonErrorOccurred というシグナルプロパティがあります。この場合、シグナルはopen() メソッドを使用してMessageDialog を開き、そのtext プロパティをerrorString というMediaPlayer プロパティに設定します。

onErrorOccurred: {
    mediaError.text = mediaPlayer.errorString
    mediaError.open()
}

再生コントロール

実用的なメディアプレーヤーを実現するには、再生を制御するためのインターフェースが必要です。これは専用のコンポーネントファイル `PlaybackControl.qml` 内に作成され、`Main.qml` 内でインスタンス化されます。

PlaybackControl {
    id: playbackController
    ...
onTracksChanged: {
    audioTracksInfo.read(mediaPlayer.audioTracks)
    videoTracksInfo.read(mediaPlayer.videoTracks)
    subtitleTracksInfo.read(mediaPlayer.subtitleTracks, 6) /* QMediaMetaData::Language = 6 */
    updateMetadata()
    mediaPlayer.play()
}

オブジェクトが作成されると、トラック情報、メタデータ情報、およびMediaPlayer オブジェクト自体がこの型に転送されます。PlaybackControl.qml 内では、これらの各オブジェクトにrequired property が設定されており、PlaybackControl オブジェクトの作成時にこれらのプロパティを設定する必要があります。

Item {
    id: playbackController

    required property MediaPlayer mediaPlayer
    required property MetadataInfo metadataInfo
    required property TracksInfo audioTracksInfo
    required property TracksInfo videoTracksInfo
    required property TracksInfo subtitleTracksInfo

これらの再生コントロールは、いくつかのセクションに分類できます。パネルの左上には、ファイルエクスプローラーからファイルを選択するか、URLを入力してファイルを開くためのボタン群があります。ファイルは、source プロパティを設定することでMediaPlayer に読み込まれます。両方のボタンは、CustomButton custom component を使用してインスタンス化されます。

CustomButton {
    id: fileDialogButton
    icon.source: "../images/open_new.svg"
    flat: false
    onClicked: fileDialog.open()
}

CustomButton {
    id: openUrlButton
    icon.source: "../images/link.svg"
    flat: false
    onClicked: urlPopup.open()
}

3つのボタンが作成され、このパネルの中央に配置されます。これらは、再生、一時停止、および10秒前または10秒後の位置へのスキップを処理します。メディアの再生と一時停止は、それぞれplay() メソッドとpause() メソッドを使用して行われます。再生ボタンまたは一時停止ボタンを描画するタイミングを知るために、playbackState プロパティが照会されます。たとえば、その値が列挙型の値MediaPlayer.PlayingState と等しい場合、一時停止ボタンが描画されます。

CustomRoundButton {
    id: playButton
    visible: playbackController.mediaPlayer.playbackState !== MediaPlayer.PlayingState
    icon.source: "../images/play_symbol.svg"
    onClicked: playbackController.mediaPlayer.play()
}

CustomRoundButton {
    id: pauseButton
    visible: playbackController.mediaPlayer.playbackState === MediaPlayer.PlayingState
    icon.source: "../images/pause_symbol.svg"
    onClicked: playbackController.mediaPlayer.pause()
}

10秒前または10秒後に移動するには、MediaPlayer 型のposition を10,000ミリ秒分インクリメントし、setPosition() メソッドを使用して設定します。

CustomRoundButton {
    id: forward10Button
    icon.source: "../images/forward10.svg"
    onClicked: {
        const pos = Math.min(playbackController.mediaPlayer.duration,
                           playbackController.mediaPlayer.position + 10000)
        playbackController.mediaPlayer.setPosition(pos)
    }
}

再生のシークとオーディオ

PlaybackControl.qml では、AudioControl 型とPlaybackSeekControl 型のインスタンスが生成されます。これらはそれぞれ独自のコンポーネントファイルで定義されており、音量制御と再生位置のシークを担当しています。AudioControl 型は、ミュート用のボタンと、QtQuick Controls から派生したSlider を定義し、プレーヤーの音量を設定します。これらの属性は、mute およびvolume プロパティを定義することで公開され、Main.qml 内のAudioOutput 定義からアクセスできます。

property alias muted: muteButton.checked
property real volume: slider.value

PlaybackSeekControl は、RowLayout を使用しており、その内部にはSlider が含まれ、その両側にText アイテムが配置されています。2つのText アイテムは、再生中のメディアの現在時刻と残り時間を表示します。これらは両方とも、MediaPlayer 型の2つのプロパティ、position （現在の再生位置をミリ秒単位で返す）とduration （メディアの再生時間をミリ秒単位で返す）を使用して計算されます。

Label {
    id: currentTime
    Layout.preferredWidth: 45
    text: seekController.formatToMinutes(seekController.mediaPlayer.position)
    horizontalAlignment: Text.AlignLeft
    font.pixelSize: 11
}
    ...
Label {
    id: remainingTime
    Layout.preferredWidth: 45
    text: seekController.formatToMinutes(seekController.mediaPlayer.duration - seekController.mediaPlayer.position)
    horizontalAlignment: Text.AlignRight
    font.pixelSize: 11
}

Slider は、メディアプレーヤーがシーク可能であり、例えばライブメディアではない場合にのみ有効になります。MediaPlayer 型には、これに対応するseekable というプロパティがあります。Slider のvalue は、MediaPlayer のposition およびduration プロパティを使用して計算されます。

enabled: seekController.mediaPlayer.seekable
value: seekController.mediaPlayer.position / seekController.mediaPlayer.duration

メタデータとトラック情報

PlaybackControl 型は、SettingsPopup をインスタンス化します。これには、現在読み込まれているメディアおよびトラック選択に関するメタデータ情報に加え、再生速度を更新する機能が含まれています。このPopup は、SettingsPopup.qml で定義されています。

ユーザーが選択可能な再生設定とメタデータ情報

メタデータは、専用のコンポーネントファイルMetadataInfo.qml に格納されています。このファイルには、ListModel 、それをクリアする関数clear() 、およびデータを設定する関数read(MediaMetadata metadata) が含まれています。read(MediaMetadata metadata) 関数は、MediaMetaData 型のオブジェクトをパラメータとして受け取り、そのキー・バリュー構造をナビゲートして、ListView のmodel にデータを抽出します。これを行うために使用されるメソッドは、MediaMetaData のすべてのキーを返すkeys() と、指定されたkey に対するvalue を返す{stringValue(Key key)}です。

function read(metadata) {
    if (!metadata)
        return
    for (const key of metadata.keys())
        if (metadata.stringValue(key))
            listModel.append({
                                name: metadata.metaDataKeyToString(key),
                                value: metadata.stringValue(key)
                            })
}

ListModel {
    id: listModel
}

その後、データはSettingsPopup.qml 内でListView 型として表示されます。このListView のdelegate は、2つのText 項目の行で構成されており、MediaMetaData 項目から抽象化されたキーと値のペアに対応しています。

Popup の反対側には、オーディオ、ビデオ、字幕の再生速度制御およびトラック選択機能があります。再生速度はComboBox から選択され、playbackRate プロパティを使用して設定されます。

settingsController.mediaPlayer.playbackRate = (currentIndex + 1) * 0.25

TracksInfo.qml で定義されているTracksInfo という型には、トラックに関するデータが含まれています。具体的には、トラックのタイトル、あるいは字幕の場合は言語情報を含むListModel です。この情報は、TracksInfo 型で定義されているread(MediaMetadata mediaMetadata) 関数を呼び出すことで、Main.qml に設定されます。

onTracksChanged: {
    audioTracksInfo.read(mediaPlayer.audioTracks)
    videoTracksInfo.read(mediaPlayer.videoTracks)
    subtitleTracksInfo.read(mediaPlayer.subtitleTracks, 6) /* QMediaMetaData::Language = 6 */
    updateMetadata()
    mediaPlayer.play()
}

その後、SettingsPopup 内のComboBoxで、TracksInfo に定義されたmodel を照会し、現在のトラックを選択します。

settingsController.mediaPlayer.pause()
tracksInfo.selectedTrack = currentIndex
settingsController.mediaPlayer.play()

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

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