Ext.ux.YoutubePlayer - a mediaplayer for Ext JS

[coolstar]

Yes. I am

[swarnendude]

Hi,

My version of youtube player is not working with ext 3.0.0. Following is my code:

     
 var DEVELOPER_KEY = 'AI39si73ZLn_lVi7s3bAw1MuRbS03FWiZ-P33-9JOrbN4VsYNs8DSC5XDdZn1VKcnd3PMN3MM3fB739KnO-XAGAPKdE_9kBoSA';

  var playerPanel = new Ext.ux.YoutubePlayer({
           developerKey : DEVELOPER_KEY,    
           playerId     : 'Player',
           border         : false,
           ratioMode    : 'strict',
           hideMode     : 'visibility',
           bgColor      : "#000000",
           bodyStyle      : 'background-color:#000000;'
       });
   
       playerPanel.on('ready', function(panel, player) {
           panel.cueVideoById('i9e8RjfXXLQ', 0);
       }, playerPanel);
       
       
       
var w = new Ext.Window({
        title        : 'Ext.ux.YoutubePlayer',
        layout          : 'fit',
        maximizable  : true,
        animCollapse : false,
        hideMode      : 'visibility',
        collapsible  : true,
        resizable    : true,
        items        : [playerPanel], 
        bbar         : new Ext.ux.YoutubePlayer.Control({
            player   : playerPanel,
            border     : false,
            id          : 'control', 
            style     : 'border:none;'
        }),
        listeners   : {
            'resize'            : function(){this.bottomToolbar.fireEvent('resize')}
        },
        height      : 400,
        width       : 500
    });       
        
   
    w.show();

"playerPanel.on('ready',...." - function is not getting called.

I didnt understand the concept of playerid and from where can i get it? The player is working perfectly with ext 2.2.1 but when I replaced the code with the trunk version(ext 3.0.3), it is not showing me the video. Even, all the buttons are disabled.

Can you tell me what is the issue?

[coolstar]

instead of :

            url         : "http://www.youtube.com/apiplayer?key=" +
                          this.developerKey + "&enablejsapi=1&version=3&playerapiid="+
                          this.playerId,

you can use:

            url       : "http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid="+
                        this.playerId,

Thre is no need for the developer key.

[ThorstenSuckow]

Thanks for the feedback. V 0.4 is available from the repository and removes the obsolete API key. It also introduces a new feature: You are now able to choose the video resolution, depending on the available resolutions. See attached screenshot for an use-case example.

[jvandemerwe]

Thank you for your reply. I am really happy with the 0.4 improvements. That was something I was missing.

[coolstar]

At this point, you don't need an api key.

Ohh, and I have one question:

Is it possible to use this player with the Youtube Search Data API? I would really like it if people could search for the video instead of having to enter the video id/url.

JSON Search for Rickroll:
http://gdata.youtube.com/feeds/api/v...t=5&q=Rickroll

XML Search for Rickroll:
http://gdata.youtube.com/feeds/api/v...t=5&q=Rickroll

[Kcarpenter]

Anyone else try this in Google Chrome browser?
The player is pushed to the top and you can only see the lower 50% of it.

I can't find any CSS that would be pushing it up, if anything I think there is some pushing it down 288px.

Any one else with the issue? I realize there hasn't been an update since March of last year and that I am digging up a post that hasn't been touched in a while. Sorry about that.

[ThorstenSuckow]

Ext.ux.YoutubePlayer has been updated since an issue with the Youtube API prevented a proper registration of the stateChange- and error-event handler.

The latest download can be found over at http://code.google.com/p/ext-ux-youtubeplayer/.

[digeridoopoo]

Hey,

Your component looks awesome....do you think it's possible it could work with Sencha Touch without too much modification, or do you think it should just work? I'm using Sencha Touch v2.1

Thanks,

Simon