PDA

View Full Version : Ext.ux.YoutubePlayer - a mediaplayer for Ext JS



ThorstenSuckow
25 Mar 2008, 5:50 AM
IMPORTANT:
Please use the svn repository over at http://code.google.com/p/ext-ux-youtubeplayer/ to obtain the latest releases!

Version 0.5
28-October-2012
- fixed: fixed an issue where the callbacks for the statechange and error events would not be properly registered with the YoutubePlayer since the Youtube API is suddenly not able to parse stringified method names containing "."
- enhancement: added "flashParams" configuration for setting proper
background color

Version 0.4
19-March-2010
- enhancement: Updated player features with V3 of Youtube Chromeless API
(choose resolution)
- fixed: changed url to vendor player Api since old one was broken

Version 0.3RC2
18-April-2009

- fixed: (YoutubePlayer.js) call to "getInnerWidth()" and "getInnerHeight()"
replaced with "getWidth()"/"getHeight()" since the component does now extend Ext.FlashComponent
- enhancement: (YoutubePlayer.js) if method "onYoutubePlayerReady" is
already defined in the window-scope, an exception will now be thrown
- enhancement: (YoutubePlayerControl.js) eject button is now disabled by
default and gets enabled if the attached player fires the "ready" event


Version 0.3RC1
16-April-2009

Note: API changed in Version 0.3RC1 and does not work with Ext JS < 3.0
Note: Ext.ux.YoutubePlayer now extends Ext.FlashComponent. No third party libraries
are needed anymore.

- enhancements: Component now works with Ext3.0RC1


-----

Hey there,

I needed a mediaplayer for my application and I thought I should share it with the Ext JS community.

The user extension implements the Youtube Chromeless API and uses Ext native components to control the video loading/playback.

It's capable of showing the buffer status and the playback slider let's you jump to any position in the video playback. You'll also be able to mute/unmute the video and set the overall volume.

The player panel derives from hendricd's Ext.ux.MediaPanel and uses a custom implementation of the Ext team's Ext.form.SliderField as found in the ext-2.0.2-example folder.

You can find the project page here: http://www.siteartwork.de/youtubeplayer.
Please note, that if you use the ux on your server, make sure to obtain a youtube api developer key. You can get the key here: http://code.google.com/apis/youtube/dashboard/

Have fun using the extension. Feedback appreciated! :)

http://www.siteartwork.de/youtubeplayer/youtubeplayer-screenshot.png

escalade
25 Mar 2008, 6:28 AM
Thanks for sharing. It looks cool.
Do you have any plan to extend that player with more functions, like retrieving user comments, rating etc...?

ThorstenSuckow
25 Mar 2008, 7:00 AM
Thanks for sharing. It looks cool.
Do you have any plan to extend that player with more functions, like retrieving user comments, rating etc...?

I might add functionality like a playlist to my application which uses this ux... not sure, time will tell. On the other hand, the ux is very "pluggable" so it shouldn't be a big deal to extend functionality.

JorisA
25 Mar 2008, 1:20 PM
Wow looks damn sweet :D
Nice work. Now I need to find some kind of use for this in my app :P

wm003
25 Mar 2008, 11:46 PM
Great work!=D> Thank you for sharing!

galdaka
25 Mar 2008, 11:49 PM
Excellent work!!

Live demo will be good for testing and put the results here.

Thanks in advance,

ThorstenSuckow
26 Mar 2008, 3:07 AM
Excellent work!!

Live demo will be good for testing and put the results here.

Thanks in advance,


