Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Hide Control Bar until Mouse Over

Hi to anyone that might be able to help (Although it may be a bit too close to Christmas for this...)

I've been using the &controlBar=none to clean up my page as there are a few videos shown at the same time and having the control bar always on makes it look messy.
Problem is, i don't want to remove the user's ability to scan or mute. I would use the 'overlay' feature instead, but this puts the control bar on the player by default when it loads, which doesn't do any favours to the look of my page.

Is there a simple way to make the control bar hidden at all times except for when the user mouses over the player?

I'm not worried that the user won't be aware of the controllability available to them in the first instance, because as soon as they move their mouse over the player in order to click on the preview image to play the video, the control bar will display.

Looking forward to any help offered.
Cheers, Carl.

37 Community Answers

Up Down

JW Player

User  
0 rated :

maybe you can do something like this - *http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_2-2-1-0.html
http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_2-2-2-0.html*
but hiding the controlbar instead of the playlist...

for more copy/paste examples please see -
*http://www.longtailvideo.com/support/tutorials/Javascript-API-Examples*

please note that the examples uses swfobject v.2.1 - *http://code.google.com/p/swfobject/*

Up Down

JW Player

User  
0 rated :

Did you ever manage to do this Carl? I'm interested in a simple, validating solution for doing the same thing.

Up Down

JW Player

User  
0 rated :

I'd also like a solution for this. The controlbar=over option would be perfect if the control wouldn't display on first load, but only showed up when the mouseover actually happens.

Up Down

JW Player

User  
0 rated :

I aggree Chad... a controlbar=over option would be the best!

I'm working on the same issue at the moment.

Up Down

JW Player

User  
0 rated :

I am looking for the same feature for months!

Up Down

JW Player

User  
0 rated :

me too

Up Down

JW Player

User  
0 rated :

Me too! C'mon, someone must have a solution for this.

Up Down

JW Player

User  
0 rated :

No solution, yet? @Longtail-support: this is a must-have for modern flash-players: could you provide solution/workaround/best-practice please? cannot use it for a corporate site until this issue is solved.

thanks in advance!

Up Down

JW Player

User  
0 rated :

Yes, highly requested feature!!! Hide controlset until mouseover, then pop it up for a certain period of times.

Maybe making the 'controlbar' variable take a 'mouseover' parameter would make it work....

Up Down

JW Player

User  
0 rated :

When using a easy to use (Handicaped customers) control skin, it becomes even more needed, as the controls takes up a lot of the focus from the picture.

Easier control over theplayer button would be nice. E.g. just refer to an external image file, that will give easy control...

Up Down

JW Player

User  
0 rated :

I am looking for the same solution.

Up Down

JW Player

User  
0 rated :

Any news on this feature ?

Up Down

JW Player

User  
0 rated :

I'm looking for a solution for this too. Has anyone come up with a workaround?

Up Down

JW Player

User  
0 rated :

Hello!

Below is just an idea, although it is a working code. I hope somebody will realize it better ... works slowly )
bc.. *<div id='videospace' onmouseover='hideVideoControl();' onmouseout='hideVideoControl();'>
Download Adobe Player to view a content
</div>
<script type="text/javascript" src="swfobject.js"></script>
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','720','405','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','window');
so.addVariable('file','yourvide?filehere.flv');
so.addVariable('image','yourpreviewfilehere.jpg');
so.addVariable('icons','true');
so.addVariable('dock','true');
so.addVariable('controlbar','none');
so.write('videospace');

var controlVisible = false;

function hideVideoControl() {
if(controlVisible) {
so.addVariable('controlbar','none');
so.write('videospace');
controlVisible = false;
}
}

function showVideoControl() {
if(!controlVisible) {
so.addVariable('controlbar','over');
so.write('videospace');
controlVisible = true;
}
}
</script> *

Up Down

JW Player

User  
0 rated :

Still no official solution? I'm really looking forward to this feature.

Up Down

JW Player

User  
0 rated :

I too am requesting a solution to this.

Up Down

JW Player

User  
0 rated :

I'm also requesting a solution for this.

Up Down

JW Player

User  
0 rated :

Why on earth hasnt this been sorted yet? My clients specifically request this which stops me buying and using the pro version ...

Up Down

JW Player

User  
0 rated :

Just bone up and buy the more expensive FlowPlayer.

This is too long for these guys to react and is, essentially built into all other players...

Up Down

Pablo

JW Player Support Agent  
0 rated :

Hi, all. Just to let you know, this feature is on the roadmap, and will be addressed in a future release of the JW Player. You can keep track of its progress here:

http://developer.longtailvideo.com/trac/ticket/883

Up Down

JW Player

User  
0 rated :

So this seems to be part of the player now, but I can't figure out how to get it working. I'm using the JW Player 5 for Flash & HTML5 with the default skin, embedding with the JW Embedder. I'm trying to add it in the setup code like so:

bc.. jwplayer('video-player').setup({
'id': 'playerID',
'width': '470',
'height': '264',
'image': '/images/video-thumb.gif',
'file': 'video.mp4',
'provider': 'rtmp',
'streamer': 'rtmp://someID123723.cloudfront.net/cfx/st',
'controlbar.idlehide': true,
'modes': [
{type: 'flash', src: '/scripts/jwplayer/player.swf'},
{
type: 'html5',
config: {
'file': 'http://s3.amazonaws.com/someID/video-mobile.mp4',
'provider': 'video'
}
}
]
});


But that seems to set the controlbar to be permanently shown, and under the video instead of over it. Any idea what I'm doing wrong?

Thanks for any help!

Up Down

JW Player

User  
0 rated :

@Frank

Would not adding the following solve your issue

'controlbar':'over',

Up Down

JW Player

User  
0 rated :

Aha - yes that's done it! I'd assumed that because the skin was "over" by default, I wouldn't need to specify that.

Thanks so much!

Up Down

JW Player

User  
0 rated :

@Frank

Hi Frank, In the end what was the solution to make this work? Can you post a link to the final outcome?

Thanks so much.

Up Down

JW Player

User  
0 rated :

@Frank

PS: Here is the code I currently use. Can I accomplish hiding the control bar adding another line to this code?

<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','454','239','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','housing_061411.flv');
so.addVariable('captions.file', 'housing_061411.srt');
so.addVariable('image','thumbs/housing_061411.jpg');
so.addVariable('backcolor','446aac');
so.addVariable('frontcolor','ffffff');
so.addVariable('lightcolor','446aac');
so.addVariable('screencolor','ffffff');
so.addVariable('skin','stijl.zip');
so.addVariable('controlbar','over');
so.addVariable('autostart','false');
so.addVariable('stretching','fill');
so.write('mediaspace');
</script>

Up Down

JW Player

User  
0 rated :

Ha. Just got it!

Here's what worked for me:

so.addVariable('controlbar.idlehide','true');

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you got it!

Up Down

JW Player

User  
0 rated :

Hi, in this setup
<script type="text/javascript">
var so = new SWFObject('jw_player/player.swf','mpl','610','480','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file', 'http://www.myste/aaa.flv');
so.addVariable('autostart','true');
so.write('mediaspace');
</script>
which is the parameter for have the controlbar only with mouseover.
When yhou start the video the controlbar is present for any seconds, after is hidden and with mouseover I can see it.
Thanks, but I have prblem for language and for code.
Arcibald

Up Down

Ethan Feldman

JW Player Support Agent  
1 rated :

Under:

so.addVariable(‘autostart’,‘true’);

Add:

so.addVariable(‘controlbar’,‘over’);
so.addVariable(‘controlbar.idlehide’,‘true’);

Up Down

JW Player

User  
0 rated :

Hi Etahn,
very well done; it wworks perfectly.
Much thanks and regards from Italy.

Arcibald

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

Up Down

JW Player

User  
0 rated :

Is there any way to do this from inside a player skin XML?

Up Down

JW Player

User  
0 rated :

cancel above question. Figured out how to do via the BOTR player configuration.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

ok!

Up Down

JW Player

User  
0 rated :

(function(jwplayer){

var template = function(player, config, div) {

function setup(evt) {
div.style.color = 'red';
div.innerHTML = div.innerHTML + "<img style='margin-top:35px; margin-left:60px;' src='" + config.text +"' onclick='jwplayer().playlistPrev();' onMouseOver='change_img(1);'>";
div.innerHTML = div.innerHTML + "<img style='margin-left:15px;' src='" + config.text2 +"' onclick='jwplayer().play();' onMouseOver='change_img(2);'>";
div.innerHTML = div.innerHTML + "<img style='margin-left:15px;' src='" + config.text1 +"' onclick='jwplayer().playlistNext();' onMouseOver='change_img(3);'>";
};
function change(val){
div.style.color = 'green';
div.innerHTML = config.text;
};
player.onReady(setup);
this.resize = function(width, height) {};
};
jwplayer().registerPlugin('helloworld', template);
})(jwplayer);

Up Down

JW Player

User  
0 rated :

nice work

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

That is awesome.

This question has received the maximum number of answers.