QML带进度条的视频播放功能

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtMultimedia 5.4

ApplicationWindow {
    title: qsTr("Hello World")
    //width: Screen.desktopAvailableWidth
    //height: Screen.desktopAvailableHeight
    width: 640
    height: 480
    visible: true

    Rectangle {
        color: "black"
        anchors.fill: parent

        MediaPlayer {
            id: mediaPlayer
            source: "file:///c:/test.mp4"
            autoPlay: true
        }

        VideoOutput {
            id: video
            anchors.fill: parent
            source: mediaPlayer
        }
    }

    Rectangle {
        id: progressBar
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 0
        height: 10
        color: "lightGray"

        Rectangle {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: mediaPlayer.duration>0?parent.width*mediaPlayer.position/mediaPlayer.duration:0
            color: "darkGreen"
        }

        MouseArea {
            property int pos
            anchors.fill: parent

            onClicked: {
            if (mediaPlayer.seekable)
                pos = mediaPlayer.duration * mouse.x/width
                mediaPlayer.seek(pos)
            }
        }
    }
}


QML带进度条的视频播放功能_第1张图片

 

代码:

 

你可能感兴趣的:(视频,进度条,qml)