QML视频播放状态栏控件，封装后食用效果更佳

参考链接：QML播放条控件

QML菜鸡一个，参考了很多别人的视频播放栏控件，相互学习

我修改了一下，另外加了一些注释，这里可以直接拿去封装再用

以下是控件代码：

// VideoPlayStatusBar.qml
import QtQuick 2.0
import QtQml 2.1
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

// 状态栏整体
Rectangle{
    id:root
    color: background_color
    // 状态栏背景颜色
    property color background_color: "#BAFFFFFF"
    property string title: "播放状态栏"
    // 视频开始、结束、当前时间
    property var starDate: new Date()
    property var endDate: new Date()
    property var currentTime: new Date()
    // 是否播放、播放速度
    readonly property bool running: timer.running
    property int speed: 1

    // 定义信号 播放、移动、暂停、停止
    signal play()
    signal run(var currentTime , var step)
    signal pause()
    signal stop

    // 状态栏上部分 视频标题、控制按钮(居中)、当前时长
    Item {
        y:0
        width: parent.width
        height: parent.height / 2
        // 按钮排列
        Row{
            anchors.horizontalCenter: parent.horizontalCenter
            // 后退30秒
            PlaybarButton{
                icon_source: "file:../res/pic_tc/commom/speeddown.png"
                bottom_text: "后退"
                onClicked: {
                    var timeCache = currentTime.getTime() - 3000
                    slider.value = timeCache
                }

            }
            // 停止
            PlaybarButton{
                icon_source: "file:../res/pic_tc/commom/stop.png"
                bottom_text: "停止"
                onClicked: {
                    timer.stop()
                }
            }
            // 暂停 & 开始
            PlaybarButton{
                // 判断定时器运行状态，根据状态切换图片资源
                icon_source: running ? "file:../res/pic_tc/commom/pause.png" : "file:../res/pic_tc/commom/play.png"
                bottom_text: running ? "暂停" : "开始"
                onClicked: {
                    //  判断定时器运行状态，控制媒体播放
                    if(!running){
                        timer.start()
                        play()
                    }else{
                        timer.stop()
                        pause()
                    }
                }
            }
            // 前进30秒
            PlaybarButton{
                icon_source: "file:../res/pic_tc/commom/speedup.png"
                bottom: "前进"
                onClicked: {
                    var timeCache = currentTime.getTime() + 3000
                    slider.value = timeCache
                }
            }
            // 播放速度
            PlaybarButton{
                bottom_text: "播放速度"
                onClicked: {
                    if(speed == 1){
                        speed = 2
                        speed_text.txt = "x2"
                    }else if (speed == 2){
                        speed = 4
                        speed_text.txt = "x4"
                    }else if (speed == 4){
                        speed = 8
                        speed_text.txt = "x8"
                    }else if (speed == 8){
                        speed = 1
                        speed_text.txt = "x1"
                    }
                }
                // 按钮文字居中
                Text {
                    id: speed_text
                    property string txt : "x1"
                    text: qsTr(txt)
                    anchors.centerIn: parent
                    font.bold: true
                    font.family: "微软雅黑"
                    font.pointSize: 15
                }
            }
        }
        // 状态栏上部分 视频标题(左侧)
        Label{
            text: title
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 20
            // 垂直对齐，文本居中
            verticalAlignment: Text.AlignVCenter
            font.pointSize: 22
            font.family: "微软雅黑"
            font.bold: true
        }
        // 状态栏上部分 视频当前时间
        Label{
            id: label_currentTime
            // 设置当前播放时间及格式
            text: Qt.formatTime(currentTime,"hh:mm:ss")
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 20
            verticalAlignment: Text.AlignVCenter
            font.pointSize: 17
            font.family: "微软雅黑"
            font.bold: true
        }
    }
    // 状态栏下部分
    RowLayout{
        y:parent.height / 2
        height: parent.height / 2
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 30
        anchors.rightMargin: 30
        // 状态栏下部分 左侧 视频开始时间
        Label{
            text: Qt.formatTime(starDate,"hh:mm:ss")
            font.pointSize: 12
            font.family: "微软雅黑"
        }
        // 状态栏下部分 播放进度条
        Slider{
            id:slider
            Layout.fillWidth: true
            from: starDate.getTime()
            to: endDate.getTime()
            // 滑块值被改变
            onValueChanged: {
                var step = value - currentTime.getTime()
                currentTime.setTime(value)
                if(currentTime < starDate){
                    currentTime = starDate
                }
                if(currentTime >= endDate){
                    // 计时停止、滑块复位、播放停止
                    timer.stop()
                    slider.value = starDate.getTime()
                    stop();
                }
                label_currentTime.text = Qt.formatTime(currentTime,"hh:mm:ss")
                run(currentTime,step)
            }
            // 拖动滑块
            onPressedChanged: {
                if(running){
                    if(pressed){
                        timer.stop()
                        pause()
                    }
                }
            }
            // 滑块样式
            background: Rectangle{
                x:slider.leftPadding
                y:slider.topPadding + slider.availableWidth / 2 - height / 2
                implicitWidth: 200
                implicitHeight: 4
                width: slider.availableWidth
                height: implicitWidth
                radius: 2
                color: "#bdbebf"
                Rectangle{
                    width: slider.visualPosition * parent.width
                    height: parent.height
                    color: "#00b5e2"
                }
            }
            handle: Rectangle{
                x:slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
                y:slider.topPadding + slider.availableHeight / 2 - height / 2
                implicitWidth: 26
                implicitHeight: 26
                radius: 13
                color: slider.pressed ? "#f0f0f0" : "#f6f6f6"
                border.color: "#bdbebf"
            }


        }
        // 状态栏下部分 右侧 视频总时长
        Label {
            text: Qt.formatTime(endDate,"hh:mm:ss")
            font.pointSize: 12
            font.family: "微软雅黑"
        }
    }

    // 定时器
    Timer{
        id:timer
        // 播放速度，定时器触发间隔
        interval: 1000 / speed
        repeat: true
        onTriggered: {
            var timeCache = currentTime.getTime() + 1000
            slider.value = timeCache
        }
    }
    function setDateRange(star,end,current){
        starDate = star
        endDate = end
        currentTime = current
        slider.value = currentTime.getTime()
    }
}

使用示例与参考链接的类似，参考链接放了资源下载，我这里就不方便粘贴了，需要使用示例评论区见