当前位置：首页 > article >正文

qml制作简单的播放器--MediaPlayer

article 2024/11/15 4:08:28

MediaPlayer

在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()
    }
}