Danzigger
asked on
Flowplayer - Show controlbar before clip plays (always on)
Hi
I'm using Flowplayer and I'd like the controlbar to be on at all times, including before the clip is played. Currently I'm using <div class="flowplayer play-button minimalist fixed-controls" data-engine="flash"> where "fixed-controls" causes the controlbar to stay in place while the clip is playing but it still doesn't display until the clip is started. I would like the controlbar to display from when the page loads.
I've tried overriding the .fp-controls css class in my own css like this...:
.fp-controls{
display: block !important;
}
...but I suspect the Flowplayer javascript is overriding it because the controlbar displays for a moment when the page loads and then disappears until the clip is played.
So, how can I make the controlbar be displayed from when the page loads and stay on at all times?
Thanks!
I'm using Flowplayer and I'd like the controlbar to be on at all times, including before the clip is played. Currently I'm using <div class="flowplayer play-button minimalist fixed-controls" data-engine="flash"> where "fixed-controls" causes the controlbar to stay in place while the clip is playing but it still doesn't display until the clip is started. I would like the controlbar to display from when the page loads.
I've tried overriding the .fp-controls css class in my own css like this...:
.fp-controls{
display: block !important;
}
...but I suspect the Flowplayer javascript is overriding it because the controlbar displays for a moment when the page loads and then disappears until the clip is played.
So, how can I make the controlbar be displayed from when the page loads and stay on at all times?
Thanks!
ASKER
Hi
I have tried those options but they don't seem to work.
Here's what I have:
<script>
flowplayer.conf = {
embed: false,
plugins: {
controls: {
autohide: false
}
}
};
</script>
The "embed: false" works - the embed link is hidden. But the controlbar still gets hidden. Is there something wrong with the syntax?
As an aside, I'm using the html5 Flowplayer but set to default to Flash format where available, right? I'm not actually using Flowplayer Flash, or am I?!? It's a bit confusing as to whether the Flowplayer Flash docs also apply to html5 Flowplayer and vice versa.
I have tried those options but they don't seem to work.
Here's what I have:
<script>
flowplayer.conf = {
embed: false,
plugins: {
controls: {
autohide: false
}
}
};
</script>
The "embed: false" works - the embed link is hidden. But the controlbar still gets hidden. Is there something wrong with the syntax?
As an aside, I'm using the html5 Flowplayer but set to default to Flash format where available, right? I'm not actually using Flowplayer Flash, or am I?!? It's a bit confusing as to whether the Flowplayer Flash docs also apply to html5 Flowplayer and vice versa.
ASKER
I just found that it's the poster image that causes the controlbar to hide. If I don't use a poster image for the clip then the controlbar is on at page load due to the "fixed-controls" value.
How do I get the controlbar to display while the poster image is displayed?
How do I get the controlbar to display while the poster image is displayed?
You don't put the control bar over the poster image. Instead, there is a giant universal "play" button. See the demo http://flowplayer.org/demos/.
You could create a fake control bar on your poster image in photoshop/image software. Most people wouldn't know the difference. But I think it will look better with just the poster image.
You could create a fake control bar on your poster image in photoshop/image software. Most people wouldn't know the difference. But I think it will look better with just the poster image.
ASKER
The reason for wanting the controlbar in place before the clip plays is this: I have the controlbar displaying underneath the clip and below that is the title of the clip. When the controlbar isn't there the title looks too far down.
So what I really want is the controlbar displaying under the poster image, just as it displays under the clip during playback.
So what I really want is the controlbar displaying under the poster image, just as it displays under the clip during playback.
You will need to post a link to your page. Or recreate in jsbin. Here is a sample http://jsbin.com/ofoqaw/1/edit you can use to replace with your own code.
ASKER
Thanks Padas. Hopefully you can see what I mean here: http://jsbin.com/ofoqaw/4/edit
If I can get the controlbar to be on when the poster image is displayed then that will solve my issue.
If I can get the controlbar to be on when the poster image is displayed then that will solve my issue.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ahhh, beautiful - thanks so much!! Works perfectly.
Point noted about extraneous content on Jsbin - thanks.
Point noted about extraneous content on Jsbin - thanks.
http://flash.flowplayer.org/plugins/flash/controlbar.html#autohide