多媒体应用

# 08.多媒体应用

# 目录介绍

8.1 多媒体介绍
8.2 播放音频
- 8.2.1 播放音频介绍
- 8.2.2 MediaPlayer
- 8.2.3 SoundEffect
- 8.2.4 控制音量
- 8.2.5 监听播放状态
- 8.2.6 音频总结
8.3 播放视频
- 8.3.1 播放视频介绍
- 8.3.2 如何播放视频
- 8.3.3 控制音量
- 8.3.4 监听播放状态
- 8.3.5 控制播放进度
- 8.3.6 视频总结
8.4 媒体播放器

# 8.2 播放音频

# 8.2.1 播放音频介绍

在 QML 中，播放音频可以通过 MediaPlayer 或 SoundEffect 组件实现。

# 8.2.2 MediaPlayer

使用 MediaPlayer 播放音频，MediaPlayer 是 Qt Multimedia 模块的一部分，支持播放音频和视频文件。

示例：播放本地音频文件

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 400
    height: 200

    MediaPlayer {
        id: mediaPlayer
        source: "file:///path/to/your/audio.mp3" // 替换为你的音频文件路径
    }

    Row {
        anchors.centerIn: parent
        spacing: 10

        Button {
            text: "播放"
            onClicked: mediaPlayer.play()
        }

        Button {
            text: "暂停"
            onClicked: mediaPlayer.pause()
        }

        Button {
            text: "停止"
            onClicked: mediaPlayer.stop()
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

说明：

source：指定音频文件的路径（可以是本地文件或网络 URL）。
play()：开始播放。
pause()：暂停播放。
stop()：停止播放。

示例：播放网络音频

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 400
    height: 200

    MediaPlayer {
        id: mediaPlayer
        source: "https://www.example.com/audio.mp3" // 替换为网络音频 URL
    }

    Row {
        anchors.centerIn: parent
        spacing: 10

        Button {
            text: "播放"
            onClicked: mediaPlayer.play()
        }

        Button {
            text: "暂停"
            onClicked: mediaPlayer.pause()
        }

        Button {
            text: "停止"
            onClicked: mediaPlayer.stop()
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 8.2.3 SoundEffect

使用 SoundEffect 播放短音频，SoundEffect 适用于播放短音频（如音效），支持低延迟播放。

示例：播放音效

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 400
    height: 200

    SoundEffect {
        id: soundEffect
        source: "file:///path/to/your/sound.wav" // 替换为你的音效文件路径
    }

    Button {
        text: "播放音效"
        anchors.centerIn: parent
        onClicked: soundEffect.play()
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

说明：

source：指定音效文件的路径。
play()：播放音效。

# 8.2.4 控制音量

可以通过 volume 属性控制音频的音量。示例：控制音量

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 400
    height: 200

    MediaPlayer {
        id: mediaPlayer
        source: "file:///path/to/your/audio.mp3"
        volume: 0.5 // 音量范围：0.0（静音）到 1.0（最大音量）
    }

    Slider {
        anchors.centerIn: parent
        width: 200
        from: 0.0
        to: 1.0
        value: mediaPlayer.volume
        onValueChanged: mediaPlayer.volume = value
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 8.2.5 监听播放状态

可以通过 status 属性监听播放状态。示例：显示播放状态

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 400
    height: 200

    MediaPlayer {
        id: mediaPlayer
        source: "file:///path/to/your/audio.mp3"
    }

    Text {
        anchors.centerIn: parent
        text: {
            switch (mediaPlayer.status) {
                case MediaPlayer.NoMedia: return "无媒体";
                case MediaPlayer.Loading: return "加载中";
                case MediaPlayer.Loaded: return "已加载";
                case MediaPlayer.Buffering: return "缓冲中";
                case MediaPlayer.Stalled: return "卡顿";
                case MediaPlayer.EndOfMedia: return "播放结束";
                case MediaPlayer.InvalidMedia: return "无效媒体";
                case MediaPlayer.UnknownStatus: return "未知状态";
                default: return "未知";
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 8.2.6 音频总结

在 QML 中播放音频的常用方法：

MediaPlayer：适合播放长音频或视频。
SoundEffect：适合播放短音效。
控制音量：通过 volume 属性。
监听状态：通过 status 属性。

# 8.3 播放视频

# 8.3.1 播放视频介绍

在 QML 中，播放视频可以通过 MediaPlayer 和 VideoOutput 组件实现。

# 8.3.2 如何播放视频

使用 MediaPlayer 和 VideoOutput 播放视频。MediaPlayer 用于控制视频的播放，VideoOutput 用于显示视频内容。

示例：播放本地视频文件

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    MediaPlayer {
        id: mediaPlayer
        source: "file:///path/to/your/video.mp4" // 替换为你的视频文件路径
    }

    VideoOutput {
        anchors.fill: parent
        source: mediaPlayer
    }

    Row {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10
        padding: 10

        Button {
            text: "播放"
            onClicked: mediaPlayer.play()
        }

        Button {
            text: "暂停"
            onClicked: mediaPlayer.pause()
        }

        Button {
            text: "停止"
            onClicked: mediaPlayer.stop()
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

说明：

source：指定视频文件的路径（可以是本地文件或网络 URL）。
VideoOutput：用于显示视频内容。
play()：开始播放。
pause()：暂停播放。
stop()：停止播放。

示例：播放网络视频

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    MediaPlayer {
        id: mediaPlayer
        source: "https://www.example.com/video.mp4" // 替换为网络视频 URL
    }

    VideoOutput {
        anchors.fill: parent
        source: mediaPlayer
    }

    Row {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10
        padding: 10

        Button {
            text: "播放"
            onClicked: mediaPlayer.play()
        }

        Button {
            text: "暂停"
            onClicked: mediaPlayer.pause()
        }

        Button {
            text: "停止"
            onClicked: mediaPlayer.stop()
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 8.3.3 控制音量

可以通过 volume 属性控制视频的音量。示例：控制音量

MediaPlayer {
    id: mediaPlayer
    source: "file:///path/to/your/video.mp4"
    volume: 0.5 // 音量范围：0.0（静音）到 1.0（最大音量）
}

1
2
3
4
5

# 8.3.4 监听播放状态

可以通过 status 属性监听播放状态。示例：显示播放状态

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    MediaPlayer {
        id: mediaPlayer
        source: "file:///path/to/your/video.mp4"
    }

    VideoOutput {
        anchors.fill: parent
        source: mediaPlayer
    }

    Text {
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        text: {
            switch (mediaPlayer.status) {
                case MediaPlayer.NoMedia: return "无媒体";
                case MediaPlayer.Loading: return "加载中";
                case MediaPlayer.Loaded: return "已加载";
                case MediaPlayer.Buffering: return "缓冲中";
                case MediaPlayer.Stalled: return "卡顿";
                case MediaPlayer.EndOfMedia: return "播放结束";
                case MediaPlayer.InvalidMedia: return "无效媒体";
                case MediaPlayer.UnknownStatus: return "未知状态";
                default: return "未知";
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 8.3.5 控制播放进度

可以通过 position 和 duration 属性控制播放进度。示例：显示和控制播放进度

import QtQuick 2.15
import QtMultimedia 5.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    MediaPlayer {
        id: mediaPlayer
        source: "file:///path/to/your/video.mp4"
    }

    VideoOutput {
        anchors.fill: parent
        source: mediaPlayer
    }

    Slider {
        id: progressSlider
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        width: 300
        from: 0
        to: mediaPlayer.duration
        value: mediaPlayer.position
        onMoved: mediaPlayer.position = value
    }

    Text {
        anchors.bottom: progressSlider.top
        anchors.horizontalCenter: parent.horizontalCenter
        text: formatTime(mediaPlayer.position) + " / " + formatTime(mediaPlayer.duration)
    }

    function formatTime(milliseconds) {
        var seconds = Math.floor(milliseconds / 1000);
        var minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;
        return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

说明：

position：当前播放位置（以毫秒为单位）。
duration：视频总时长（以毫秒为单位）。
Slider：用于控制播放进度。

# 8.3.6 视频总结

在 QML 中播放视频的常用方法：

MediaPlayer：用于控制视频的播放。
VideoOutput：用于显示视频内容。
控制音量：通过 volume 属性。
监听状态：通过 status 属性。
控制进度：通过 position 和 duration 属性。

上次更新: 2026/06/10, 11:13:41

← QML和C++ 模型和视图→