• 完全依赖QML实现播放器


    前言

    一直听闻QML无比强大好用,工作中需要扣一个同时播放视频的Demo,所以就趁这个机会研究了一下。

    效果图和源码



    源码仓库

    主要设计

    主页面QML

    import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        visible: true
         640
        height: 480
    
        Counter{
            id : counter
        }
    
        Player {
            id:player1
            visible: true
            anchors.left:parent.left
            anchors.top:parent.top
             parent.width
            height: parent.height
        }
    
        Player {
            id:player2
            visible: true
            x:parent.x
            y:parent.height-height
             parent.width/3
            height: parent.height/3
            counter:counter
            canchangez : true
        }
    
        Player {
            id:player3
            visible: true
            x:player2.width
            y:parent.height-height
             parent.width/3
            height: parent.height/3
            counter:counter
            canchangez : true
        }
    
        Player {
            id:player4
            visible: true
            x:player2.width+player3.width
            y:parent.height-height
             parent.width/3
            height: parent.height/3
            counter:counter
            canchangez : true
        }
    }
    
    

    程序窗口共有4个播放器,最下层有1个,剩下3个作为子控件放在其上方。

    播放器QML

    import QtQuick 2.12
    import QtMultimedia 5.12
    import QtQuick.Controls 2.12
    import QtQuick.Dialogs 1.2
    
    //播放器
    Rectangle {
        color: "black"
        property Counter counter
        property bool canchangez : false
    
        function setTop() {
            z = counter.getNext()
            //console.log("change z to ", z)
        }
        function setBot(){
            //z = 0
        }
    
        //背景图
        Image{
            id: bkimg
            source: "qrc:/bk.png"
            anchors.fill: parent
        }
    
        TextInput {
            id: uri
             parent.width - btn.width
            height: 25
            font.pixelSize: 15
            topPadding: 5
            //text: "file:../RandB/media/gx.wmv"
            text: qsTr("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov")
            color: "blue"
            clip: true
            //onEditingFinished: {
            //  mediaplayer.play()
            //}
        }
        Button {
            id: btn
             100
            anchors.right: parent.right
            height: uri.height
            text: qsTr("file")
    
            highlighted: true
            onClicked: {
                fileDialog.open()
            }
        }
        FileDialog {
                id: fileDialog
                title: qsTr("Please choose a media file")
                nameFilters: [ "Media Files (*.mp4 *.flv *.avi *.wmv *.mkv)", "*.*"]
                onAccepted: {
                    uri.text = String(fileUrl)
                }
            }
    
        //需要安装LAVFilter
        //低版本QT(5.12)也可能会出现debug版本运行出错
        MediaPlayer {
            id: mediaplayer
            loops: MediaPlayer.Infinite
        }
        VideoOutput {
            id: videooutput
            anchors.left: parent.left
            anchors.bottom: parent.bottom
             parent.width
            height: parent.height - uri.height
            source: mediaplayer
            autoOrientation: true
        }
    
        MouseArea{
            anchors.fill: videooutput
            onClicked: {
                bkimg.visible = false
                mediaplayer.source = uri.text
                mediaplayer.play()
            }
            onDoubleClicked: {
                mediaplayer.stop()
                bkimg.visible = true
            }
    
            property real lastX: 0
            property real lastY: 0
            onPressed: {
                lastX = mouseX
                lastY = mouseY
                if(canchangez){
                    setTop()
                }
            }
            onReleased: {
                if(canchangez){
                    setBot()
                }
            }
    
            onPositionChanged: {
                if (pressed) {
                    parent.x += mouseX - lastX
                    parent.y += mouseY - lastY
                }
            }
        }
    }
    
    

    使用QML提供的MediaPlayer和VideoOutput组合,播放视频。MouseArea中添加onPressed、onReleased和onPositionChanged等事件处理器处理鼠标的操作进行播放、暂停和移动。

    计数器QML

    import QtQuick 2.0
    
    //计数器
    Item {
        property int number : 0
        function getNext(){
            return ++number
        }
    }
    
    

    主要用于处理播放器控件Z轴坐标的累增(一句C艹代码都不想写,所以才这么设计一个计数器控件)。

    后记

    Windows平台下运行,需要安装LAVFilter,不然会出现某些媒体格式不能播放。Android平台能编译apk,但是播放会报出很多openGL相关的错误,最终未能解决。之前还以为真的能,一份代码,windows和android都能完美运行。
    Player控件可以进一步优化,在其他项目中使用。
    QML真的挺好用的!

  • 相关阅读:
    Java并发编程:synchronized
    对一致性Hash算法,Java代码实现的深入研究
    在Xcode中使用Git进行源码版本控制
    这些 Git 技能够你用一年了
    简明 Git 命令速查表
    Git 分支管理是一门艺术
    2016年Web前端面试题目汇总
    iOS 面试基础题目
    Json数据交互格式介绍和比较
    SpringBoot端口和访问路径
  • 原文地址:https://www.cnblogs.com/gongluck/p/12402788.html
Copyright © 2020-2023  润新知