Back to General - Yahoo! TV Widgets Forum
0

URGENT: Merging WidgetRealm JSON with mediaplayer widget

I couldn't live without the WidgetRealm demos - - - they've helped me alot in learning how to create widgets to pull in data from remote systems and render/paginate through them.

One issue I could really use some help with. I've successfully modified the JSON widget demo to pull in my own TV show listings (instead of groceries smile.gif. And I've also successfully modified the video player example to play my own videos full-screen. Now I need to figure out how to combine these 2 demos somehow to make a dynamically-loaded video-list that can be browsed/paginated through, that allows the user to click a list-item and play that video full-screen.

In the main.js file inside the JSON demo, I see this:

var cell = new KONtx.control.GridCell({
styles: $content.styles.main.cell, //Style information for the Grid Cell from 960x540.js
events: {
onSelect: function () {
//This is here just to demoonstrate how you would attache an action to the Cell
print('We clicked on the Grid Cell\nName: '+this.title.data+'\nMPEGURL: '+this.mpegurl.data)
},
}
});

And I've got the right MPEG4 video in the "this.mpegurl.data" variable printing to the terminal window properly. Yay!

That was the easy part - - - now I need to somehow pull over the right js files from the mediaplayer demo into the JSON demo and link them together.


If I look at sidebar.js in the mediaplayer demo, I see this function:

events: {
onSelect: function(event) {
KONtx.application.loadView('view-Player', { PlaylistID: 2 });
}
},

Aha! A clue. So it looks like I could copy this KONtx.application.loadView('view-Player', { PlaylistID: 2 }); into the onSelect handler in the JSON demo (above). I need to change "PlaylistID: 2" to something else related to "this.mpegurl.data", but I'm not sure the syntax. I also see that I should include the following files from the media player demo: basicplayer.js, now_playing_snippet.js, snippet.js, and add these in via the init.js file.

After that, I'm a bit lost. What I would really benefit from is a demo of these two files combined, but I haven't been able to find one, so I'm trying to mash these 2 scripts together myself and could use some guidance.

