Playing Media

播放媒体

The most basic case of multimedia integration in a QML application is for it to playback media. The QtMultimedia module supports this by providing a dedicated QML component: the MediaPlayer.

QML应用程序中多媒体集成的最基本情况是播放媒体。QtMultimedia模块通过提供一个专用的QML组件来支持这一点：MediaPlayer。

The MediaPlayer component is a non-visual item that connects a media source to one or several output channel(s). Depending on the nature of the media (i.e. audio, image or video) various output channel(s) can be configured.

MediaPlayer组件是将媒体源连接到一个或多个输出通道的非可视项。根据媒体的性质（即音频、图像或视频），可以配置各种输出通道。

Playing audio

播放音频

In the following example, the MediaPlayer plays a mp3 sample audio file from a remote URL in an empty window:

在以下示例中，MediaPlayer在空窗口中从远程URL播放mp3示例音频文件：

import QtQuick
import QtMultimediaWindow {width: 1024height: 768visible: trueMediaPlayer {id: playersource: "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_2MG.mp3"audioOutput: AudioOutput {}}Component.onCompleted: {player.play()}
}

In this example, the MediaPlayer defines two attributes:

在本例中，MediaPlayer定义了两个特性：

source: it contains the URL of the media to play. It can either be embedded (qrc://), local (file://) or remote (https://).
source：它包含要播放的媒体的URL。它可以嵌入（qrc://）、本地（file://）或远程（https://）。
audioOutput: it contains an audio output channel, AudioOutput, connected to a physical output device. By default, it will use the default audio output device of the system.
audioOutput：它包含一个连接到物理输出设备的音频输出通道audioOutput。默认情况下，它将使用系统的默认音频输出设备。

As soon as the main component has been fully initialized, the player’s play function is called:

一旦主组件完全初始化，播放器的播放功能play()即被调用：

Component.onCompleted: {player.play()
}

示例源码下载

Playing a video

播放视频

If you want to play visual media such as pictures or videos, you must also define a VideoOutput element to place the resulting image or video in the user interface.

如果要播放图片或视频等视觉媒体，还必须定义VideoOutput元素类型，以将生成的图像或视频放置在用户界面中。

In the following example, the MediaPlayer plays a mp4 sample video file from a remote URL and centers the video content in the window:

在以下示例中，MediaPlayer从远程URL播放mp4示例视频文件，并将视频内容集中在窗口中：

import QtQuick
import QtMultimediaWindow {width: 1920height: 1080visible: trueMediaPlayer {id: playersource: "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1920_18MG.mp4"audioOutput: AudioOutput {}videoOutput: videoOutput}VideoOutput {id: videoOutputanchors.fill: parentanchors.margins: 20}Component.onCompleted: {player.play()}
}

In this example, the MediaPlayer defines a third attribute:

在本例中，MediaPlayer定义了第三个特性：

videoOutput: it contains the video output channel, VideoOutput, representing the visual space reserved to display the video in the user interface.
videoOutput：它包含视频输出通道videoOutput，代表在用户界面中显示视频所保留的视觉空间。

TIP

注

Please note that theVideoOutputcomponent is a visual item. As such, it's essential that it is created within the visual components hierarchy and not within theMediaPlayeritself.

请注意，VideoOutput组件是一个可视项。因此，它必须在视觉组件层次结构中创建，而不是在MediaPlayer本身中创建。

示例源码下载

Controlling the playback

控制播放

The MediaPlayer component offers several useful properties. For instance, the duration and position properties can be used to build a progress bar. If the seekable property is true, it is even possible to update the position when the progress bar is tapped.

MediaPlayer组件提供了几个有用的属性。例如，持续时间duration和位置position属性可用于构建进度条。如果seekable属性为true，甚至可以在点击进度条时更新位置position。

It's also possible to leverage AudioOutput and VideoOutput properties to customize the experience and provide, for instance, volume control.

还可以利用音频输出AudioOutput和视频输出VideoOutput属性来定制体验，并提供音量控制等功能。

The following example adds custom controls for the playback:

以下示例为播放添加了自定义控件：

a volume slider
音量滑块
a play/pause button
播放/暂停按钮
a progress slider
进度滑块

import QtQuick
import QtQuick.Controls
import QtMultimediaWindow {id: rootwidth: 1920height: 1080visible: trueMediaPlayer {id: playersource: Qt.resolvedUrl("sample-5s.mp4")audioOutput: audioOutputvideoOutput: videoOutput}AudioOutput {id: audioOutputvolume: volumeSlider.value}VideoOutput {id: videoOutputwidth: videoOutput.sourceRect.widthheight: videoOutput.sourceRect.heightanchors.horizontalCenter: parent.horizontalCenter}Slider {id: volumeSlideranchors.top: parent.topanchors.right: parent.rightanchors.margins: 20orientation: Qt.Verticalvalue: 0.5}Item {height: 50anchors.left: parent.leftanchors.right: parent.rightanchors.bottom: parent.bottomanchors.margins: 20Button {anchors.horizontalCenter: parent.horizontalCentertext: player.playbackState ===  MediaPlayer.PlayingState ? qsTr("Pause") : qsTr("Play")onClicked: {switch(player.playbackState) {case MediaPlayer.PlayingState: player.pause(); break;case MediaPlayer.PausedState: player.play(); break;case MediaPlayer.StoppedState: player.play(); break;}}}Slider {id: progressSliderwidth: parent.widthanchors.bottom: parent.bottomenabled: player.seekablevalue: player.duration > 0 ? player.position / player.duration : 0background: Rectangle {implicitHeight: 8color: "white"radius: 3Rectangle {width: progressSlider.visualPosition * parent.widthheight: parent.heightcolor: "#1D8BF8"radius: 3}}handle: Item {}onMoved: function () {player.position = player.duration * progressSlider.position}}}Component.onCompleted: {player.play()}
}

The volume slider

音量滑块

A vertical Slider component is added on the top right corner of the window, allowing the user to control the volume of the media:

窗口右上角添加了一个垂直滑块组件Slider，允许用户控制媒体的音量：

Slider {id: volumeSlideranchors.top: parent.topanchors.right: parent.rightanchors.margins: 20orientation: Qt.Verticalvalue: 0.5
}

The volume attribute of the AudioOutput is then mapped to the value of the slider:

然后音频输出的音量特性映射到滑块的值：

AudioOutput {id: audioOutputvolume: volumeSlider.value
}

Play / Pause

播放/暂停

A Button component reflects the playback state of the media and allows the user to control this state:

按钮组件Button反映媒体的播放状态，并允许用户控制该状态：

Button {anchors.horizontalCenter: parent.horizontalCentertext: player.playbackState ===  MediaPlayer.PlayingState ? qsTr("Pause") : qsTr("Play")onClicked: {switch(player.playbackState) {case MediaPlayer.PlayingState: player.pause(); break;case MediaPlayer.PausedState: player.play(); break;case MediaPlayer.StoppedState: player.play(); break;}}
}

Depending on the playback state, a different text will be displayed in the button. When clicked, the corresponding action will be triggered and will either play or pause the media.

根据播放状态，按钮中将显示不同的文本。单击时，将触发相应的操作，并播放或暂停媒体。

TIP

注

The possible playback states are listed below:

下面列出了可能的播放状态：

MediaPlayer.PlayingState: The media is currently playing.

MediaPlayer.PlayingState: 媒体正在播放

MediaPlayer.PausedState: Playback of the media has been suspended.

MediaPlayer.PausedState: 媒体播放已暂停

MediaPlayer.StoppedState: Playback of the media is yet to begin.

MediaPlayer.StoppedState: 媒体播放尚未开始

Interactive progress slider

交互式进度滑块

A Slider component is added to reflect the current progress of the playback. It also allows the user to control the current position of the playback.

将添加一个滑块组件Slider以反映播放的当前进度。它还允许用户控制播放的当前位置。

Slider {id: progressSliderwidth: parent.widthanchors.bottom: parent.bottomenabled: player.seekablevalue: player.duration > 0 ? player.position / player.duration : 0background: Rectangle {implicitHeight: 8color: "white"radius: 3Rectangle {width: progressSlider.visualPosition * parent.widthheight: parent.heightcolor: "#1D8BF8"radius: 3}}handle: Item {}onMoved: function () {player.position = player.duration * progressSlider.position}
}

A few things to note on this sample:

此示例中需要注意的几点：

This slider will only be enabled when the media is seekable (line 5)
此滑块仅在媒体可搜索时启用（第5行）
Its value will be set to the current media progress, i.e. player.position / player.duration (line 6)
其值将设置为当前媒体进度，即player.position / player.duration（第6行）
The media position will be (also) updated when the slider is moved by the user (lines 19-21)
当用户移动滑块时，介质位置也将更新（第19-21行）

示例源码下载

The media status

媒体状态

When using MediaPlayer to build a media player, it is good to monitor the status property of the player. Here is an enumeration of the possible statuses, ranging from MediaPlayer.Buffered to MediaPlayer.InvalidMedia. The possible values are summarized in the bullets below:

使用MediaPlayer构建媒体播放器时，最好监视播放器的状态属性status。下面列举了可能的状态，包括MediaPlayer.Buffered到MediaPlayer.InvalidMedia。以下项目符号总结了可能的值：

MediaPlayer.NoMedia. No media has been set. Playback is stopped.
MediaPlayer.NoMedia. 没有设置媒体。播放停止。
MediaPlayer.Loading. The media is currently being loaded.
MediaPlayer.Loading. 媒体当前正在加载。
MediaPlayer.Loaded. The media has been loaded. Playback is stopped.
MediaPlayer.Loaded. 媒体已加载。播放停止。
MediaPlayer.Buffering. The media is buffering data.
MediaPlayer.Buffering.媒体正在缓冲数据。
MediaPlayer.Stalled. The playback has been interrupted while the media is buffering data.
MediaPlayer.Stalled. 媒体缓冲数据时，播放被中断。
MediaPlayer.Buffered. The media has been buffered, this means that the player can start playing the media.
MediaPlayer.Buffered.媒体已缓冲，这意味着播放机可以开始播放媒体。
MediaPlayer.EndOfMedia. The end of the media has been reached. Playback is stopped.
MediaPlayer.EndOfMedia. 媒体的末日已经到来。播放停止。
MediaPlayer.InvalidMedia. The media cannot be played. Playback is stopped.
MediaPlayer.InvalidMedia.媒体无法播放。播放停止。
MediaPlayer.UnknownStatus. The status of the media is unknown.
MediaPlayer.UnknownStatus.媒体的状况不得而知。

As mentioned in the bullets above, the playback state can vary over time. Calling play, pause or stop alters the state, but the media in question can also have an effect. For example, the end can be reached, or it can be invalid, causing playback to stop.

如上所述，播放状态可能会随时间而变化。调用play、pause或stop会改变状态，但相关媒体也会产生影响。例如，可以到达终点，也可以无效，导致播放停止。

TIP

注

It is also possible to let theMediaPlayerto loop a media item. Theloopsproperty controls how many times thesourceis to be played. Setting the property toMediaPlayer.Infinitecauses endless looping. Great for continuous animations or a looping background song.

也可以让MediaPlayer循环媒体项目。loops属性控制播放源source的次数。将属性设置为MediaPlayer.Infinite导致无限循环。非常适合连续动画或循环背景歌曲。

Qt6 QML Book/多媒体/播放媒体相关推荐

幻世（OurDream）2D图形引擎使用教程11——播放媒体文件（1）
声明:本教程版权归Lizcst Software Lab所有,欢迎转载,但是转载必须保留本段声明文字,并注明文章来源:http://blog.csdn.net/kflizcst 谢谢合作! 播放媒体是 ...
UWP 播放媒体控件
最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...
让媒体播放控件，播放媒体 0201
让媒体播放控件,播放媒体 0201 需要媒体文件的路径文件夹目录 E:\KuGou 歌曲名称告白汽球周杰伦.mkv完整路径 E:\KuGou\告白汽球周杰伦.mkv 核心
火狐浏览器播放媒体没有声音怎么办？
1.检查是否将网页静音如果是这样喇叭关闭了,将其打开就可以了打开喇叭 2.其他的浏览器播放媒体是否有声音如果也没有打开电脑的声音设置: 如果都没有解决:则看下面的最后一种方法 3.打开火狐浏览器 ...
Windows11更新最新系统版本后无法播放媒体声音
故障机器Dell为例 step1:检测系统提示音是否正常,正常可观察第二步: step2:打开计算机管理-设备管理器-观察声音设备是否正常,可右键编辑重启驱动 step3:打开无法播放媒体声音的设备查 ...
android静音模式,android静音模式下仍可以播放媒体声音以及调节其大小。。。。...
不多说,先上图,先看一张我开发板的截图 ... 首先我先解释一下: 由于我的开发板硬件没有调节声音的按键,因而只能在图中所示处调节,但是在静音之后,那个声音调节又不可点击,所以我们要在静音模式下使 ...
[Qt6][QML][教程]Image控件图片的更新以及相对路径的访问
最近用Qt6+QML仿制网易云切歌时候MAC的通知界面,调用Image控件的时候发现了一些问题. 教程被应用在MediaStateT中 MediaStateT Github项目地址: https:// ...
QT多媒体播放视频并显示字幕
标签: # Qt qt 多媒体字幕视频播放 QVideoWidget *videoWidget = new QVideoWidget();QMediaPlayer *player = ne ...
qml m3u8流播放时，卡主修复策略
项目场景: 回到项目背景,产品提供了wifi和4G双网络功能,应用框架Qt,UI用的是qml,QT版本是5.10.1, 问题描述在QMl中,使用MediaPlayer 来播放m3u8流,发现如果正在 ...

Qt6 QML Book/多媒体/播放媒体

Playing Media

播放媒体

Playing audio

播放音频

Playing a video

播放视频

Controlling the playback

控制播放

The volume slider

音量滑块

Play / Pause

播放/暂停

Interactive progress slider

交互式进度滑块

The media status

媒体状态

Qt6 QML Book/多媒体/播放媒体相关推荐

最新文章

热门文章