×
Namespaces

Variants
Actions
(Difference between revisions)

Simple video player in QML

From Nokia Developer Wiki
Jump to: navigation, search
gaba88 (Talk | contribs)
(Created page with "Category:QtCategory:Qt MobilityCategory:Qt Quick {{CodeSnippet |id= |platform=Symbian^3 |devices=Nokia E7-00, Nokia N8-00 |category=Qt |subcategory= Qt Mobility |crea...")
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
(9 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
+
[[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Multimedia]][[Category:Video]]
{{CodeSnippet
+
{{ArticleMetaData
|id=
+
 
|platform=Symbian^3
 
|platform=Symbian^3
 
|devices=Nokia E7-00, Nokia N8-00
 
|devices=Nokia E7-00, Nokia N8-00
|category=Qt
 
|subcategory= Qt Mobility
 
 
|creationdate=June 12, 2011
 
|creationdate=June 12, 2011
 
|keywords= QML, Video, Multimedia
 
|keywords= QML, Video, Multimedia
 +
|sourcecode=[[Media:VideoPlayer.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|sdk=[http://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.1]
 +
|devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
 +
|signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
 +
|author=[[User:Gaba88]]
 
}}
 
}}
 
=Simple Video Player using Qt Quick=
 
 
 
== Introduction ==  
 
== Introduction ==  
 
Video  playing is one of the most important requirement now a days in  applications, be it playing a video player by storing the whole video  file in the phone storage system or simply streaming a video.
 
Video  playing is one of the most important requirement now a days in  applications, be it playing a video player by storing the whole video  file in the phone storage system or simply streaming a video.
  
 
This application takes the first use case, second will be explained in one of the coming articles.  
 
This application takes the first use case, second will be explained in one of the coming articles.  
 
 
==Prerequisite==
 
 
You  should have installed Qt SDK  1.1. You can download it from  [https://www.forum.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html  here]
 
 
  
 
== Playing Video files in Qt ==
 
== Playing Video files in Qt ==
Line 31: Line 26:
 
Second you can  use [http://doc.qt.nokia.com/qtmobility-1.2/qmediaplayer.html  QMediaPlayer] and  [http://doc.qt.nokia.com/qtmobility-1.2/qvideowidget.html QVideoWidget]  APIs to play Videos from Qt C++.
 
Second you can  use [http://doc.qt.nokia.com/qtmobility-1.2/qmediaplayer.html  QMediaPlayer] and  [http://doc.qt.nokia.com/qtmobility-1.2/qvideowidget.html QVideoWidget]  APIs to play Videos from Qt C++.
  
Third is using QMLs Video element which is nothing else but a QML Plugin class for QMediaPlayer and QVideoWidget.
+
Third is using QMLs Video element which is nothing else but a QML Plugin class for {{Icode|QMediaPlayer}} and {{Icode|QVideoWidget}}.
  
 
First  one works pretty smooth with some simple hacks, second and third  approach are generally used if you require an video player of your self  within your application context.
 
First  one works pretty smooth with some simple hacks, second and third  approach are generally used if you require an video player of your self  within your application context.
Line 49: Line 44:
 
==Video Player Component==
 
==Video Player Component==
 
Component Below is a simple Video Player component, This component file has three main important Functions:
 
Component Below is a simple Video Player component, This component file has three main important Functions:
 
 
* playVideo
 
* playVideo
 
* stopVideo
 
* stopVideo
Line 56: Line 50:
 
QML  Video Element has lots of properties using which we can get maximum of  the metadata of a particulat video file, which has a lot of usage too.
 
QML  Video Element has lots of properties using which we can get maximum of  the metadata of a particulat video file, which has a lot of usage too.
  
<code>
+
<code javascript>
 +
import QtQuick 1.0
 +
import QtMultimediaKit 1.1 // do not forgot to import this 
  
importQtQuick 1.0
 
import QtMultimediaKit 1.1 // do not forgot to import this 
 
 
Item {
 
Item {
 
     id: videoPlayerItem
 
     id: videoPlayerItem
Line 93: Line 87:
 
</code>
 
</code>
  
== How To Use thi Component ==  
+
== How To Use this Component ==  
  
 
Following  code snippet shows how to use the above developed QML VideoPlayer  Component in other QML file, The important thing we need to keep in mind  that, as mentioned above, we can load the Video Component at the start  of the application, instead we need  to load the Video Element as and  when required. For this task a simple  [http://doc.qt.nokia.com/4.7-snapshot/qml-loader.html Loader] element  has been used.
 
Following  code snippet shows how to use the above developed QML VideoPlayer  Component in other QML file, The important thing we need to keep in mind  that, as mentioned above, we can load the Video Component at the start  of the application, instead we need  to load the Video Element as and  when required. For this task a simple  [http://doc.qt.nokia.com/4.7-snapshot/qml-loader.html Loader] element  has been used.
Line 101: Line 95:
 
When  user Clicks the play button the Loader Components Loads the VideoPlayer  QML file and then call the playVideo Function to play the video.
 
When  user Clicks the play button the Loader Components Loads the VideoPlayer  QML file and then call the playVideo Function to play the video.
  
When Stop Button us clicked first stopVideo function is called and then Loader unloads the VideoPlayer QML File.
+
When Stop Button is clicked first stopVideo function is called and then Loader unloads the VideoPlayer QML File.
  
 
Please have a look at this QML code to get a idea of how the things have been done.
 
Please have a look at this QML code to get a idea of how the things have been done.
  
<code>
+
<code javascript>
  
 
import QtQuick 1.0  
 
import QtQuick 1.0  
Line 162: Line 156:
 
== Sample Application ==
 
== Sample Application ==
  
An Sample Application has been developed to show case the usability of QML  Video Component. screenshots for the application are showed at the  bottom.
+
A Sample Application has been developed to show case the usability of QML  Video Component. Screenshots for the application are showed at the  bottom.
  
 
Where One can see the code of Toolbar and the  ToolBarButton Components designed, these can be used in any other  application too.  
 
Where One can see the code of Toolbar and the  ToolBarButton Components designed, these can be used in any other  application too.  
Line 175: Line 169:
 
== References ==
 
== References ==
  
[http://doc.qt.nokia.com/qtmobility-1.2/qml-video.html QML Video Element]
+
* [http://doc.qt.nokia.com/qtmobility-1.2/qml-video.html QML Video Element]
 
+
* [http://www.developer.nokia.com/Community/Wiki/index.php/How_to_launch_other_applications_in_Qt Launch External Applications in Qt][[Category:MeeGo Harmattan]] [[Category:Symbian]]
[http://wiki.forum.nokia.com/index.php/How_to_launch_other_applications_in_Qt Launch External Applications in Qt]
+

Revision as of 13:58, 13 June 2012

Article Metadata
Code ExampleTested with
Devices(s): Nokia E7-00, Nokia N8-00
Compatibility
Platform(s): Symbian^3
Symbian
Article
Keywords: QML, Video, Multimedia
Created: gaba88 (12 Jun 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Introduction

Video playing is one of the most important requirement now a days in applications, be it playing a video player by storing the whole video file in the phone storage system or simply streaming a video.

This application takes the first use case, second will be explained in one of the coming articles.

Playing Video files in Qt

There are lots of option if one needs to play video files in Qt for Symbian or MeeGo devices.

First one can store the video file in phone storage system and then open phone's native video player using Qt::OpenUrlExternally function of Qt, this can be directly used with QML code.

Second you can use QMediaPlayer and QVideoWidget APIs to play Videos from Qt C++.

Third is using QMLs Video element which is nothing else but a QML Plugin class for QMediaPlayer and QVideoWidget.

First one works pretty smooth with some simple hacks, second and third approach are generally used if you require an video player of your self within your application context.

This article shows how to play videos using QML Video Element.

QML Video Element

QML Video Element is basically part if Qt Multimedia 1.1 package for Qt Mobility Framework. Its a simple QML component where you just need to give the source of Video along with the size you need to keep for this element.

This Component is still Buggy if you Load the video element in your main QML file at the Launch of the application then it crashes with Symbian native WSERV 10 Panic.

To Over come this Bug you need to Load the Video Element as and when required instead of just Loading it at the start of the application.

Code Snippet Below Will Show how that can be done with the simple Video Player Component.

Video Player Component

Component Below is a simple Video Player component, This component file has three main important Functions:

  • playVideo
  • stopVideo
  • pauseVideo

QML Video Element has lots of properties using which we can get maximum of the metadata of a particulat video file, which has a lot of usage too.

import QtQuick 1.0 
import QtMultimediaKit 1.1 // do not forgot to import this
 
Item {
id: videoPlayerItem
property bool isVideoPlaying: videoPlayer.hasVideo // property to know if videoPlaying id ongoing or not
/*
Functions Which starts Video Playing
*/

function playVideo(){
videoPlayer.play()
}
/*
Function Which Stops Video Playing
*/

function stopVideo(){
videoPlayer.stop()
}
/*
Function Which Stops Video Playing
*/

function pauseVideo(){
videoPlayer.pause()
}
/*
Actual QML based Video Component
*/

Video{
id:videoPlayer
anchors.fill: videoPlayerItem // never forget to mention the size and position
source: "Video/Bear.wmv"
focus: true
}
}

How To Use this Component

Following code snippet shows how to use the above developed QML VideoPlayer Component in other QML file, The important thing we need to keep in mind that, as mentioned above, we can load the Video Component at the start of the application, instead we need to load the Video Element as and when required. For this task a simple Loader element has been used.

To Accomplish this task , a simple toolbar component has been designed which contains three buttons play, pause and stop.

When user Clicks the play button the Loader Components Loads the VideoPlayer QML file and then call the playVideo Function to play the video.

When Stop Button is clicked first stopVideo function is called and then Loader unloads the VideoPlayer QML File.

Please have a look at this QML code to get a idea of how the things have been done.

import QtQuick 1.0 
 
Rectangle {
id: mainRect
width: 360
height: 640
color: "black"
TopTitleBar{
id:topTopTitleBar
x:mainRect.x; y:mainRect.y
width: mainRect.width; height: mainRect.height/20+10
}
Rectangle{
id:videoRect
x:mainRect.x; y:topTopTitleBar.y+topTopTitleBar.height
width: mainRect.width; height: mainRect.height-topTopTitleBar.height-70
color: "black"
 
/*
Simple Loader is placed inside the Rect which will help to load the videoPlayer Component when
user clicks the play button
*/

Loader{
id:videoLoader
anchors.fill: videoRect
}
}
/*
Simple Toolbar Item which has play, pause and stop button
*/

ToolBar{
id:toolBar
x: videoRect.x; y:topTopTitleBar.y+topTopTitleBar.height+videoRect.height;
width: videoRect.width; height: mainRect.height-videoRect.height-topTopTitleBar.height
onPlayButtonClicked: {
console.log("Play Button Clicked")
videoLoader.source = "VideoPlayer.qml" // sets the Loader to load our VideoPlayer Component
videoLoader.item.playVideo()// starts the video
}
onStopButtonClicked: {
console.log("Video Stopped"+videoLoader.source)
videoLoader.item.stopVideo() // stops the video
videoLoader.source = "" // unloads the QML Video Element component
Qt.quit() // exits the application
}
onPauseButtonClicked: {
console.log("Pause Suceessful"+videoLoader.source)
videoLoader.item.pauseVideo()// pause the video
}
}
}

Sample Application

A Sample Application has been developed to show case the usability of QML Video Component. Screenshots for the application are showed at the bottom.

Where One can see the code of Toolbar and the ToolBarButton Components designed, these can be used in any other application too.

Source Code: File:VideoPlayer.zip

Screenshots

VideoPlayerScreenShot1.png VideoPlayerScreenShot2.jpg

References

378 page views in the last 30 days.
×