IoT-Gadgets-Logo-272-90

Using Phonon Video Player From QML

By
Sam
 - 
Sep 7, 2011

 
Here is a code sample for integrating Phonon Video Player to QML courtesy of the Qt Maemo And Some Other Stuff Blog:
 
Recently one of my friend asked me to give some sample code for integrating Phonon Video Player to QML. Long back I had created a application which download video from dailymotion and play the video using Phonon.

QtMultimediaKit provides QML Video element which we cause use for playing video. But form reason if you need to use your exiting code then you can follow what I did.

I tried to my video widget from that application with sample QML application. I was able to integrate that widget quite easily without any problem.

Following is sample code for video player that uses the Phonon VideoPlayer to play video.

#include <phonon/videoplayer.h>
#include <QUrl>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    player = new Phonon::VideoPlayer(Phonon::VideoCategory, this);

    QVBoxLayout* mainLayout = new QVBoxLayout(this);
    mainLayout->setMargin(0);
    mainLayout->addWidget( player);


void Widget::play()

    if( player->isPlaying() == false )
        player->play(QUrl("URL FOR VIDEO"));

Then I created an custom QDeclarativeItem, which uses my video widget class through QGraphicsProxyWidget. Visit my post for more information how we can use this class into QML.

#include "qmlvideo.h"
#include <QGraphicsProxyWidget>

#include "widget.h"

QmlVideo::QmlVideo(QDeclarativeItem *parent) :
    QDeclarativeItem(parent)

    myVideoWidget = new Widget;
    QGraphicsProxyWidget* proxy = new QGraphicsProxyWidget(this);
    proxy->setWidget(myVideoWidget);
}

void QmlVideo::play()
{
    myVideoWidget->play();
}

Now finally I created QML file which uses above created declarative item. I also tried how we can put player control with video player. Following is final code with some unnecessary code removed.

import QtQuick 1.0
import qmlVideo 1.0

Rectangle {
    width: 624 ; height: 480
    QmlVideo{
        id:videoPlayer
    }

    Item{
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        width: playerControl.width
        height: playerControl.height
        MouseArea{
            id:mouseArea
            anchors.fill: parent
            hoverEnabled:true

            onEntered: {
                playerControl.opacity = 1


            onExited: {
                playerControl.opacity = 0

    Rectangle{
        width: 200
        height: 50
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        id:playerControl
        color: "gray"
        opacity: 0
        radius:10

        Row{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            spacing: 20

            Button{
                icon: "backward.png"
                iconOn:"backward_on.png"
                onClicked: {
                    videoPlayer.backward();




        Behavior on opacity {
            NumberAnimation { duration: 500 }
        

Following is output from my above code. Hope it will be useful to someone.

 

Source Qt Maemo And Some Other Stuff

IoT-Gadgets-Logo-272-90

About us

IoT Gadgets is dedicated to bring you all the Internet of Things IoT news that pertains to gadgets. Simple. We love for you to join us on this journey.

Contact us: [email protected]

FOLLOW US

crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram