Custom button in control bar

JW Player — Apr 04, 2014 09:09AM EDT

How to add custom buttons to the control bar of the player ? Can it be added and controlled using only javascript ?

20 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

You need to build a custom Flash plugin in order to do this – http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/17679/building-flash-plugins

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

I have added the custom button to the control bar.
How to get the coordinates of control bar button in action script?
When this button is clicked , I want to display a small box above this control bar button.

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

You should look at the source of a plugin like “hd” for example, it has a controlbar option.

http://developer.longtailvideo.com/trac/browser/plugins/hd/src/as/HD.as

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

I want to have a custom controlbar button which is available in HTML5 and Flash. Am I right that it can only be done in Flash via a Flash plugin which has no effect in HMTL5 mode?

One possible workaround for me would be to reuse the muteButton.
Can I turn off the default events on this button, so that I can use my on javascript event.

The usecase I have is to change the player to a bigger size between normal and fullscreen. Like the "large player" button in youtube.

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

Yes, it is only possible via a plugin in Flash mode. That is an interesting work around. You can probably just make two buttons in HTML on the page to do resize events in JS, though.

Like – http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/resize.html

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

thanks for the example link, this is my plan c.
We really want to have the switch in the controlbar beside the fullscreen button.
I'm not a flash developer and prefer to don't go into that :-).

The solution we want should work with HTML5 AND Flash Video.

Here my Questions:
1. should it be possible to conquer the mute button from jw player in HTML5 and Flash (this needs Flash programming, right?) suppress all attached events

2. plan b, use the dock for fullscreen toggle and other player sizes

3. can I make a blankButton? have seen this in the skin.xml, but it doesn't worked,
so I could free space in the controlbar and overlay my custom javascript button

4. are javascript controlbar buttons perhaps a planed feature of JW 6?

For me 3. should be the easiest if it's possible

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

ok found a workaround for 3.
I gave the fullscreen buttons the double width right aligned. I overlayed my html over the free space in the controlbar. Works in html5 and flash mode :-). A bit hacky but it seems to work. For the moment I always show the controlbar, but via javascript event callbacks it should also work on hide/show.

I'm still interested in a better solution.

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

This seems like the best way to do it at the moment.

Do you have an example of where you have implemented this? I am curious as to what you did here, thanks.

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

When i add a custom button to the default skin it works.
But when i change the skin(downloaded), the custom button doesnt show up.

In the building Building Skins page, plugins section gives example.

<component name="hd">
<elements>
<element name="dockIcon" src="dockIcon.png" />
<element name="controlbarIcon" src="controlbarIcon.png" />
</elements>
</component>

If i add my custom plugin details in the xml and give it a element name, how to refer this name in the flash plugin API
addButton(icon:DisplayObject, name:String, handler:Function=null):

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT -1 rated :

Can I see where this is running?

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

You can see it running @ http://175.41.177.149/

I have created a plugin which adds a button to the control bar. Source code part of the above link.

This plugin is added a jwplayer with default skin and another instance of jwplayer with beelden.zip skin (http://www.longtailvideo.com/addons/skins/155/Beelden)

Jwplayer player with default skin shows the icon but the other one does not show up. I tried with different skins. same behaviour.

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

I see the button on the top, but not the bottom.

You need to make sure that you are compiling against the latest SWC for the player.

For example, in my SlowMO plugin, I created a dock or a controlbar icon – http://www.longtailvideo.com/addons/plugins/270/Slowmo

Inside of the main class:

public class Slowmo extends Sprite implements IPlugin {



I have the following:

//controlbar icon
		[Embed(source="controlbar.png")]
		private const ControlbarIcon:Class;
		
		//dock icon
		[Embed(source="icon.png")]
		private const Icon:Class;
		
		/** Reference to embed icon **/
		private var skinIcon:DisplayObject;
		
		/** Reference to the dock button **/
		private var dockButton:DockButton;
		
		/** Reference to the clip on stage. **/
		private var controlIcon:DisplayObject;



Then inside of:

public function initPlugin(player:IPlayer, config:PluginConfig):void {



I use this code to show the controlbar icon or the dock icon:

//if there is a dock
			if (player.config.dock) {
				skinIcon = player.skin.getSkinElement("Slowmo ", "dockIcon");
				if (skinIcon == null) 
				{
					skinIcon = new Icon();
				}
				dockButton = player.controls.dock.addButton(skinIcon, "Slowmo", dockHandler) as DockButton;
			
			//no dock
			} else {
				
				controlIcon = player.skin.getSkinElement("Slowmo", "controlIcon");
				if (controlIcon == null) 
				{
					controlIcon = new ControlbarIcon();
				}
				controlIcon = player.controls.controlbar.addButton(controlIcon, "Slowmo", controlHandler) as DisplayObject;
			}



Hope this helps you. I have tested this plugin with Skins and this method works.

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

I am able to add a button to the control bar using the code mentioned above. On default skin the icons looked color. But with other skins the icon shows up as a gray icon.

Any idea why this can happen ?

You can see it running @ http://175.41.177.149/

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

This happens when using ZIP skins. It will be colored if you use SWF skins. This is the same exact way the plugins that I have written behave.

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

Could you please share any guide for building SWF skins ?
Is there any limit on number of custom buttons that can be added to the control bar ?

In the following page http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/43/using-jw-player-skins, it says SWF skins are deprecated.

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

You can still build them, or use any of the ones from our library. They are deprecated, but still work in the V5 player. You can add as many controlbar buttons as you want, really. Here is how to build V4 skins (swf) – http://developer.longtailvideo.com/trac/wiki/Player4Skinning

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

Hi all,
I want to disable the scrolling option in the control bar. How do to this?

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

You can set the controlbar variable to false, or make your own skin withone the controlbar.

Up Down

JW Player

User

Apr 04, 2014 11:41AM EDT 0 rated :

That's good, but all the other options such as play, volume and full screen are also hiding. I want the full screen option to be appeared.

Up Down

Ethan Feldman

JW Player Support Agent

Apr 04, 2014 11:41AM EDT 0 rated :

You can remove that in the skinning model, then – http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/skinning-the-jw-player-5

This question has received the maximum number of answers.