×
Namespaces

Variants
Actions

Streaming YouTube videos using Qt Quick in Nokia N9

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to stream YouTube videos using Qt Quick .

Article Metadata
Code ExampleTested with
SDK: Qt SDK 1.1.3
Devices(s): N950/N9
Compatibility
Platform(s): MeeGo/Qt 4.7
Article
Keywords: YouTube/JSON
Created: somnathbanik (30 Sep 2011)
Last edited: hamishwillee (14 Feb 2014)

Contents

Introduction

In this article first we will see how to parse JSON objects and then display its content. Here we will consider You Tube API to get the JSON and will display its content in List and Grid view. When user clicks on the item it will play the corresponding video in the default player . The user will also have the option to search videos. For my simplicity I have used Flickr example from the SDK to create a similar kind of UI. As UI is based on Flickr example, I would like to jump straightway on to the root of the article.


List View
Grid View
Streaming YouTube Video

Implementation

We have created a JavaScript function loadYouTube() which loads and parse JSON objects through HTTP request. Initially the video search tag rssModel.tags is set the Nokia N9 and content number to 32. So we get 32 contents related to Nokia N9.

// parsing you tube rss
function loadYouTube(){
var doc = new XMLHttpRequest();
doc.onreadystatechange = function() {
if (doc.readyState == XMLHttpRequest.DONE) {
var jsresp = JSON.parse(doc.responseText);
var entries = jsresp.feed.entry;
var len = entries.length
rssModel.clear();
var vi=1;
for (var i = 0; i < len; i++) {
var obj = entries[i];
rssModel.append( {
number:
i + 1,
url:
(function() {
try {
return(obj.id.$t.replace("http://gdata.youtube.com/feeds/api/videos/", ""));
}
catch(e) { return("(no title)"); }})(),
videoRTSP:
(function() {
try {
return(obj.media$group.media$content[1].url);
}
catch(e) { return("(no title)"); }})(),
videoHTTP:
(function() {
try {
return(obj.media$group.media$content[0].url);
}
catch(e) { return("(no title)"); }})(),
tags:
(function() {
try {
return(obj.yt$statistics.viewCount);
}
catch(e) { return("(no title)"); }})(),
photoType:
(function() {
try {
return(obj.category[0].term);
}
catch(e) { return("(no title)"); }})(),
description:
(function() {
try {
return(obj.content.$t);
}
catch(e) { return("(no title)"); }})(),
photoAuthor:
(function() {
try {
return(trimString(obj.author[0].name.$t,35));
}
catch(e) { return("(no title)"); }})(),
photoHeight:
(function() {
try {
return(obj.media$group.media$thumbnail[0].height);
}
catch(e) { return("(no title)"); }})(),
photoWidth:
(function() {
try {
return(obj.media$group.media$thumbnail[0].width);
}
catch(e) { return("(no title)"); }})(),
photoDate:
(function() {
try {
return(obj.published.$t);
}
catch(e) { return("(no title)"); }})(),
imagePath:
(function() {
try {
return(obj.media$group.media$thumbnail[0].url);
}
catch(e) { return("(no title)"); }})(),
title:
(function() {
try {
return(trimString(obj.title.$t,35));
}
catch(e) { return("(no title)"); }})()
});
}
console.log("Successfully")
}
}
doc.open("GET", "http://gdata.youtube.com/feeds/api/videos?q="+rssModel.tags+"&orderby=viewCount&alt=json&max-results=32");
doc.send();
}

The JavaScript function trimString() trim the string, so that it doesn't ex-out the width of the list box.

function trimString(string, limit) {
if(string.length > limit) {
string = string.substr(0, (limit - 3)) + "...";
}
return string;
}

Once the data are parsed we append the data into a ListModel.

 
ListModel{id:rssModel; property string tags :"Nokia N9";}

To display the content in Grid and List view, we add the ListModel to model property of Grid View and List View element. Thus we see the YouTube content in Grid and List view as shown in above pictures.

Mobile.GridDelegate { id: gridDelegate }
GridView {
id: photoGridView; model: rssModel; delegate: gridDelegate; cacheBuffer: 100
cellWidth: (parent.width-2)/4; cellHeight: cellWidth; width: parent.width; height: parent.height - 1;
}
Mobile.ListDelegate { id: listDelegate }
ListView {
id: photoListView; model: rssModel; delegate: listDelegate;
width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
}

The ListDelegate.qml and GridDelegate.qml (Delegates which arrange the contents in list view and grid view) are not explained in this article as those are almost same as that of the Flickr. For more reference please follow the source code. When user clicks on the item we call the Qt.openUrlExternally() method to stream the video in the default player.


MouseArea{
id:listMouseArea
anchors.fill: parent
onClicked: Qt.openUrlExternally(videoRTSP);
}

Source Code

The full source code of the example is available here: File:YouTubeQtQuick.zip

Related Links

This page was last modified on 14 February 2014, at 06:43.
141 page views in the last 30 days.
×