How to play Video in Ubuntu qml app

In this article, we'll show you how to play a video in the Ubuntu qml app. For ease of use, we can record a video on our phone in advance and put it in a project we've already created.

First, we use the Ubuntu SDK to create a "QML app with simple UI (qmake)" Project. We have modified our MAIN.QML file as follows:

Import QtQuick 2.0import ubuntu.components 1.1import qtmultimedia 5.0/*! \brief MainView with a Label and Button Elements.*/mainview {//ObjectName for functional testing purposes (autopilot- QT5) ObjectName: "MainView"//note! ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Video.liu-xiao-guo"/* T The enables the application to change orientation when the device is rotated.    The default is False.    *///automaticorientation:true//Removes the old toolbar and enables new features of the new header.        Usedeprecatedtoolbar:false width:units.gu (height:units.gu) page {title:i18n.tr ("Video")            Video {id:video anchors.fill:parent Source: "Sample.mp4" focus:true             keys.onspacepressed: {video.playbackstate = = mediaplayer.playingstate? Video.pause (): Video.play () } keys.onleftpressed: Video.seek (video.position-5000) Keys.onRightPressed:video.seek (video.position +)} Butt On {anchors.bottom:parent.bottom Anchors.horizontalCenter:parent.horizontalCenter anch        Ors.bottomMargin:units.gu (1) Text: "Play" onclicked: {Video.play ()} } Image {Id:left width:units.gu (4) Height:width Anchors.left:pa Rent.left anchors.bottom:parent.bottom anchors.leftMargin:units.gu (1) Anchors.bottommar                Gin:units.gu (1) Source: "Icon-left-arrow.png" Mousearea {anchors.fill:parent                OnClicked: {video.seek (video.position-1000);            }}} Image {Id:right width:units.gu (4) Height:width Mirror:true Anchors.right:parent.right            Anchors.bottom:parent.bottom Anchors.rightMargin:units.gu (1) Anchors.bottomMargin:uni                Ts.gu (1) Source: "Icon-left-arrow.png" Mousearea {anchors.fill:parent                OnClicked: {video.seek (video.position + 1000); }            }        }    }}

Here we introduce the Qtmultimedia library:

Import Qtmultimedia 5.0

At the same time, we have joined the "audio" security Policy:

We need to modify our. Pro files at the same time to install our Sample.mp4 video files into the phone:

TEMPLATE = Auxtarget = videoresources + = video.qrcqml_files + $ $files (*.qml,true)              $ $files (*.js,true)              $ $files ( *.mp4,true)             $ $files (*,true) conf_files +  video.apparmor                video.desktop                video.pngother_files + = $${ Conf_files}                $${qml_files} #specify where the Qml/js FILES is installed Toqml_files.path =/videoqml_files.files + = $$ {Qml_files} #specify where the config FILES are installed Toconfig_files.path =/videoconfig_files.files + = $${conf_files} Installs+=config_files Qml_files

To run our application, the interface is displayed as follows:

We can fast forward or backward through the lower left and bottom right arrow buttons. Press the middle button "play" to play the video.

Source of the project in: Git clone https://gitcafe.com/ubuntu/video.git

How to play Video in Ubuntu qml app