在QML应用程序中,最基本的媒体应用是播放媒体。使用MediaPlayer元素可以完成它,如果源是一个图片或者视频,可以选择结合VideoOutput元素。MediaPlayer元素有一个source属性指向需要播放的媒体。当媒体源被绑定后,简单的调用play函数就可以开始播放。
如果你想播放一个可视化的媒体,例如图片或者视频等,你需要配置一个VideoOutput元素。MediaPlayer播放通过source属性与视频输出绑定。
给MediaPlayer元素一个视频文件作为source。一个VideoOutput被创建和绑定到媒体播放器上。一旦主要部件完全初始化,例如在Component.onCompleted中,播放器的play函数被调用。
import QtQuick
import QtQuick.Window
import QtMultimedia
import QtQuick.Controls
Window {
id: root
width: 640
height: 480
visible: true
MediaPlayer{
id: player
source: "../1.mp4"
audioOutput:AudioOutput{
volume: volumeSlider.value
}
videoOutput: videoOutput
}
VideoOutput{
id:videoOutput
width: root.width-80;
anchors.centerIn: parent
}
Rectangle{
color: 'black'
width: col.width;height: col.height
anchors.top:parent.top
anchors.right:parent.right
Column{
id: col
Text {
color: 'white'
text: qsTr("音量")
}
Slider{
id: volumeSlider
orientation: Qt.Vertical
value: 0.5
anchors.margins: 20
}
}
}
Row{
height: 50;
anchors.left: parent.left
anchors.right:parent.right
anchors.bottom: parent.bottom
anchors.margins: 20
spacing:20
Button{
width: 50
anchors.verticalCenter: parent.verticalCenter
text: player.playbackState===MediaPlayer.PlayingState?'Pause':'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:progressSlider
width: parent.width-80
anchors.verticalCenter: parent.verticalCenter
value: player.duration>0?player.position/player.duration:0
background: Rectangle{
implicitHeight: 8
radius: 3
color: 'lightgreen'
Rectangle{
width: progressSlider.value*parent.width
height: parent.height
color:'blue'
radius: 3
}
}
onMoved:function(){
player.position=player.duration*progressSlider.value
}
}
}
Component.onCompleted: {
player.play()
}
}