使用qml 实现简单的播放器（4）

最后添加一些动画效果，以及附件功能。

如果感兴趣可以学习一下qml 很简单的学习，可以实现比较复杂的功能。

整体的代码如下：

import QtQuick 2.0
import QtMultimedia 5.0

Rectangle {
    id: playerUI
    width: 800
    height: 600
    state: "hidenPlayerBar"
    color: "black"

    property real forwardStep: 0.1
    property real heightOfPlayBar: 80
    property alias mediaURI: mediaPlayer.source

    signal returned

    MouseArea {
        anchors.fill: parent
        onClicked: {
            playerUI.state=='showPlayerBar' ? playerUI.state='hidenPlayerBar' : playerUI.state='showPlayerBar'
            startPlay();
        }
    }

    onReturned: {
        stopPlay()
    }


    MediaPlayer {
        id: mediaPlayer
        source: "videos/feng.mp4"
    }

    VideoOutput {
        anchors.fill: parent
        source: mediaPlayer
    }

    function startPlay() {
        mediaPlayer.play();
    }

    function stopPlay() {
        mediaPlayer.stop();
    }

    function dateFormat(second) {
        var hh,mm,ss;
        second = typeof second === 'string' ? parseInt(second) : second;
        if(!second || second < 0) {
            return;
        }    

        hh = second / 3600 | 0;
        second = Math.round(second) - hh * 3600;
        mm = second / 60 | 0;
        ss = Math.round(second) - mm * 60;
        if(Math.round(hh) < 10) {
            hh = '0' + hh;
        }
        if(Math.round(mm) < 10) {
            mm = '0' + mm;
        }
        if(Math.round(ss) < 10) {
            ss = '0' + ss;
        }
        return ( hh + ':' + mm + ':' + ss);
    }

    Rectangle {
        id: playerBar
        width: parent.width
        height: 100
        color: "grey"
        opacity: 0.3
        anchors.bottom: parent.bottom

        Column {
            width: parent.width/3
            height: parent.height
            Text {
                text: "author: " + mediaPlayer.metaData.author
            }
            Text {
                text: "date: " + mediaPlayer.metaData.date
            }
            Text {
                text: "video codec: " + mediaPlayer.metaData.videoCodec
            }
            Text {
                text: "audio codec: " + mediaPlayer.metaData.audioCodec
            }
        }

        Row {
            id: processBar
            x: parent.width/3
            height: parent.height/2 - 10

            Text {
                id: current
                text: dateFormat(mediaPlayer.position/1000)
            }


            Rectangle {
                id: videoProcess
                color: "grey"
                width: playerUI.width*0.4
                height: parent.height/2

                Rectangle {
                    id: currentProcess
                    color: "lightblue"
                    width: (parent.width/(mediaPlayer.duration/1000))*(mediaPlayer.position/1000)
                    height: parent.height
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        mediaPlayer.seek((mediaPlayer.duration/parent.width)*mouseX)
                    }
                }
            }
            Text {
                id: duration
                text: dateFormat(mediaPlayer.duration/1000)
            }
        }

        Row {
            id: toolBar
            height: parent.height/2
            x: parent.width/3
            anchors.bottom: parent.bottom
            spacing: 10
            Image {
                source: "images/OSDRewindFO.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        mediaPlayer.playbackRate -= playerUI.forwardStep
                    }
                }
            }
            Image {
                source: "images/OSDPlayFO.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        mediaPlayer.play()
                    }
                }
            }
            Image {
                source: "images/OSDPauseFO.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        mediaPlayer.pause()
                    }
                }
            }
            Image {
                source: "images/OSDForwardFO.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        mediaPlayer.playbackRate += playerUI.forwardStep
                    }
                }
            }
            Image {
                source: "images/icon_back.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        returned()
                    }
                }
            }
        }
    }

    states: [
        State {
            name: "showPlayerBar"
            PropertyChanges { target: playerBar; y: playerUI.height - 100; height: 100}
        },
        State {
            name: "hidenPlayerBar"
            PropertyChanges { target: playerBar; y: playerUI.height; height:0 }
        }
    ]

    transitions: [
        Transition {
            NumberAnimation { properties: y; duration: 1000 }
        }
    ]
}