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 and
here is link to source code.Hope it will be useful to someone.
