使用qml 实现简单的播放器(2)

来源：互联网发布：php 获取当前地区编辑：程序博客网时间：2024/06/05 12:00

基于之前的播放器添加一些新内容。

添加一些image，显示出播放，暂停，快进，快退等功能按键。

代码如下：

mport QtQuick 2.0
import QtMultimedia 5.0

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

    MouseArea {
        anchors.fill: parent
        onClicked: {
            startPlay();
        }
    }
    MediaPlayer {
        id: mediaPlayer
        source: "videos/feng.mp4"
    }

    VideoOutput {
        anchors.fill: parent
        source: mediaPlayer
    }

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

Rectangle {
        id: playerBar
        width: parent.width
        height: 100
        color: "grey"
        opacity: 0.3 // +一些透明
        anchors.bottom: parent.bottom // 将自己的底部与parent的底部连接在一起

        Row { // 比较简单的布局工作，将下面的image 放到一行中显示
            id: toolBar
            height: parent.height/2   //宽，高根据具体情况来显示
            x: parent.width/3
            anchors.bottom: parent.bottom
            spacing: 10   // images 之间的间隔为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() // 调用js 代码，返回
                    }
                }
            }
        }
    }

}

上面的代码也是基本的代码，通过图片设置可以触摸的按键，运行结果如下：

0 0