Visual media – playing video

Playing a video with QML is much like playing audio using MediaPlayer, only using a VideoOutput instead of an AudioOutput component.

The source code can be found on the Git repository under the Chapter09-6 directory, in the cp9 branch.

We begin by implementing a MediaPlayer component:

MediaPlayer {
    id: player

The property named autoPlay will control the automatic starting of the video once the component is completed. 

Here, the source property is set to the filename of our video:

    autoPlay: true
    source: "hellowindow.m4v"
    onStatusChanged: console.log("Status " + status)
    onError: console.log("Error: " + errorString)
}

We then create a VideoOutput component, with the source being our MediaPlayer:

VideoOutput {
    source: player
    anchors.fill : parent
 }

MouseArea...