by
Report Abuse
10 Replies
  • http://www.benchwarmersports.com/sick_widget.zip

    I'm sooo close. I just need help understanding how to change KONtx.application.loadView('view-Player', { PlaylistID: 2 });
    to allow me to pass in the variable that contains the url from the grid-cell instead. Could someone take a look at this line in the main.js file in the enclosed widget and tell me what the proper syntax would be? The word "playlist" is capitalized/camelcased 15 different ways in the basicplayer.js file and it's very confusing to me which is an array and which is an object.

    As you can see in this file, it _does_ play a video - - - but not the one I want - - - it plays the video that's hard-coded in the api.js file. I want it to play the dynamically-generated video via the main.js file instead.
    Report Abuse
    0
  • QUOTE (gouldtv @ Jan 13 2011, 01:02 AM) <{POST_SNAPBACK}>
    http://www.benchwarmersports.com/sick_widget.zip

    I'm sooo close. I just need help understanding how to change KONtx.application.loadView('view-Player', { PlaylistID: 2 });
    to allow me to pass in the variable that contains the url from the grid-cell instead. Could someone take a look at this line in the main.js file in the enclosed widget and tell me what the proper syntax would be? The word "playlist" is capitalized/camelcased 15 different ways in the basicplayer.js file and it's very confusing to me which is an array and which is an object.

    As you can see in this file, it _does_ play a video - - - but not the one I want - - - it plays the video that's hard-coded in the api.js file. I want it to play the dynamically-generated video via the main.js file instead.


    Use this.getCellDataItem() to get the data represented by the row to which the cell belongs. You may also want to store the fetched data using KONtx.messages.store, since basicplayer.js uses that to fetch the playlist items. Otherwise, you may change the basicplayer code to just play the video from what is sent by the main.js, using this.persist in the basicplayer.

    Thanks,
    Vivek
    Report Abuse
    0
  • Thank you SO much for the great feedback.

    It appears the issue is this. In the video demo we created, we pass in the Playlist Video information via the this.persist value. The value is coming through the application.loadView() call. To see how the Playlist obejct should be built, checkout the information for the video being played in videoplayer demo.

    It looks like you are trying to load your entire list of videos into the play list instead of just the video you want to play.
    Report Abuse
    0
  • QUOTE (Vivek Jani @ Jan 13 2011, 06:14 AM) <{POST_SNAPBACK}>
    Use this.getCellDataItem() to get the data represented by the row to which the cell belongs. You may also want to store the fetched data using KONtx.messages.store, since basicplayer.js uses that to fetch the playlist items. Otherwise, you may change the basicplayer code to just play the video from what is sent by the main.js, using this.persist in the basicplayer.

    Thanks,
    Vivek



    I like this idea of changing the basicplayer code to just play the video from what is sent by the main.js using this.persist. Can you elaborate a bit more on what function(s) I'd need to alter? There's a LOT of playList, Playlist, Playlist.ID, PlayList values being passed in that section of code and it's somewhat daunting.
    Report Abuse
    0
  • I see this code in basicplayer.js:


    _startPlaylist: function(playlistID) {
    this.controls.overlay.resetState();

    KONtx.mediaplayer.playlist.set(this._createPlaylist(playlistID));

    KONtx.mediaplayer.setConnectionBandwidth(KONtx.messages.fetch("bandwidth") || 1);
    KONtx.mediaplayer.playlist.start();
    },

    _createPlaylist: function(playlistID) {
    var playlist = new KONtx.media.Playlist();
    playlist.PlaylistID = playlistID;

    var json = KONtx.messages.fetch("playlist." + playlistID);
    for each(var entry in json.entries) {
    var playlistEntry = new KONtx.media.PlaylistEntry(entry);
    playlistEntry.entryID = entry.entryID;
    playlist.addEntry(playlistEntry);
    }

    return playlist;
    },


    and I have this code in my main.js file:

    var mpegfile = this.mpegfile.data

    KONtx.application.loadView('view-Player', { put something here to pass to basicplayer.js });


    Can some tell me how to get this set up so that the loadView call passes the proper data to the basicplayer.js file to play _just_ the video that's being passed by "mpegfile". From previous posts on this thread it sounds like basicplayer.js needs to be modified.
    Report Abuse
    0
  • Have you tried the "Quick Video File Testing Widget"?

    The "Quick Video File Testing Widget" application is a lot easier to follow in terms of how we are handling the flow of the information into the video screen.

    You will basically need to look at these three files to understand it.
    -> core/config.js
    -> This shows you how to setup the objects to be passed into the Playlist functionality

    -> views/main.js
    -> This show you how to attach the objects to a Control and then pass them into the videoplayer view.

    -> views/videoplayer.js
    -> This will show you how the video information is coming in on the this.persist value and is being sent to the mediaplayer
    Report Abuse
    0
  • Quick correction.

    -> core/config.js
    should be
    -> core/master.js
    Report Abuse
    0
  • QUOTE (gouldtv @ Jan 13 2011, 01:19 PM) <{POST_SNAPBACK}>
    I see this code in basicplayer.js:

    CODE
    _startPlaylist: function(playlistID) {
    	this.controls.overlay.resetState();
    		
    	KONtx.mediaplayer.playlist.set(this._createPlaylist(playlistID));
    		
    	KONtx.mediaplayer.setConnectionBandwidth(KONtx.messages.fetch("bandwidth") || 1);
    	KONtx.mediaplayer.playlist.start();
    },
    	
    _createPlaylist: function(playlistID) {
    	var playlist = new KONtx.media.Playlist(); 
    	playlist.PlaylistID = playlistID;
    		
    	var json = KONtx.messages.fetch("playlist." + playlistID);
    	for each(var entry in json.entries) {
    		var playlistEntry = new KONtx.media.PlaylistEntry(entry);
    		playlistEntry.entryID = entry.entryID; 
    		playlist.addEntry(playlistEntry);
    	}
    		
    	return playlist;
    },

    and I have this code in my main.js file:

    CODE
    var mpegfile = this.mpegfile.data

    KONtx.application.loadView('view-Player', { put something here to pass to basicplayer.js });


    Can some tell me how to get this set up so that the loadView call passes the proper data to the basicplayer.js file to play _just_ the video that's being passed by "mpegfile". From previous posts on this thread it sounds like basicplayer.js needs to be modified.



    It all starts from the updateView method. PlaylistID is being used as an identifier for your video. Notice how it is stored as part of the playlist object in the _createPlaylist method and then used by _handlePlaylistUpdate method to determine if the current video playing on TV is the same as the video it is trying to load. If so, it does nothing otherwise it loads the new video. In short, you could use any field that uniquely represents your video. PlaylistID is just an example.

    If you have some id use it otherwise for single streams, you could also use the url to have the same effect. The example below uses url as the unique field representing the video.

    Assuming your data has the following format(it is the simplest format, you might also have multiple streams with different bitrates/urls to represent the same video, in which case having an id will be more appropriate)
    CODE
    var mpegfile = {url:"http://www.blah.com/blah.mp4",bitrate:300}// this.persist will also have same value.

    updateView: function() {	
    	this._registerHandlers();
    	this._resetViewport();
    	this._handlePlaylistUpdate(this.persist);
    },
    	
    _handlePlaylistUpdate: function(data) {
    	if(KONtx.mediaplayer.isPlaylistEntryActive) {
    		if(!data.url) {
    			// we have no new playlist we've been asked to play, so keep playing what we already are playing
    			return;
    		}
    		if(data.url == KONtx.mediaplayer.playlist.get().url) {
    			// we have been asked to play the same playlist we are already playing, so just keeping playing it
    			return;
    		}
    	}
    		
    	// Otherwise, we need to start this new playlist
    	this._startPlaylist(data);
    },
    	
    _startPlaylist: function(data) {
    	this.controls.overlay.resetState();
    		
    	KONtx.mediaplayer.playlist.set(this._createPlaylist(data));
    		
    	KONtx.mediaplayer.setConnectionBandwidth(KONtx.messages.fetch("bandwidth") || 1);
    	KONtx.mediaplayer.playlist.start();
    },
    	
    _createPlaylist: function(data) {
    	var playlist = new KONtx.media.Playlist(); 
    	playlist.url = data.url;// Here we are storing url as a property of playlist so that we can compare it later in _handlePlaylistUpdate.
    		
    	playlist.addEntry(new KONtx.media.PlaylistEntry({
                id: "1",
                streams: [{

                    url: data.url,
                    bitrate: data.bitrate
                } ]
            }));
    		
    	return playlist;
    }


    Hope that helps.

    P.S. You can use codebox to enclose the code in your posts for better readability, like I have done here.

    Vivek
    Report Abuse
    0
  • Thank you! I modified the basicplayer.js per your changes and now the videos play perfectly.
    Report Abuse
    0
  • I saw that your feed returns 10 items out of a possible 25 - did you write any additional code so that all items are returned and not just the first 10 in the feed?
    Report Abuse
    0
Ask a Question

Recent Posts

in General - Yahoo! TV Widgets