Flowplayer-Skin

SOURCE URL: https://flowplayer.org/docs/skinning.html

Skinning with CSS3

Flowplayer skin design is CSS3. There are 4 approaches

1. use the default skins with modifier classes
2. override default skins with your own CSS
3. clone our default skins and edit them. Our skin repository is in github
4. write a skin from scratch

Typically you use the combination of 1 and 2.

Default skins

• Minimalist //releases.flowplayer.org/5.4.6/skin/minimalist.css
• Functional //releases.flowplayer.org/5.4.6/skin/functional.css
• Playful //releases.flowplayer.org/5.4.6/skin/playful.css

They look like this. To use a skin you can

1. Download it and put it on your servers. Perhaps combine with other CSS files
2. Reference it directly using the CDN URLs (Amazon CloudFront) shown above

We also provide a combined version with all skins. You can switch the skin with a CSS class name

<div class="flowplayer functional">
   <video>
      <source type="video/webm" src="http://mydomain.com/my/video.webm">
      <source type="video/mp4"  src="http://mydomain.com/my/video.mp4">
   </video>
</div>

This combined file is obviously a larger download so it's recommended to pick the one you like.

The default skins use node.js based Stylus to make CSS easier. Go ahead and play with the skins and please contact us if you have a good idea for a new skin! Check our email addresses from Github.

Right to left support

v5.4 Flowplayer inherently supports right-to-left layouts. On pages which have set RTL direction globally:

body {
   direction: rtl;
}

Flowplayer will automatically do the right thing and become a right to left video player.

Of course you can also set up Flowplayer in the opposite direction of the body. The following CSS directives will result in left to right players on a right to left page:

body {
   direction: rtl;
}
.flowplayer {
   direction: ltr;
}

Modifier classes

Modifier classes are a simple way to alter the looks and/or behaviour of a skin. For example:

<div class="fixed-controls color-alt no-background">
   <video>
      <source type="video/webm" src="http://mydomain.com/my/video.webm">
      <source type="video/mp4"  src="http://mydomain.com/my/video.mp4">
   </video>
</div>

• fixed-controls controlbar is statically placed below the video. no mouseover effect
• aside-time times will be placed on top/left corner instead of the controlbar
• color-alt alternate coloring
• color-alt2 alternate coloring #2
• color-light uses a dark controlbar. Optimal for light videos
• no-background no background color
• no-hover forces all UI elements to be visible ignoring the mouseover event
• no-mute v5.2 hides the mute control
• no-time v5.1 hides the time display, duration or remaining
• no-volume v5.1 hides the volume control
• play-button v5.3 display play button on the controlbar

You can see these modifier classes in action on our test suite.

Note: individual elements can be removed from a player with simple display: none setting. For example, to disable embedding you can do:

.fp-embed {
   display: none
}

States

The player can be in various states during playback, and for each state there is a CSS class name which is added or removed according to the current state. For example:

<div class="is-ready is-paused">
   <video>
      <source type="video/webm" src="http://mydomain.com/my/video.webm">
   </video>
</div>

As you can specify CSS directives for these states you gain a powerful tool to skin the player and the descendant elements dynamically during the lifetime of a player. Most of our demos are just CSS "programming". This is where Flowplayer excels as a truly HTML-based video player: concept and design evolve smoothly from the core structure of the underlying markup language.

These classes are in use no matter whether you are using a default or custom skin. By convention all state class names start with an "is-" prefix.

• is-closeable a close/unload button replaces the fullscreen toggler
• is-disabled after the disabled() method was called
• is-embedded while the player is embedded at an external site
• is-embedding while the embedding dialog is visible
• is-error after a player error has occured
• is-finished v5.1 after playback has finished - view demo
• is-flash while the Flash engine is in use and the OBJECT tag is present
• is-fullscreen while the player is in fullscreen mode; native or not
• is-help v5.1 while the help overlay is displayed
• is-html5 while the HTML5 video engine is in use
• is-live v5.4.4 when the player is set up to play a live stream (experimental)
• is-long v5.3 when the video duration exceeds than 1 hour
• is-loading while the video is initially loading
• is-mouseout while the controls are hidden - unless the "fixed-controls" modifier class is applied
• is-mouseover while the controls are shown
• is-muted while the player is muted
• is-paused while the player is paused
• is-playing while the player is playing
• is-poster while the player is in poster state
• is-ready once player and video are completely loaded
• is-seeking while the player is seeking
• is-splash while the splash screen is visible and awaits a click
• is-touch v5.4 when the device supports touch controls

CSS programming example

Let's assume you do not want to show the minimal timeline below the player while the mouse is outside the player area. You could achieve this with JavaScript in a global api instruction:

flowplayer(function (api, root) {
   root.hover(function () {
      $(".fp-timeline", root).css({
         height: /enter/.test(e.type) ? 10 : 0
      });
   });
});

Or you can simply tweak the CSS height directive for the timeline in the is-mouseout state class from 4px to 0:

.flowplayer.is-mouseout .fp-timeline {
   height: 0;
}

View the demo.

Configurable states

