Home Using Phonon Video Player From QML

Using Phonon Video Player From QML

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->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) :
    myVideoWidget = new Widget;
    QGraphicsProxyWidget* proxy = new QGraphicsProxyWidget(this);
void QmlVideo::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
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        width: playerControl.width
        height: playerControl.height
            anchors.fill: parent
            onEntered: {
                playerControl.opacity = 1
            onExited: {
                playerControl.opacity = 0
        width: 200
        height: 50
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        color: "gray"
        opacity: 0
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            spacing: 20
                icon: "backward.png"
                onClicked: {
        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

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.