Extends Item


The Video element is for playing video.

Video support varies between operating systems. To ensure your project works on all plaforms, try to only use common video formats like MP4.

Video {
    source: "video.mp4"

property Bool enabled: true

When true, the Video element is enabled and will preroll its video and respond to other commands, like play().

You might disable a video when you want to control exactly when it begins loading and consuming resources.

property Video.Status statusread only

The status of the Video.


The element is disabled, or there is no source specified.


The element is loading the video source.


The element has successfully loaded the video, and is ready for playback. The first frame of the video will be displayed.


The element has failed to load the video source.

property Url source

The video's source url. This may be a local file in your project, or a network URL.

If you specify an audio file as the source, the audio will play without any video.

function play()

function pause()

function stop()

function seekTo(Float seconds)

Play, pause, stop and seek the video.

property Bool playingread only

property Bool pausedread only

True when the video is playing and when it is paused.

property Float timeread only

property Float durationread only

The current play time, and the total duration of the video in seconds.

You can change the play time by calling the seekTo() method.

property Int videoWidthread only

property Int videoHeightread only

The natural width and height of the video.

property Float volume: 1.0

The volume at which to play the video, from 0.0 which mutes the video to 1.0 which plays it at maximum volume.

property Video.AudioCategory category: .Ambient

Controls how the video's audio affects background music apps the user has running, such as the Apple Music or Spotify apps.


The audio is mixed with the background music.


Background music is paused when this Video plays.

In both cases, the Video is silenced if the user locks their device or exits the app.

property Video.FillMode fillMode: .Cover

When the size of the Video item is different from the size of the video, the fillMode controls how the video fills the space available to it.


The video will be stretched to fit the exact width and height of the item, even if this distorts the picture.


Scales the video by its aspect ratio to fit the item. This may add padding around the video, but will not crop it.


Scales the video by its aspect ratio to completely fill the item. This might result in some of the image being cropped out.