The following of the above state classes can be specified by the user at installation time in the same way as modifier classes. Accordingly they also affect the player behaviour and user experience. They work like configuration options, and indeed adding the is-splash class to the container element has the same effect as setting splash: true in the JavaScript configuration.

• is-closeable the player can be unloaded via a close button - fullscreen mode can only be toggled via the "f" keyboard shortcut
• is-live v5.4.4 tells the player that it will play back a live stream, controls specific to video on demand are not shown; JavaScript alternative: live option - view demo
• is-splash enforces a splash setup; JavaScript alternative: splash option
• is-mouseover makes the UI elements initially visible

HTML layout

Here is the HTML layout rendered by the player. All elements inside the root are prefixed with "fp-" to avoid name collisions

<!-- player root -->
<div class="flowplayer">

   <!--
      A magic element that specifies the aspect ratio on different screen sizes
      http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
   -->
   <div class="fp-ratio" style="padding-top:41.7%"></div>

   <!-- video or object tag depending on browser support (here it's just DIV) -->
   <div class="fp-engine"></div>

   <!-- user interface -->
   <div class="fp-ui">

      <!-- progress indicator -->
      <div class="fp-waiting"><em></em><em></em><em></em></div>

      <!-- buttons -->
      <a class="fp-fullscreen"></a>
      <a class="fp-unload"></a>

      <!-- timeline and volume. nested inside controls -->
      <div class="fp-controls">

         <!-- play button disabled by default, enable with play-button modifier class -->
         <a class="fp-play"></a>

         <div class="fp-timeline">
            <div class="fp-buffer" style="width: 70%;"></div>
            <div class="fp-progress" style="width: 35%;"><em></em></div>
         </div>

         <div class="fp-volume">
            <a class="fp-mute"></a>
            <div class="fp-volumeslider">
               <div class="fp-volumelevel" style="width: 50%;"><em></em></div>
            </div>
         </div>

      </div>

      <!-- time -->
      <div class="fp-time">
         <em class="fp-elapsed">00:00</em>
         <em class="fp-remaining">-00:44</em>
         <em class="fp-duration">01:44</em>
      </div>

      <!-- error message -->
      <div class="fp-message">
         <h2>Invalid URL</h2>
         <p>http://invalid.url/com/my-video.mp4</p>
      </div>

      <!-- embedding -->
      <a class="fp-embed" title="Copy to your site"></a>

      <div class="fp-embed-code">
         <label>Paste this HTML code to your site.</label>
         <textarea>
            <!-- actual content on textarea -->
            <script src="//releases.flowplayer.org/5.4.6/embed.js">...</script>
         </textarea>
      </div>

   </div>

   <!-- help overlay -->
   <div class="fp-help">
      <a class="fp-close"></a>
      <div class="fp-help-section fp-help-basics">
         <p><em>space</em>play / pause</p>
         <p><em>esc</em>stop</p>
         <p><em>f</em>fullscreen</p>
         <p><em>shift</em> + <em>←</em><em>→</em>slower / faster</p>
      </div>
      <div class="fp-help-section">
         <p><em>↑</em><em>↓</em>volume</p>
         <p><em>m</em>mute</p>
      </div>
      <div class="fp-help-section">
         <p><em>←</em><em>→</em>seek</p>
         <p><em>&nbsp;. </em>seek to previous
         </p><p><em>1</em><em>2</em>&hellip;<em>6</em> seek to 10%, 20%, &hellip;60% </p>
      </div>
   </div>

   <!-- logo (hidden logic in javascript / flash) -->
   <a class="fp-logo" href="http://flowplayer.org" target="_top">
      <img src="//d32wqyuo10o653.cloudfront.net/logo.png" />
   </a>

   <!-- subtitles -->
   <div class="fp-subtitle">
      <p>This is the first line</p><br/>
      <p>And the second one.</p>
   </div>

   <!-- any custom HTML goes here -->

</div>

Whether you are using the default skins or building your own from scratch Flowplayer skinning is all about writing CSS for the layout shown above and taking advantage of the modifier classes and player states.

When "fp-time" element is clicked a "is-inverted" class name is toggled on that element. With the default skins this is used to toggle visibility between "fp-duration" and "fp-remaining" elements.

Custom UI elements

You can add your own UI elements to the player area. To be operational - e.g. clickable - they must be stacked on top of the Flowplayer UI in the z-axis. As the Flowplayer UI has a z-index of 1 you have to pass a z-index CSS directive of at least 2 to those elements. This also applies to added elements interfacing existing Flowplayer functionality or extensions. For instance you can display the 'previous' and 'next' playlist controls in the player area like in this demo.

Similarly any interactive overlayed element must be stacked on top accordingly, for instance if cuepoints should be clickable links as shown here.

Context menu

v5.4.4 For commercial setups, a custom context menu can be added by inserting the following html inside the player container:

<div class="fp-context-menu">
  <ul>
    <li><a href="#">First menu item</a></li>
    <li><a href="#">Second menu item</a></li>
  </ul>
</div>

An example of this customization is shown in the complete commercial setup demo.