QML简易视频播放器

import QtQuick 2.14
import QtMultimedia 5.0
import QtQuick.Window 2.14
import QtQuick.Controls 2.14


//运行报错：Warning: "No decoder available for type 'video/x-h264, stream-format=(string)avc...
//sudo apt-get install gstreamer1.0-libav 即可解决  Qt在linux下使用gstreamer，Windows下使用directshow
ApplicationWindow {
    width: 800
    height: 600
    title: "视频"
    visible: true
    property var date: new Date()

    function parseTotalDuration(time) {
        date.setTime(time)
        let h = time / 3600000
        if (h >= 1) {
            //大于1小时小于10
            if (h < 10) {
                return "0" + Math.floor(h) + ":" + Qt.formatDateTime(date, "mm:ss")
            } else {
                return Math.floor(h) + ":" + Qt.formatDateTime(date, "mm:ss")
            }
        } else {
            return Qt.formatTime(date, "mm:ss")
        }
    }

    Rectangle {
        id: video
        width: parent.width
        height: 450

        MediaPlayer {
            id: mediaPlayer
            source: "http://vfx.mtime.cn/Video/2019/03/09/mp4/190309153658147087.mp4"
            autoPlay: true
            onError: {
                console.log(errorString)
            }
            //position 属性 单位是毫秒，onPositionChanged 信号处理器，实时显示进度
            onPositionChanged: {
                progress.text = parseTotalDuration(
                            position) + progress.time
            }
            //duration 单位是毫秒，onDurationChanged 信号处理器，可以取到时长
            onDurationChanged: {
                progress.time = " / " + parseTotalDuration(duration)
            }
            onPlaybackStateChanged: {
                switch (playbackState) {
                case MediaPlayer.PlayingState:
                    state.text = "播放中"
                    break
                case MediaPlayer.PausedState:
                    state.text = "已暂停"
                    break
                case MediaPlayer.StoppedState:
                    state.text = "已结束"
                    break
                }
            }
            //多媒体元信息
            onStatusChanged: {
                switch (status) {
                case MediaPlayer.Loaded:
                    console.log(metaData.albumArtist, metaData.albumTitle,
                                metaData.author, metaData.channelCount)
                    break
                }
            }
        }

        VideoOutput {
            anchors.fill: parent
            source: mediaPlayer
        }

        MouseArea {
            anchors.fill: parent
            onDoubleClicked: {
                if (mediaPlayer.playbackState === 2) {
                    mediaPlayer.play()
                } else if (mediaPlayer.playbackState === 1) {
                    mediaPlayer.pause()
                } else {
                    mediaPlayer.play()
                }
            }
        }
    }
    Connections {
        target: mediaPlayer
        onStopped: {

        }
    }
    Text {
        id: progress
        anchors.left: video.left
        anchors.top: video.bottom
        anchors.topMargin: 10
        color: "#000000"
        font.pointSize: 12
        property string time
    }
    Text {
        id: state
        anchors {
            verticalCenter: progress.verticalCenter
            horizontalCenter: parent.horizontalCenter
        }

        color: "#000000"
        font.pointSize: 12
    }
    Rectangle {
        id: progressBar
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: progress.bottom
        anchors.topMargin: 6
        height: 6
        radius: 3
        color: "darkgray"

        Rectangle {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            radius: 3
            width: mediaPlayer.duration > 0 ? parent.width * mediaPlayer.position
                                              / mediaPlayer.duration : 0
            color: "#4A6DBC"
        }

        MouseArea {
            property int pos
            anchors.fill: parent

            onClicked: {
                //seekable 属性指示媒体是否支持 seek,为true时，用seek(pos)方法来定位播放
                if (mediaPlayer.seekable)
                    pos = mediaPlayer.duration * mouse.x / width
                mediaPlayer.seek(pos)
            }
        }
    }
}