On Thu, Mar 3, 2011 at 10:55 AM, Martin Grimme <martin.gri...@gmail.com> wrote: > QML is pretty powerful.
Indeed! http://www.youtube.com/watch?v=peC-ABhDEMQ "TubeBook: mixed metaphors for browsing YouTube in QML" This is just a "first hack" demo of a little 10 minute change to your code -- its a little problematic to have multiple videos all playing back at the same time on each page of the book. Well, not really problematic, just cacophonous :-) . So the next step is to figure out how to turn the playback on/off so that just the page displaying the video is playing back, and the others are paused -- actually it should "pre-start" (downloading) as soon as you begin turning the page. Oh, and of course the facing page should lookup and format the video information from the feed associated w/ the video using YouTube API (like in http://www.youtube.com/watch?v=Uq9NrEh3Z-w ) I don't think the sound came through on this recording and I was too lazy to reroute phonon to the jack-audio-server, then use qtRecordMyDesktop to record the video and sound via jack.... Anyways, to change your code to what's shown in the video above, I just changed the page delegate: ... import QtWebKit 1.0 //'video'==instance of WebView below for display of youtube video ... Book { anchors.fill: parent pageDelegate: Page { // The page delegate may contain anything as contents; simple text, // images, or even complex QML hierarchies contents: Item { anchors.fill: parent WebView { id: video; // access your pages' properties using the "page" object url: page.text; anchors.centerIn: parent; width: parent.width - 10; height: 480; scale: 0.8; settings.privateBrowsingEnabled: true; settings.autoLoadImages: true; settings.javascriptEnabled: true; settings.javaEnabled: false; settings.pluginsEnabled: true; settings.javascriptCanOpenWindows: false; settings.javascriptCanAccessClipboard: false; // onLoadFinished: function () { console.log("WebView loaded " + page.text); } onAlert: function (msg) { console.log("WebView alert() signal: " + msg); } } Text { anchors.bottom: parent.bottom anchors.bottomMargin: 16 anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 10 horizontalAlignment: (page.number % 2 == 0) ? Text.AlignRight : Text.AlignLeft text: "<i> " + page.number + " </i>" } } } // The BookBehavior element handles user interaction and fills the // pages from a model BookBehavior { id: bookBehavior model: TubeModel { } } and then setup TubeModel like your BookModel to be a list of ten YouTube videos: ListModel { ListElement { number: 1 text: 'http://www.youtube.com/watch?v=.....' } [...] ListElement { number: 10 text: 'http://www.youtube.com/watch?v=....' } } TODO-NEXT: change the above ListModel to a YouTube JSON feed and fill the "book" with dynamically generated results (changing the above delegate to match)... // JSON Model should be built-in but following hack is required, // see http://bugreports.qt.nokia.com/browse/QTBUG-1211 // http://mobilephonedevelopment.com/qt-qml-tips/#Consuming%20JSON%20Data ListModel { // http://doc.qt.nokia.com/4.7-snapshot/qml-listmodel.html id: jsonModel; signal loadCompleted(); Component.onCompleted: { // http://doc.qt.nokia.com/latest/qml-component.html YTJSON.showFeed(window.currentFeed); jsonModel.loadCompleted(); } } Where YTJSON.showFeed() is a little something like this: function showFeed(feedName) { var xhr = new XMLHttpRequest(); // processes result of request below asynchronously, updating // jsonModel with new results. xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { //console.log("showFeed(): responseText" + xhr.responseText); jsonModel.clear(); var jsresp = JSON.parse(xhr.responseText); var entries = jsresp.feed.entry; for (var i in entries) { var obj = entries[i]; // console.log("showFeed(): " + i + " : " + JSON.stringify(obj)); // pull out only specifically needed info & create a "flat" // model, otherwise views of complex and deep model, gets // very wonky (bug in view of complex model w/ nested // lists?) jsonModel.append({videoid: (function() { try { return(obj.media$group.yt$videoid.$t); } catch(e) { return(""); }})(), thumbnail: (function() { try { return(obj.media$group.media$thumbnail[0].url); } catch(e) { return(""); }})(), duration: (function() { try { return(parseInt(obj.media$group.yt$duration.seconds)); } catch(e) { return(-1); }})(), numLikes: (function() { try { return(parseInt(obj.yt$rating.numLikes)); } catch(e) { return(-1); }})(), numDislikes: (function() { try { return(parseInt(obj.yt$rating.numDislikes)); } catch(e) { return(-1); }})(), favoriteCount: (function() { try { return(parseInt(obj.yt$statistics.favoriteCount)); } catch(e) { return(-1); }})(), viewCount: (function() { try { return(parseInt(obj.yt$statistics.viewCount)); } catch(e) { return(-1); }})(), author: (function() { try { return(obj.media$group.media$credit[0].$t); } catch(e) { return("N/A"); }})(), published: (function() { try { return(obj.published.$t); } catch(e) { return(""); }})(), title: (function() { try { return(obj.title.$t); } catch(e) { return("(no title)"); }})(), description: (function() { try { return(obj.media$group.media$description.$t); } catch(e) { return (""); }})() }); } window.loading = false; // stop the spinner at request completion ... } } window.loading = true; // start the spinner at request start ... // Send request, onreadystatechange above processes result // asynchronously on receipt. console.log("showFeed(): Calling GET http://gdata.youtube.com/feeds/api/standardfeeds/"; + feedName + "?v=2&alt=jsonc"); xhr.open("GET", "http://gdata.youtube.com/feeds/api/standardfeeds/"; + feedName + "?v=2&alt=json"); xhr.send(); } Niels http://nielsmayer.com PS: Of course, I have Adobe flash installed per http://lists.meego.com/pipermail/meego-community/2011-March/003671.html , otherwise the WebViews wouldn't be able to play youtube videos, which is nearly impossible to do with QtMultimediaKit 1.2's "Video" class. _______________________________________________ MeeGo-community mailing list MeeGo-community@meego.com http://lists.meego.com/listinfo/meego-community http://wiki.meego.com/Mailing_list_guidelines
