Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Video playback using QML



  • Hi,
    I am completely new to QML as I'm coming from Qt c++ side. I am exploring to design my window using qml and kind of struggling to get a video (.mp4) playback. I got started with MediaPlayer element and VideoOutput to be filled by the mediaplayer. Here is how the ContentVideo.qml looks like:

    Rectangle {
        width: 400
        height: 400
        color:"black"
    
        MediaPlayer {
            id: mediaPlayer
            autoPlay: true
            autoLoad: true
            source:"video.mp4"
        }
    
        VideoOutput {
            id:videoOutput
            source:mediaPlayer
            anchors.fill: parent
        }
    }
    

    My question is, how can I now redirect this VideoOutput to my main window which is in main.qml?

    Window {
        id: root
        visible: true
        width: 640
        height: 480
        title: qsTr("VideoPlayback")
    }
    

    I know there is a qmlvideo example, but its too complex for me to get started with a simple video playback.

    Thanks,



  • Hi,
    You all you have to do now is create your component in your window.

    Window {
        id: root
        visible: true
        width: 640
        height: 480
        title: qsTr("VideoPlayback")
    
    ContentVideo{
     width: 640
        height: 480
    }
    
    }
    

    also in the ContentVideo.qml put z property of the background rectangle to -1 or use Item if you don't need background



  • Awesome .. thanks Lelev. I see the video playback :)


Log in to reply