How to hide the JWPlayer play button?

Question

How to hide the play button, which is located in the center of the video screen in JW Player?

I am using player version 5.4, and I am deploying it using my "JW Embedder" technique.

I tried the following with no luck:

jwplayer("myPlayer").setup({ file: 'myMediaFile.mp4', image: 'myPosterFile.jpg', controlbar: 'bottom', icons: false }); 

I read somewhere that this may have been removed with version 5.0 and should now be done using the skin. But, I also read that he was back in version 5.1 ...?

Answer 1

You are looking for the "display" plugin. Hide as needed.

 jwplayer().getPlugin("display").hide(); 

Answer 2

I had the same problem and the solution was to install:

  'controlbar': "none" 

In addition, I am using JW Player 5.5.

I know if that works.

Answer 3

Add this to your onPause and possibly to the onReady event if you are not using auto play:

 jwplayer().getPlugin("controlbar").hide(); 

so that it looks like this:

 jwplayer("container").setup({ events: { onPause: function(event){ jwplayer().getPlugin("controlbar").hide(); } } }) 

Link: http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference

Check out the Plugins section.

Answer 4

Your code should work with JWplayer 5.10 if you put everything in between ' '

 jwplayer("myPlayer").setup({ 'file': 'myMediaFile.mp4', 'image': 'myPosterFile.jpg', 'controlbar': 'bottom', icons: 'false' }); 

Answer 5

The "icons: false" option seems to work, but not with the HTML 5 player version. Hopefully they will take care of this with any versions later than JW 5.4.

Answer 6

You can write a flash plugin using the Flex SDK. I wrote a base class that inherits from Sprite to handle this.

 import flash.display.Sprite; import flash.display.DisplayObject; import com.longtailvideo.jwplayer.player.IPlayer; import com.longtailvideo.jwplayer.view.components.ComponentButton; import com.longtailvideo.jwplayer.view.interfaces.IControlbarComponent; public class ExtendedPlugin extends Sprite { protected var _player:IPlayer; public function ExtendedPlugin() { } public function hideControlbarButton(buttonName:String):void { var controlbar:IControlbarComponent = _player.controls.controlbar; var button:DisplayObject = controlbar.getButton(buttonName); button.height = 0; button.width = 0; } } 

Then you can write your plugin, inheriting it from this class.

 public class MyPlugin extends ExtendedPlugin implements IPlugin { public function initPlugin(player:IPlayer, config:PluginConfig):void { _player = player; } } 

If you want to hide the play and pause buttons, for example, you will do the following:

 hideControlbarButton("play"); hideControlbarButton("pause"); 

For this, you will need the right libraries. Then you will also need to reference SWF in the jwplayer options.

Answer 7

I achieved this by adding "icons: false" to the config. However, the JWplayer API description suggests adding "controls: false", so try this. Here is a working example: http://www.longtailvideo.com/support/jw-player/29241/a-chromeless-player/

Answer 8

For JW Player v6 - HTML5 player:

You can hide the play button in the center of the screen using CSS:

 .jwplayer .jwdisplayIcon { display: none !important; } 

Or, to hide the play button on the control panel:

 .jwplay { display: none; } 

Answer 9

This is probably pretty easy to do with the skin. You can modify an existing skin loaded from longtail. These are just zip files.

Here's the documentation: http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins

Basically, you just delete "playIcon.png" from the zip file in the "display" directory. It simply will not show the icon, because it does not exist!

You may also have to remove "background.png" - or you just get an empty square.

Answer 10

Here is the situation I encountered:

The idea is to completely turn off the controls, and then turn them back on when you click on the user.

  var jwHandle = jwplayer(videoID).setup(videoConfig);//Set b/c of internal reasons //Then when configuring autoplay : "false", controls : "false", //disable the controls(including play icon) events : { onDisplayClick : function(event){ //re-enable controls jwHandle.setControls(true); //play the video jwHandle.play(); } } }); 

Using version 6.10. The other answers above did not work for me, probably due to changes in the version. The only other way I found is to change the skin.xml game icon to a transparent image, but the more related process is more suited to the hack side.