Just follow the links on the project page (http://www.siteartwork.de/youtubeplayer) or go directly to the demo (http://www.siteartwork.de/youtubeplayer_demo).

mystix
26 Mar 2008, 5:18 AM
very neat. =D>

found 2 small bugs on the demo page though:

when the volume icon is clicked, the slider is displayed at position 0 even when the volume > 0 (this happens on FF 2.0.0.12). Once this happens the volume drops to 0 and i'm unable to hear anything until i clear my cache and reload the demo page.
the volume slider doesn't move with the window after it is displayed.
http://img260.imageshack.us/img260/7849/youtubevh0.png

the mute icon works fine though.

ThorstenSuckow
26 Mar 2008, 7:36 AM
very neat. =D>
found 2 small bugs on the demo page though:

when the volume icon is clicked, the slider is displayed at position 0 even when the volume > 0 (this happens on FF 2.0.0.12). Once this happens the volume drops to 0 and i'm unable to hear anything until i clear my cache and reload the demo page.
the volume slider doesn't move with the window after it is displayed.



Right, thx for the feedback. I wanted the volume slider to look fancy but it brings too much sideeffects along with it.
I changed the volume control so that the volume slider sits in a menu now. Ext will take care of it's positioning now so no extra event-triggering needed here.

The buggy initial volume should now be fixed, too.

http://www.siteartwork.de/youtubeplayer/youtubeplayer-screenshot2.png

MarkB
26 Mar 2008, 9:31 AM
Resizing the Ext window works fine. Maximizing it results in the video reseting back to start.

Looks great ...

ThorstenSuckow
26 Mar 2008, 9:44 AM
Resizing the Ext window works fine. Maximizing it results in the video reseting back to start.

Known Mozilla Bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=262354

Ytorres
26 Mar 2008, 10:40 AM
So great MindPatterns !

Keep up this good work ;) and thanks for sharing !

andrei.neculau
26 Mar 2008, 2:54 PM
Thorsten, looks really nice and useful!

galdaka
27 Mar 2008, 1:10 AM
Excellent work.

The slider of the volume is not view correctly in IE. I view only a part of the total of slider.

Thanks in advance,

ThorstenSuckow
27 Mar 2008, 6:20 AM
Excellent work.

The slider of the volume is not view correctly in IE. I view only a part of the total of slider.

Thanks in advance,

Do you have a screenshot? Which IE version?

mystix
27 Mar 2008, 6:55 AM
gotta love IE7... 8-|

button transparency when stopped:
http://img245.imageshack.us/img245/581/transparencystoppedwo5.png

button transparency when playing:
http://img245.imageshack.us/img245/3511/transparencyplayingqo5.png

no problems with the volume control slider as described by @galdaka though. works great!
http://img245.imageshack.us/img245/4470/looksgreatjs9.png

ThorstenSuckow
27 Mar 2008, 7:10 AM
gotta love IE7... 8-|

button transparency when stopped:
http://img245.imageshack.us/img245/581/transparencystoppedwo5.png

button transparency when playing:
http://img245.imageshack.us/img245/3511/transparencyplayingqo5.png


Yeah I know... that's one of the many arguments why I use FF for development now only (firebug :inlove:)

Gonna play around with the img format and see if I can fix this.

mystix
27 Mar 2008, 7:26 AM
i'm assuming those 3 thorny buttons are PNGs? try converting them to GIFs and give those needed areas complete transparency.
the rest of the controls are displaying just fine though.

ThorstenSuckow
27 Mar 2008, 7:29 AM
i'm assuming those 3 thorny buttons are PNGs? try converting them to GIFs and give those needed areas complete transparency.
the rest of the controls are displaying just fine though.

They are from the silk iconset (famfamfam.com). Converting them to gifs messed them up good so I added another layer over them and combined them using linear dodging. The new version will be ready to download in a few minutes.

mystix
27 Mar 2008, 7:33 AM
Converting them to gifs messed them up good so I added another layer over them and combined them using linear dodging.

\:D/ grandmaster, teach me the ways of the grasshopper...

ok really, how on earth do you do that? photoshop? :-/

ThorstenSuckow
27 Mar 2008, 7:35 AM
\:D/ grandmaster, teach me the ways of the grasshopper...

ok really, how on earth do you do that? photoshop? :-/

As long as CSS won't support layer combining... yeah, 3rd party software FTW ;)

mystix
27 Mar 2008, 7:38 AM
As long as CSS won't support layer combining... yeah, 3rd party software FTW ;)

