最后添加一些动画效果,以及附件功能。
如果感兴趣可以学习一下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 }
}
]
}