How to hide the JWPlayer play button?

Question

How can I hide the play button that's in the center of the video screen in JW Player?

I'm using version 5.4 of the player and I am embedding it using their own 'JW Embedder' technique.

I've tried the following with no luck:

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

I've read somewhere that this may have been removed with version 5.0 and must now be done with a skin. But, I also read that it returned in version 5.1 ... ?

Hireling

What finally worked? – Bengt

Ha! Nothing. Four years later and I found my own question while Googling how to do this. Shameful. – Hireling

you can use enter link description here – Visional

Answer 1

I came acros the same problem and the solution was to set:

'controlbar': "none"

Also, I'm using JW Player 5.5.

Ley me know if it worked out.

Burton

Thanks, Alott, when i put controls: false means even play icon also hiding, on click of video, video not playing, issue solved i need to hide controlbar – Zamir

Answer 2

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

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

Fleeman

Answer 3

Add this to your onPause and maybe to your onReady event if you are not using autoplay:

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

so it looks like this:

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

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

Check the Plugins section.

Tatar

Your reference link is broken. – Bengt

Answer 4

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

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

Mcginley

Answer 5

For JW Player v6 - HTML5 player:

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

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

Or to hide the play button in control bar:

.jwplay {
    display: none;
}

Bengt

Answer 6

It seems to be that the 'icons: false' option does work, but not with the HTML 5 version of the player. Hopefully they'll get this taken care of with any versions later than JW 5.4.

Hireling

Answer 7

You can write a flash plugin using the Flex SDK. I have written 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 by inheriting from this class.

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

If you wanted to hide the play and pause buttons for example you would do the following:

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

You will need the correct library imports for this as well. You will then also need to reference the SWF in the jwplayer parameters.

Bowyer

Answer 8

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

Gabelle

Setting jwplayer("myPlayer").setup({"controls": false}); worked for me on HTML5 and Flash player to remove the centered play button on pause. However it also removed the control bar. :( – Bengt

Answer 9

It's probably quite easy to do with a skin. You can modify an existing skin downloaded from longtail. They're just zip files

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

Basically you'd just delete the 'playIcon.png' from the skin zip file in the 'display' directory. It will just not show the icon then - because it doesn't exist!

You'll probably have to delete 'background.png' also - or you'll just get a blank square.

Dulcle

...but they may have improved it by now to be a setup property – Dulcle

Answer 10

Here is the situation I came up with:

The idea is to disable the controls completely then re-enable them when on user click.

        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. Other answers above did not work for me, probably because of version changes. The only other way I found is to change a skin.xml play icon to a transparent image however more involved process and falls more towards side of "hacking".

Rootless