How to hide the JWPlayer play button?
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 ... 开发者_JAVA百科?
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.
You are looking for the "display" plugin. Hide as needed.
jwplayer().getPlugin("display").hide();
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.
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'
});
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;
}
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.
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.
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/
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.
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".
精彩评论