awww man... i suck at graphics software. :((
oh well. guess i'll have something for this weekend now. :>

mystix
27 Mar 2008, 7:48 AM
yay. all's well on the microflab front. :D

one more thingy:
http://img245.imageshack.us/img245/5125/previousnextax8.png

are those jump-to-start/jump-to-end buttons supposed to work?

ThorstenSuckow
27 Mar 2008, 7:53 AM
yay. all's well on the macroflab front. :D

one more thingy:
http://img245.imageshack.us/img245/5125/previousnextax8.png

are those jump-to-start/jump-to-end buttons supposed to work?

Not right now... I want to use them to skip playlist entries, but this playlist is not finished yet, thus not part of the ux :)

hendricd
27 Mar 2008, 8:16 AM
@MindPatterns: Heads up. There's a new build of ux.MediaPanel.Flash on the horizon. I'll try to be gentle ;)

ThorstenSuckow
27 Mar 2008, 9:50 AM
@MindPatterns: Heads up. There's a new build of ux.MediaPanel.Flash on the horizon. I'll try to be gentle ;)

Cool... looking forward to this. Without your flash panel, integrating the chromeless youtube vid would have been a pain ** *** *** :)

galdaka
27 Mar 2008, 11:12 AM
Do you have a screenshot? Which IE version?

IE6

ThorstenSuckow
27 Mar 2008, 11:21 AM
IE6

IE6... ppl still use this? ;)

I'll install a version on my dev environment and have a look at it!

garraS
27 Mar 2008, 7:46 PM
Awesome work!

Thanks for sharing!

garraS

wm003
27 Mar 2008, 10:47 PM
IE6... ppl still use this? ;)

Sadly...yes. Our company decided to stay at IE6 until we _may_ move over to Vista... And that won't happen the next months, because there would be thousands of clients updated.

So our intranet applications need to work on IE6. Fortunately i have admin rights on my company machine so i'm also able to test everything in IE7, IE8beta, FF2, FF3beta, Opera9 and even Safari 3.1beta.

Kevin_Liu
30 Mar 2008, 5:26 PM
Looks great! THX~

kai5263499
8 Apr 2008, 1:28 PM
I'm trying to get this plugin to work inside of a dashboard portlet system in my local development enviroment by creating the player and controller in the portlet's initComponent section.

The bbar control panel loads just fine but the player never initalizes the youtube player or calls the oytpr function.

Here's my code, any ideas are greatly appreciated:

this.playerPanel = new Ext.ux.YoutubePlayer({
developerKey : YT_KEY,
playerId : this.id+'-ytplayer',
videoId : this.videoId
});

this.playerPanel.on('ready', function(panel, player) {
console.log('playerpanel on ready');
panel.cueVideoById(this.videoId, 0);
}, this.playerPanel);

this.items = [ this.playerPanel ];
this.bbar = new Ext.ux.YoutubePlayer.Control({
player : this.playerPanel,
border : false,
id : 'control',
style : 'border:none;'
});

BTW: Is there a right way to initialize a player with a default video?

ThorstenSuckow
8 Apr 2008, 5:43 PM
I'm trying to get this plugin to work inside of a dashboard portlet system in my local development enviroment by creating the player and controller in the portlet's initComponent section.

The bbar control panel loads just fine but the player never initalizes the youtube player or calls the oytpr function.

Here's my code, any ideas are greatly appreciated:

this.playerPanel = new Ext.ux.YoutubePlayer({
developerKey : YT_KEY,
playerId : this.id+'-ytplayer',
videoId : this.videoId
});

this.playerPanel.on('ready', function(panel, player) {
console.log('playerpanel on ready');
panel.cueVideoById(this.videoId, 0);
}, this.playerPanel);

this.items = [ this.playerPanel ];
this.bbar = new Ext.ux.YoutubePlayer.Control({
player : this.playerPanel,
border : false,
id : 'control',
style : 'border:none;'
});


Please add "layout:fit" to your portlets configuration, the video should show up then.



BTW: Is there a right way to initialize a player with a default video?

If you mean "this" instead of "there", then yes, it's the right way.
:)

rthibault
8 Apr 2008, 6:29 PM
Anyone gotten this to work with modal:true? I can hear the video, but the screen goes black.

Very nice extension!

kai5263499
9 Apr 2008, 4:35 AM
Please add "layout:fit" to your portlets configuration, the video should show up then.

Thank you! That ended a few hours of frustration for me.

mandric
11 Apr 2008, 9:04 AM
Mindpatterns, looks really cool, I was looking at the release date on the project page and it states 2007. Is that a typo?

