Solved

Flowplayer - Show controlbar before clip plays (always on)

Posted on 2013-06-16
9
1,823 Views
Last Modified: 2013-06-23
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!
0
Comment
Question by:Danzigger
  • 5
  • 4
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39252119
It may depend on the version but it will be done in your jquery set up.  Set enabled to false.

http://flash.flowplayer.org/plugins/flash/controlbar.html#autohide
0
 

Author Comment

by:Danzigger
ID: 39254955
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.
0
 

Author Comment

by:Danzigger
ID: 39255140
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?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39255306
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.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:Danzigger
ID: 39255491
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39255499
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.
0
 

Author Comment

by:Danzigger
ID: 39264922
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.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39264978
That was a good puzzle.  This should be what you want http://jsbin.com/ofoqaw/6/edit

The main trick was modifying a class and putting it as the last bit of css.  I have it in <style> tags but you could put in in external style sheet as well.  

For future, when you make a sample like you did for jsbin, just put only the portion you need, take out anything that is not needed for the purpose of the sample.  I took most extra code out. Doing this will make it easier for us.

       .minimalist.fixed-controls .fp-controls {
         bottom: -20px; display:block!important;
}

Open in new window


<!doctype html>
  
<html class="no-js" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
   <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Skins</title>
   <link rel="shortcut icon" href="http://flowplayer.org/favicon.ico" type="image/x-icon" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="http://flowplayer.org/media/js/base.js"></script>
   <link rel="stylesheet" href="http://flowplayer.org/media/css/myriad.css">
   <link rel="stylesheet" href="http://flowplayer.org/media/css/index.css?g">
   <link rel="stylesheet" href="//releases.flowplayer.org/5.4.2/skin/all-skins.css?b">
   <!--[if lt IE 8]>
      <link rel="stylesheet" href="/media/css/ie.css">
   <![endif]-->
   <link rel="stylesheet" href="/media/css/demos/index.css">
   <script src="//releases.flowplayer.org/5.4.2/flowplayer.min.js?c">
   </script>
     
     <style>
       .minimalist.fixed-controls .fp-controls {
         bottom: -20px; display:block!important;
}
       
  
       
     </style>
   </head>

   <body id="skinning" class="demos topbar">

<div id="content"> 
     
     <!-- minimalist -->
     <div class="skin" id="minimalist">
    <hgroup class="title">
         <h1>Minimalist </h1>
         <h2>Graphic. Powerful. Focused.</h2>
       </hgroup>
    <div data-ratio="0.417" class="flowplayer play-button minimalist fixed-controls my_poster">
         <video 
          poster="http://www.danceyrselfclean.com/wp-content/uploads/2012/09/Sleigh-Bells-End-Of-The-Line-Video-982x410.jpg"
          >
        <source type="video/webm"  src="http://stream.flowplayer.org/bauhaus/624x260.webm">
        <source type="video/mp4"   src="http://stream.flowplayer.org/bauhaus/624x260.mp4">
        <source type="video/ogg"   src="http://stream.flowplayer.org/bauhaus/624x260.ogv">
        <source type="video/flash" src="mp4:bauhaus/624x260.mp4">
      </video>
       </div>
    <div>
         <p> Clip title here gets covered up by controlbar when clip plays...</p>
         <p>Clip title lower down doesn't get covered by controlbar but is too far below player window before controlbar appears 
        Need the controlbar to be present at page load when poster image is displayed. </p>
       </div>
  </div>
   
   </div>

</body>
</html>

Open in new window

0
 

Author Comment

by:Danzigger
ID: 39270122
Ahhh, beautiful - thanks so much!!  Works perfectly.

Point noted about extraneous content on Jsbin - thanks.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now