Also does the youtube chromeless player play h.264 (.mov,.mp4?) files? I'm looking for a player that does h.264 and flv but also can reference youtube videos.

http://groups.google.com/group/yunus_discussion/browse_thread/thread/383ef6b0bac8e474/f597f07d464e4659#f597f07d464e4659

In research mode ... thanks for any help.

ThorstenSuckow
11 Apr 2008, 10:43 AM
Mindpatterns, looks really cool, I was looking at the release date on the project page and it states 2007. Is that a typo?


Yeah, it's fixed.



Also does the youtube chromeless player play h.264 (.mov,.mp4?) files? I'm looking for a player that does h.264 and flv but also can reference youtube videos.

http://groups.google.com/group/yunus_discussion/browse_thread/thread/383ef6b0bac8e474/f597f07d464e4659#f597f07d464e4659

In research mode ... thanks for any help.

The player loads the chromeless flash video into it's panel, thus it can only show what youtube delivers. If there would be a player for h.246 or flv that is controllable via javascript, it would be possible. But as of now, I don't know any (browser-enabled) api that allows you to do that.

mandric
11 Apr 2008, 10:57 AM
http://flowplayer.org/

I am playing with three players right now and flowplayer, jw player and flv player. Flowplayer seems to have the most features.

http://flv-player.net/
http://www.jeroenwijering.com/?item=JW_FLV_Player

Let me know what you think. I'd am interested in working on it if you think it would work or is something that doesn't exist yet.

mandric
11 Apr 2008, 11:03 AM
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/javascript.htm

Mindpatterns, it looks like the javascript API is there and well?

Now I'm pretty sure JW Player doesn't support youtube, but I think flowplayer does.

kai5263499
14 Apr 2008, 3:30 PM
I've gotten the video to display correctly with the controls and all on an initial load, but when I remove the player and then later recreate it, the control panel in the bbar doesnt show the play/pause buttons, only a non-working slider and volume bar.

Additionally, the video seems to reload as 1/4 the size of the actual window.

Is there some special way I need to get rid of players to force a "clean" load?

rthibault
23 Apr 2008, 3:19 PM
Bump...I'm having Kai's problem too. The toolbar breaks when I close and reopen the window.

Mindpatterns, any idea why this doesn't work with modal:true in the Window config?

ThorstenSuckow
23 Apr 2008, 6:27 PM
Bump...I'm having Kai's problem too. The toolbar breaks when I close and reopen the window.

Mindpatterns, any idea why this doesn't work with modal:true in the Window config?

Guys, I'm sorry, support for this extension is suspendet due to the unclear situation related to Ext user extensions and licensing.

As soon as the Ext-team provides an official statement, I'll come back to you.

Legend
14 Jul 2008, 8:40 AM
Hi... for some reason, Firefox does not display the page and gives me the following errors when firebug is activated:



missing ) after argument list
[Break on this error] media.style = Ext.apply({he...idth:'@width'} ,m.style||{}, media.style
mediapanel.js (line 91)
Ext.ux.MediaPanel is undefined
[Break on this error] Ext.ux.YoutubePlayer = Ext.extend(Ext.ux.MediaPanel.Flash, {
YoutubePlayer.js (line 17)
Ext.ux.YoutubePlayer is not a constructor
[Break on this error] bgColor : "#000000",


I am uaing the sample files that were provided in Firefox 3.0. Checked it even in IE and it doesn't work... Any help please?

ThorstenSuckow
14 Jul 2008, 3:13 PM
Hey there,



I am uaing the sample files that were provided in Firefox 3.0. Checked it even in IE and it doesn't work... Any help please?


from the changelog:



Version 0.2
18-June-2008

Note: API changed in Version 0.2 and does not work with Ext.ux.Media < 1.0RC1


If you checked out the latest release of the SVN repository, you should update the vendor code (hendricd's Ext.ux.MediaPanel) accordingly.

HTH

Thorsten

Legend
14 Jul 2008, 3:21 PM
Thank you but the problem is a little different now. I was confused because it worked fine yesterday in my laptop but today I realized something very weird - It works in my laptop (home) but it doesn't work in my desktop (office - has all sorts of protections I think and we have to connect through a proxy) but works in a different desktop(school) . All of them use Firefox 3.0 with Firebug installed. The same happens in IE too. And by the way, I didn't check it out of SVN...

I know it is weird, but I'm really curious to know what maybe wrong with this...

drew
5 Nov 2008, 2:51 PM
Is there (or will there be) a full screen mode?

Diddy433
26 Nov 2008, 4:10 AM
Guys, I'm sorry, support for this extension is suspendet due to the unclear situation related to Ext user extensions and licensing.

As soon as the Ext-team provides an official statement, I'll come back to you.

What is going on with this ux? I am having the same problem as the others. The toolbar is missing when I close and re-open.

Diddy433
26 Nov 2008, 4:13 AM
I actually had another question as well. It seems that some videos do not play such as certain music videos and some others. Does anyone know why? Is there some kind of licensing issue when artists upload official music videos that it can only be played on YouTube? I don't know if there are other videos like this as well.

ThorstenSuckow
26 Nov 2008, 4:20 AM
What is going on with this ux? I am having the same problem as the others. The toolbar is missing when I close and re-open.

License questions have been answered so far.

I will come back to the component in a short while, since I'm using it in another project and need to take care of a few issues. However, it's low priority right now.

flashhgordon
19 Dec 2008, 3:28 AM
It looks all messy. The css doesn't render well. The youtube video runs outside the youtube window in IE7. The control buttons don't render. However in Firefox they do but still looks messy though.

Someone any thoughts? Thank you in forward.
Flashh

rreddy
21 Jan 2009, 1:45 AM
Hi,
I have came accorssed with Ext.ux.YoutubePlayer. That was great product. i need customizing of this product like playlist, player should include in html page not as pop up and bugs fixing like full screen and resize in firefox.
i have some quaries abt this player like is this player was devolped under youtube and google terms and conditinons. can i use this player in my cumercial site ? if possible can u send the reference sites

those are using this player..

kenton
22 Jan 2009, 11:02 PM
I am getting a Ext.ux.MediaPanel is undefined, I have double checked all my includes and I believe I have included everything, both Ext.ux.Youtube scripts and the Ext.ux.MediaPanel

Any thoughts as to what it could be.

here is the very simple code (just trying to get example running in my dev env) i am trying to run:

var playerPanel = new Ext.ux.YoutubePlayer({
developerKey : DEVELOPER_KEY,
playerId : 'myplayer',
border : false,
ratioMode : 'strict',
hideMode : 'visibility',
bgColor : "#000000",
bodyStyle : 'background-color:#000000;'
});

playerPanel.on('ready', function(panel, player) {
panel.cueVideoById('u1zgFlCw8Aw', 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();

kenton
22 Jan 2009, 11:21 PM
I checked and all of my javascripts are the latest versions.

salilak
3 Feb 2009, 6:49 AM
Hi ,
This is a great work. It helped me to a great extent.

I am facing an issue here. The moment I give my video url on click of Eject button, and click ok, it throws an error this.player is undefined.

I am not able to figure out why this is happening. Can some one please guide me in this case. I tried with Demo url given. Even there also I am facing the same issue.

Thanks in Advance.

-Salila

rproudman
13 Apr 2009, 2:51 PM
I tried the demo but the play button doesn't do anything and the initial picture (frame1?) in the player just stays there.

I have now read on line - of course after I installed flashplayer 10 - that it might be flash player 10 causing the problem.

Is this true?
Anyone else have the same issue?

Thx.

ThorstenSuckow
16 Apr 2009, 4:21 AM
There is a new version - along with bug fixes and improvements, the component does now work with Ext >= 3.0RC1.
The component does now derive from Ext.FlashComponent, which breaks backwards compatibility to versions prior Ext 3.0.

ThorstenSuckow
17 Apr 2009, 5:19 PM
Second release candidate is now available. See the first page for the changelog.

bhangale.parag
28 Apr 2009, 3:17 AM
hi all,
I am new to this mediapanel API but I want to ask one qeustion...
Rightnow YoutubePlayer is working fine for me but it shows Videos of YouTube how i can map the video from my computer ??
can u please Help me ...
I am confused here ...

THanks in advance...

ThorstenSuckow
28 Apr 2009, 4:22 AM
hi all,
I am new to this mediapanel API but I want to ask one qeustion...
Rightnow YoutubePlayer is working fine for me but it shows Videos of YouTube how i can map the video from my computer ??
can u please Help me ...
I am confused here ...

THanks in advance...

It uses the Youtube Chromeless API so I don't think you're able to play other flash videos than that. You might want to search for flv on this forums which might lead you in the direction of Doug's media panel extension - I guess it supports flv player/files.

dolittle
5 May 2009, 2:06 PM
On the trunk version I see the following code:

Ext.applyIf(this, {
url : "http://gdata.youtube.com/apiplayer?key=" +
this.developerKey + "&enablejsapi=1&playerapiid="+
this.playerId,
start : false,
controls : false,
cls : 'ext-ux-youtubeplayer',
scripting : 'always',
params : {
wmode : 'opaque',
bgcolor : this.bgColor || "#cccccc"
}
});


But on ext's FlashComponent code I don't see it uses your scripting and params config because it is hard coded:

// params
swf.addParam("allowScriptAccess", "always");
if(this.wmode !== undefined){
swf.addParam("wmode", this.wmode);
}
I think that the way you built the config is the preferred way.
Maybe have flashCfg and under it have the params and other flash settings.
Am I missing something or should I submit a bug/feature request for this on the ext 3.0?

Thanks

ThorstenSuckow
5 May 2009, 10:09 PM
On the trunk version I see the following code:

Ext.applyIf(this, {
url : "http://gdata.youtube.com/apiplayer?key=" +
this.developerKey + "&enablejsapi=1&playerapiid="+
this.playerId,
start : false,
controls : false,
cls : 'ext-ux-youtubeplayer',
scripting : 'always',
params : {
wmode : 'opaque',
bgcolor : this.bgColor || "#cccccc"
}
});


But on ext's FlashComponent code I don't see it uses your scripting and params config because it is hard coded:

// params
swf.addParam("allowScriptAccess", "always");
if(this.wmode !== undefined){
swf.addParam("wmode", this.wmode);
}
I think that the way you built the config is the preferred way.
Maybe have flashCfg and under it have the params and other flash settings.
Am I missing something or should I submit a bug/feature request for this on the ext 3.0?

Thanks

dunno... Ext 3.0 is still in an early state and what you see in the code are leftovers of the implementation when it used the media components from Doug (I decided to use Ext.FlashComponent since it simplifies setting up the extension a little bit without the need of getting vendor code). There is always room for improvement so if you think your contribution could be useful - yeah a feature request would be the way to go.

amegahed
12 Jul 2009, 2:57 AM
im getting this error:


Ext.menu.Adapter is not a constructor
http://192.168.1.150/test/ext/ux/YoutubePlayerControl.js
Line 254


which points to:


this.muteButton = new Ext.Toolbar.SplitButton({
250 iconCls : 'ext-ux-youtubeplayer-volume',
251 enableToggle : true,
252 disabled : true,
253 menu: new Ext.menu.Menu({
254 items : [new Ext.menu.Adapter(this.volumePanel)]
255 })
256 });


any idea on what is wrong here?

here is the code i use for the player:


//http://code.google.com/apis/youtube/dashboard/
var YouTube_KEY = '........ my api key';
var winPlayer;
var playerPanel = new Ext.ux.YoutubePlayer({
developerKey : YouTube_KEY,
playerId : 'myplayer',
border : false,
ratioMode : 'strict',
hideMode : 'visibility',
bgColor : "#000000",
bodyStyle : 'background-color:#000000;'
});

playerPanel.on('ready', function(panel, player) {
panel.cueVideoById('u1zgFlCw8Aw', 0);
}, playerPanel);
function btnVideoPlay(btn){
if(!winPlayer){
winPlayer = 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
});
}
winPlayer.show(this);
};

Ext.onReady(function(){


});

ThorstenSuckow
12 Jul 2009, 5:32 AM
It looks like you are not the latest code from the repository - point your svn client to http://ext-ux-youtubeplayer.googlecode.com/svn/trunk/ and do a checkout.

ThorstenSuckow
16 Jul 2009, 3:46 PM
I just commited 0.3RC5 to the trunk - it brings compatibilty for Ext 3.0.0. This should be the last release candidate before 0.3 gets final. See http://code.google.com/p/ext-ux-youtubeplayer/source/detail?r=15 for the changes that made it into this release candidate.

cfhank
17 Jul 2009, 9:56 PM
anyone have an example online using extjs 3.0.0?
tried to implement it but not here, the buttons are disabled ..


look image attached.

ThorstenSuckow
18 Jul 2009, 4:55 AM
anyone have an example online using extjs 3.0.0?
tried to implement it but not here, the buttons are disabled ..


look image attached.

Did you specify a Youtube API Key?

cfhank
18 Jul 2009, 10:34 AM
yes, but not work..

my Key: [...]

has a test for me. tanks.

ThorstenSuckow
18 Jul 2009, 10:38 AM
yes, but not work..

my Key: -

has a test for me. tanks.

Not a good idea to post this here, since it's your individual key.

1, Did you get the latest copy out of the trunk?
2. Are using Ext 3.0.0?
3. Did you try with Firefox? If the same problem occurres, do you have some Firebug console output?
4. How does your code look like?

cfhank
18 Jul 2009, 10:51 AM
I removed my key.

I would have generated the key the wrong youtube? it asks for the domain, but I put a test on localhost, can it?

my code:



<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="teste/YoutubePlayer.js"></script>
<script type="text/javascript" src="teste/YoutubePlayerControl.js"></script>
<link rel="stylesheet" type="text/css" href="teste/css/ext-ux-youtubeplayer.css" />
<link rel="stylesheet" type="text/css" href="teste/css/ext-ux-youtubeplayer-control.css" />
</head>
<body>

<script type="text/javascript">
Ext.onReady(function(){
var youtubePlayerPanel = new Ext.ux.YoutubePlayer({
developerKey : '...',
playerId : 'myplayer',
ratioMode : 'strict',
bgColor : "#000000",
cls : 'ext-ux-youtubeplayer'
});
var w = new Ext.Window({
width : 400,
height : 400,
title : "Test",
layout : 'fit',
items : [
youtubePlayerPanel
],
bbar : new Ext.ux.YoutubePlayer.Control({
player : youtubePlayerPanel,
border : false,
id : 'control',
style : 'border:none;'
})
});

w.show();

});

</script>
</body>
</html>

cfhank
18 Jul 2009, 11:01 AM
it was the problem of the same domain, tanks..

lorezyra
11 Dec 2009, 6:30 PM
Without modifying the Ext.apply function of Ext.ux.YoutubePlayer.Control(),
Is there a way to simply not render the ejectbutton?



Ext.apply(this, {
cls : 'ext-ux-youtubeplayer-control',
items : [
this.ejectButton,
this.playButton,
this.stopButton,
this.previousButton,
this.nextButton,
' ',
this.sliderField,
' ',
this.elRuntime,
new Ext.Toolbar.Spacer(),
this.muteButton
]
});
I'm thinking something along the lines where I pass a config for the buttons I want...

coolstar
2 Jan 2010, 4:23 PM
Can you give us an example of using the player in the desktop? I can't seem to get this to work. I have put in the code.


new MyDesktop.YoutubeWindow(),


MyDesktop.YoutubeWindow = Ext.extend(Ext.app.Module, {
id:'yt-win',
init : function(){
this.launcher = {
text: 'Youtube Player',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var playerPanel = new Ext.ux.YoutubePlayer({
developerKey : DEVELOPER_KEY,
playerId : 'myplayer',
border : false,
ratioMode : 'strict',
hideMode : 'visibility',
bgColor : "#000000",
bodyStyle : 'background-color:#000000;'
});

playerPanel.on('ready', function(panel, player) {
panel.cueVideoById('u1zgFlCw8Aw', 0);
}, playerPanel);
var desktop = this.app.getDesktop();
var win = desktop.getWindow('yt-win');
if(!win){
win = desktop.createWindow({
id: 'yt-win',
title:'Youtube Player',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
layout: 'fit',
items: [playerPanel],
bbar : new Ext.ux.YoutubePlayer.Control({
player : playerPanel,
border : false,
id : 'control',
style : 'border:none;'
}),
listeners : {
'resize': function(){this.bottomToolbar.fireEvent('resize')}
}
});
}
win.show();
}
});

Here is the error reported by firebug:
Ext.Menu.Adapter is not a constructor

wm003
4 Jan 2010, 4:21 AM
Ext.Menu.Adapter is not a constructor

i guess you are using Ext 3.x ? The Menu Component has been changed in Ext 3.x so the extension might need some code adjustments.

ThorstenSuckow
4 Jan 2010, 5:58 AM
I have updated the component at r17 to work with Ext 3.0.3 (http://code.google.com/p/ext-ux-youtubeplayer/source/browse/trunk/)

coolstar
4 Jan 2010, 5:57 PM
Thanks. I updated the extension, and now the player works when I open the window once, but after I close it(destroying all the components), I get the following error in firebug:

n is undefined

When I try to reopen the window, I get the following error:

I is undefined
Here is my code:

new MyDesktop.YoutubeWindow(),


MyDesktop.YoutubeWindow = Ext.extend(Ext.app.Module, {
id:'yt-win',
init : function(){
this.launcher = {
text: 'Youtube Player',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var playerPanel = new Ext.ux.YoutubePlayer({
developerKey : DEVELOPER_KEY,
playerId : 'myplayer',
border : false,
ratioMode : 'strict',
hideMode : 'visibility',
bgColor : "#000000",
bodyStyle : 'background-color:#000000;'
});
var desktop = this.app.getDesktop();
var win = desktop.getWindow('yt-win');
if(!win){
win = desktop.createWindow({
id: 'yt-win',
title:'Youtube Player',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
minimizable: false,
layout: 'fit',
items: [playerPanel],
bbar : new Ext.ux.YoutubePlayer.Control({
player : playerPanel,
border : false,
id : 'control',
style : 'border:none;'
}),
listeners : {
'resize': function(){this.bottomToolbar.fireEvent('resize')}
}
});
}
win.show();
}
});

I am using the Extjs 3.1 desktop.

Here is the clip from the firebug console after I open the window, close it(destroying the components), and trying to reopen the window:
I had to send it in a zip, because it is too large, and is 2.7 MB uncompressed.

ThorstenSuckow
6 Jan 2010, 12:48 AM
Thanks. I updated the extension, and now the player works when I open the window once, but after I close it(destroying all the components), I get the following error in firebug

No clue. Can you put a demo online so I can take a look at it myself?

coolstar
10 Jan 2010, 6:04 PM
Here is the demo so that you can see for yourself:
http://coolstar.zxq.net/csos/login.php
Username: demo
Password: demo

Then, click Start > Youtube Player.

Note: For some reason, the demo doesn't work in IE. I have to resolve that. For now use some other browser. (e.g, Firefox, Chrome, Safari, Opera).

coolstar
11 Jan 2010, 7:42 PM
Just a reminder. I put a live demo for you to see:
http://csos.zxq.net/

Username: demo
Password: demo

Then, click Start > Youtube Player.

Note: For some reason, the demo doesn't work in IE. I have to resolve that. For now use some other browser. (e.g, Firefox, Chrome, Safari, Opera).

coolstar
11 Jan 2010, 7:43 PM
Can you check the demo I put just now?

ThorstenSuckow
12 Jan 2010, 1:45 AM
I have checked the demo and can confirm the issue. It seems to be related with the SWFObject. Which Ext version are you using? 3.1?

coolstar
12 Jan 2010, 7:10 AM
Yes. I am

swarnendude
21 Jan 2010, 4:05 AM
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
10 Mar 2010, 7:18 AM
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
19 Mar 2010, 3:18 PM
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.

http://www.conjoon.org/images/conjoon_youtubeplayer_hd_small.jpg (http://www.conjoon.org/images/conjoon_youtubeplayer_hd.jpg)

jvandemerwe
19 Mar 2010, 4:36 PM
Thank you for your reply. I am really happy with the 0.4 improvements. That was something I was missing.

coolstar
31 Mar 2010, 1:40 PM
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/videos?max-results=2&alt=json&format=5&q=Rickroll

XML Search for Rickroll:
http://gdata.youtube.com/feeds/api/videos?max-results=2&format=5&q=Rickroll

Kcarpenter
11 Feb 2011, 1:01 PM
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
27 Oct 2012, 3:13 PM
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
21 Feb 2013, 2:49 AM
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