End screen

What next? - Give an answer

Flowplayer

The HTML5 video player for the web

Get the new version replay video
Lead your audience to related topics on your site by presenting an end screen once they have enjoyed your video. With Flowplayer end screens are completely customizable and require no scripting. Just make use of the is-finished CSS state class to make it appear.
show CSS code
#endscreen .when-video-ends {
/* position end screen outside player area */
position: absolute;
left: -9999em;
top: 20%;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
text-align: center;
width: 100%;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
#endscreen .when-video-ends h3 {
font-size: 60px;
font-weight: bold;
margin-bottom: -10px;
color: #ccc;
}
#endscreen .when-video-ends h4 {
font-size: 25px;
color: #777;
}
#endscreen .when-video-ends .button {
background-color: #00a6bc;
padding: 20px 30px;
margin: 15px 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
font-size: 20px;
color: #eee;
cursor: pointer;
display: inline-block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#endscreen .when-video-ends .button:hover {
background-color: #00afc6;
}
#endscreen .when-video-ends .button:active {
background-color: #009db2;
}
#endscreen .when-video-ends .fp-toggle {
display: block;
color: #777;
font-size: smaller;
cursor: pointer;
}
#endscreen .when-video-ends .fp-toggle:hover {
color: #444;
}
#endscreen {
background: url("//flowplayer.org/media/img/demos/black_big.jpg");
}
#endscreen.is-finished {
background: #333;
-webkit-transition: background-color 0.7s;
-moz-transition: background-color 0.7s;
transition: background-color 0.7s;
}
#endscreen.is-finished .fp-ui,
#endscreen.is-finished .fp-engine {
/* Flash-save way to hide the engine */
top: -9999em;
}
#endscreen.is-finished .when-video-ends {
/* position end screen inside player area */
left: 0;
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

CSS
show HTML code
<div id="endscreen" class="flowplayer no-volume"
data-aspect-ratio="47:25"
data-splash="true">
<video>
<source type="video/webm"
src="//edge.flowplayer.org/black/470x250.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/black/470x250.mp4">
<source type="video/flash"
src="mp4:black/470x250"></video>
 
<div class="when-video-ends">
<h3>Flowplayer</h3>
<h4>The <em>HTML5</em> video player for the web</h4>
 
<a class="button" href="/pricing/player.html">Get the new version</a>
 
<!-- an element with class "fp-toggle" automatically works as a replay button -->
<a class="fp-toggle">replay video</a>
</div>
 
</div>

HTML

view standalone page | alternative version with overlayed screen

More info

Show details during playback

Helsinki railway station Sunday 8:30 AM 10:09 AM from Malminkartano 12:15 AM to Riihimäki 11:25 AM from Kerava 2:55 PM to St. Petersburg 5:25 PM from Vaasa
Here we set some cuepoints for the player. These are pre-defined points in time during playback. Every time a cuepoint is fired an indexed CSS class name is assigned and you can do your thing. This is our thing.
show CSS code
#timeline_info .info {
background-color: #333;
background-color: rgba(0,0,0,0.75);
position: absolute;
top: 50px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
z-index: 11;
padding: 15px;
color: #eee;
font-weight: bold;
font-size: 16px;
}
#timeline_info.cue0 .info0 {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 50px;
}
#timeline_info.cue1 .info1 {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 80px;
}
#timeline_info.cue2 .info2 {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 110px;
}
#timeline_info.cue3 .info3 {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 140px;
}
#timeline_info.cue4 .info4 {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 170px;
}
#timeline_info.cue5 .info5 {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 200px;
}
#timeline_info.cue6 .info6 {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 230px;
}

CSS
show HTML code
<div id="timeline_info"
class="flowplayer"
data-cuepoints="[0.5, 4, 8, 12, 14, 16, 20]"
data-hls-qualities="[-1,1,3,6,7]"
data-ratio="0.5625">
 
<video>
<source type="application/x-mpegurl"
src="//edge.flowplayer.org/trains.m3u8">
<source type="video/mp4"
src="//edge.flowplayer.org/trains.mp4">
</video>
 
<span class="info info0">Helsinki railway station</span>
<span class="info info1">Sunday 8:30 AM</span>
<span class="info info2">10:09 AM from Malminkartano</span>
<span class="info info3">12:15 AM to Riihimäki</span>
<span class="info info4">11:25 AM from Kerava</span>
<span class="info info5">2:55 PM to St. Petersburg</span>
<span class="info info6">5:25 PM from Vaasa</span>
 
</div>

HTML

view standalone page | alternative version with clickable cues

Video art

Layer video over changing background

Here cuepoints change the background image. Here is the CSS code.
show CSS code
#art.flowplayer .fp-ui,
#art.flowplayer .fp-engine {
/* make the player elements smaller */
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
#art.flowplayer .fp-engine {
/* little opacity to the video or object tag */
opacity: 0.6;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}
#art.flowplayer .fp-player {
background: url("//flowplayer.org/media/img/demos/timeline/art5.jpg") 0 -20px;
-webkit-transition: all 3s;
-moz-transition: all 3s;
transition: all 3s;
}
#art.flowplayer.cue0 .fp-player {
/* switch background image based on cuepoint */
background: url("//flowplayer.org/media/img/demos/timeline/art7.jpg") -20px -70px;
}
#art.flowplayer.cue1 .fp-player {
background: url("//flowplayer.org/media/img/demos/timeline/art2.jpg") -10px -20px;
}
#art.flowplayer.cue2 .fp-player {
background: url("//flowplayer.org/media/img/demos/timeline/art3.jpg") -10px 0;
}
#art.flowplayer.cue3 .fp-player {
background: url("//flowplayer.org/media/img/demos/timeline/art4.jpg") 20px 20px;
}
#art.flowplayer.cue4 .fp-player {
background: url("//flowplayer.org/media/img/demos/timeline/art6.jpg") -50px -50px;
}

CSS
show HTML code
<div id="art" class="flowplayer is-splash no-volume"
data-cuepoints="[0.5, 3, 6, 9, 12]" data-ratio="0.5625" data-share="false">
<video data-title="Video Art">
<source type="video/webm"
src="//edge.flowplayer.org/art/640x360.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/art/640x360.mp4">
<source type="video/flash"
src="mp4:art/640x360"></video>
</div>

HTML

view standalone page

Thumbs

Generated and visible cuepoints

Here cuepoints are automatically generated and styled with CSS.
show CSS code
#thumbs {
overflow: visible;
}
#thumbs .fp-ratio {
padding-top: 41.67%;
}
#thumbs .fp-cuepoint {
display: inline-block;
cursor: pointer;
position: absolute;
width: 8%;
padding-top: 8%;
background-color: #333;
margin-left: -4%;
top: 30px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#thumbs .fp-cuepoint0 {
background-image: url("//flowplayer.org/media/img/demos/timeline/playful1.jpg");
}
#thumbs .fp-cuepoint1 {
background-image: url("//flowplayer.org/media/img/demos/timeline/playful2.jpg");
}
#thumbs .fp-cuepoint2 {
background-image: url("//flowplayer.org/media/img/demos/timeline/playful4.jpg");
}
#thumbs .fp-cuepoint3 {
background-image: url("//flowplayer.org/media/img/demos/timeline/playful6.jpg");
}
#thumbs .fp-cuepoint4 {
background-image: url("//flowplayer.org/media/img/demos/timeline/playful7.jpg");
}
#thumbs .fp-cuepoint5 {
background-image: url("//flowplayer.org/media/img/demos/timeline/playful8.jpg");
}

CSS
show HTML code
<div id="thumbs" class="flowplayer" data-ratio="false"
data-cuepoints="[5.5, 12, 17.5, 23.7, 27, 30.5]" data-generate_cuepoints="true">
 
<video>
<source type="application/x-mpegurl"
src="//edge.flowplayer.org/playful.m3u8">
<source type="video/mp4"
src="//edge.flowplayer.org/playful.mp4">
</video>
 
</div>

HTML

view standalone page | variant with manually configured cuepoints

Timeline demo source

Copy the code below to obtain your own standalone demo.

<!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>Timeline</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
                <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    
    <script src="/media/js/base.js"></script>

       <link rel="stylesheet" href="/media/css/myriad.css">
   <link rel="stylesheet" href="/media/font/flowplayerlibraryregular/stylesheet.css">
   <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="/media/css/index.4841b4a.css">
      <link rel="stylesheet" href="https://releases.flowplayer.org/7.2.6/skin/skin.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="https://releases.flowplayer.org/7.2.6/flowplayer.min.js?c">
   </script>

<script>
$(function () {
  if ($("#facebook-wrap").length) {
    $("body").prepend($("<div/>", {id: "fb-root"}));
    $.getScript("//connect.facebook.net/en_US/sdk.js", function () {
      FB.init({
        appId: "491716327514547",
        xfbml: true,
        version: 'v2.4'
      });
    });
  }
});
</script>
<script src="https://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

</head>

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

            <div id="content">

                
                <hgroup class="title" id="endscreen-demo">
   <h1>End screen</h1>
   <h2>What next? - Give an answer</h2>
</hgroup>

<div id="endscreen" class="flowplayer no-volume"
     data-aspect-ratio="47:25"
     data-splash="true">
   <video>
      <source type="video/webm"
              src="https://edge.flowplayer.org/black/470x250.webm">
      <source type="video/mp4"
              src="https://edge.flowplayer.org/black/470x250.mp4">
      <source type="video/flash"
              src="mp4:black/470x250"></video>

   <div class="when-video-ends">
      <h3>Flowplayer</h3>
      <h4>The <em>HTML5</em> video player for the web</h4>

      <a class="button" href="/pricing#player">Get the new version</a>

      <!-- an element with class "fp-toggle" automatically works as a replay button -->
      <a class="fp-toggle">replay video</a>
   </div>

</div>



<div class="info">
   Lead your audience to related topics on your site by presenting an end screen once they have enjoyed your video. With Flowplayer end screens are completely customizable and require no scripting. Just make use of the <code>is-finished</code> CSS <a href="skinning.html#states">state class</a> to make it appear.
</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-finish-css" href="#"><span class="codetogglehint">show</span> CSS code</a>
</div>
<div id="timeline-finish-css" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="p">{</span><br /><span class="c">/* position end screen outside player area */</span><br />  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">-9999</span><span class="kt">em</span><span class="p">;</span><br />  <span class="k">top</span><span class="p">:</span> <span class="mi">20</span><span class="kt">%</span><span class="p">;</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">0</span><span class="p">);</span><br />  <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span><br />  <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span><br />  <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span> <span class="k">opacity</span> <span class="mf">0.5</span><span class="kt">s</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">transition</span><span class="p">:</span> <span class="k">opacity</span> <span class="mf">0.5</span><span class="kt">s</span><span class="p">;</span><br />  <span class="k">transition</span><span class="p">:</span> <span class="k">opacity</span> <span class="mf">0.5</span><span class="kt">s</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="nt">h3</span> <span class="p">{</span><br />  <span class="k">font-size</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">font-weight</span><span class="p">:</span> <span class="kc">bold</span><span class="p">;</span><br />  <span class="k">margin-bottom</span><span class="p">:</span> <span class="mi">-10</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">color</span><span class="p">:</span> <span class="mh">#ccc</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="nt">h4</span> <span class="p">{</span><br />  <span class="k">font-size</span><span class="p">:</span> <span class="mi">25</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">color</span><span class="p">:</span> <span class="mh">#777</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="p">.</span><span class="nc">button</span> <span class="p">{</span><br />  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#00a6bc</span><span class="p">;</span><br />  <span class="k">padding</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">margin</span><span class="p">:</span> <span class="mi">15</span><span class="kt">px</span> <span class="mi">0</span><span class="p">;</span><br />  <span class="kp">-webkit-</span><span class="k">border-radius</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">border-radius</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">border-radius</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">font-size</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">color</span><span class="p">:</span> <span class="mh">#eee</span><span class="p">;</span><br />  <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span><br />  <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span><br />  <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span> <span class="k">background-color</span> <span class="mf">0.1</span><span class="kt">s</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">transition</span><span class="p">:</span> <span class="k">background-color</span> <span class="mf">0.1</span><span class="kt">s</span><span class="p">;</span><br />  <span class="k">transition</span><span class="p">:</span> <span class="k">background-color</span> <span class="mf">0.1</span><span class="kt">s</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="p">.</span><span class="nc">button</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span><br />  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#00afc6</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="p">.</span><span class="nc">button</span><span class="p">:</span><span class="nd">active</span> <span class="p">{</span><br />  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#009db2</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="p">.</span><span class="nc">fp-toggle</span> <span class="p">{</span><br />  <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span><br />  <span class="k">color</span><span class="p">:</span> <span class="mh">#777</span><span class="p">;</span><br />  <span class="k">font-size</span><span class="p">:</span> <span class="kc">smaller</span><span class="p">;</span><br />  <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="p">.</span><span class="nc">fp-toggle</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span><br />  <span class="k">color</span><span class="p">:</span> <span class="mh">#444</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span> <span class="p">{</span><br />  <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/black_big.jpg&quot;</span><span class="p">);</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span><span class="p">.</span><span class="nc">is-finished</span> <span class="p">{</span><br />  <span class="k">background</span><span class="p">:</span> <span class="mh">#333</span><span class="p">;</span><br />  <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span> <span class="k">background-color</span> <span class="mf">0.7</span><span class="kt">s</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">transition</span><span class="p">:</span> <span class="k">background-color</span> <span class="mf">0.7</span><span class="kt">s</span><span class="p">;</span><br />  <span class="k">transition</span><span class="p">:</span> <span class="k">background-color</span> <span class="mf">0.7</span><span class="kt">s</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span><span class="p">.</span><span class="nc">is-finished</span> <span class="p">.</span><span class="nc">fp-ui</span><span class="o">,</span><br /><span class="p">#</span><span class="nn">endscreen</span><span class="p">.</span><span class="nc">is-finished</span> <span class="p">.</span><span class="nc">fp-engine</span> <span class="p">{</span><br /><span class="c">/* Flash-save way to hide the engine */</span><br />  <span class="k">top</span><span class="p">:</span> <span class="mi">-9999</span><span class="kt">em</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">endscreen</span><span class="p">.</span><span class="nc">is-finished</span> <span class="p">.</span><span class="nc">when-video-ends</span> <span class="p">{</span><br /><span class="c">/* position end screen inside player area */</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br /><span class="p">}</span><br /></pre></div><br /><figcaption>CSS</figcaption></figure></div>

</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-finish-html" href="#"><span class="codetogglehint">show</span> HTML code</a>
</div>
<div id="timeline-finish-html" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;endscreen&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;flowplayer no-volume&quot;</span><br />     <span class="na">data-aspect-ratio</span><span class="o">=</span><span class="s">&quot;47:25&quot;</span><br />     <span class="na">data-splash</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">video</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/webm&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/black/470x250.webm&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/mp4&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/black/470x250.mp4&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/flash&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;mp4:black/470x250&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">video</span><span class="p">&gt;</span><br />&nbsp;<br />   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;when-video-ends&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Flowplayer<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">h4</span><span class="p">&gt;</span>The <span class="p">&lt;</span><span class="nt">em</span><span class="p">&gt;</span>HTML5<span class="p">&lt;/</span><span class="nt">em</span><span class="p">&gt;</span> video player for the web<span class="p">&lt;/</span><span class="nt">h4</span><span class="p">&gt;</span><br />&nbsp;<br />      <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/pricing/player.html&quot;</span><span class="p">&gt;</span>Get the new version<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span><br />&nbsp;<br />      <span class="c">&lt;!-- an element with class &quot;fp-toggle&quot; automatically works as a replay button --&gt;</span><br />      <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;fp-toggle&quot;</span><span class="p">&gt;</span>replay video<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span><br />   <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span><br />&nbsp;<br /><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span><br /></pre></div><br /><figcaption>HTML</figcaption></figure></div>

</div>

<p class="help closure">
  <a href="/docs/player/standalone/timeline/finish.html">view standalone page</a>
  <span class="bar">|</span>
  <a href="https://demos.flowplayer.com/lookandfeel/finish.html">alternative version with overlayed screen</a></p>


<hgroup class="title" id="info-demo">
   <h1>More info</h1>
   <h2>Show details during playback</h2>
</hgroup>

<div id="timeline_info"
     class="flowplayer"
     data-cuepoints="[0.5, 4, 8, 12, 14, 16, 20]"
     data-hls-qualities="[-1,1,3,6,7]"
     data-ratio="0.5625">

   <video>
      <source type="application/x-mpegurl"
              src="https://edge.flowplayer.org/trains.m3u8">
      <source type="video/mp4"
              src="https://edge.flowplayer.org/trains.mp4">
      </video>

   <span class="info info0">Helsinki railway station</span>
   <span class="info info1">Sunday 8:30 AM</span>
   <span class="info info2">10:09 AM from Malminkartano</span>
   <span class="info info3">12:15 AM to Riihimäki</span>
   <span class="info info4">11:25 AM from Kerava</span>
   <span class="info info5">2:55 PM to St. Petersburg</span>
   <span class="info info6">5:25 PM from Vaasa</span>

</div>



<div class="info">
   Here we set some <a href="/docs/player/cuepoints">cuepoints</a> for the player. These are pre-defined points in time during playback. Every time a cuepoint is fired an indexed CSS class name is assigned and you can do your thing. This is <a href="../../media/css/demos/timeline/info.css">our thing</a>.
</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-info-css" href="#"><span class="codetogglehint">show</span> CSS code</a>
</div>
<div id="timeline-info-css" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">#</span><span class="nn">timeline_info</span> <span class="p">.</span><span class="nc">info</span> <span class="p">{</span><br />  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#333</span><span class="p">;</span><br />  <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mf">0.75</span><span class="p">);</span><br />  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span><br />  <span class="k">top</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span><br />  <span class="kp">-webkit-</span><span class="k">border-radius</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">border-radius</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">border-radius</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">0</span><span class="p">);</span><br />  <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">0.5</span><span class="kt">s</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">0.5</span><span class="kt">s</span><span class="p">;</span><br />  <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">0.5</span><span class="kt">s</span><span class="p">;</span><br />  <span class="k">z-index</span><span class="p">:</span> <span class="mi">11</span><span class="p">;</span><br />  <span class="k">padding</span><span class="p">:</span> <span class="mi">15</span><span class="kt">px</span><span class="p">;</span><br />  <span class="k">color</span><span class="p">:</span> <span class="mh">#eee</span><span class="p">;</span><br />  <span class="k">font-weight</span><span class="p">:</span> <span class="kc">bold</span><span class="p">;</span><br />  <span class="k">font-size</span><span class="p">:</span> <span class="mi">16</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">timeline_info</span><span class="p">.</span><span class="nc">cue0</span> <span class="p">.</span><span class="nc">info0</span> <span class="p">{</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">timeline_info</span><span class="p">.</span><span class="nc">cue1</span> <span class="p">.</span><span class="nc">info1</span> <span class="p">{</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">80</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">timeline_info</span><span class="p">.</span><span class="nc">cue2</span> <span class="p">.</span><span class="nc">info2</span> <span class="p">{</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">110</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">timeline_info</span><span class="p">.</span><span class="nc">cue3</span> <span class="p">.</span><span class="nc">info3</span> <span class="p">{</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">140</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">timeline_info</span><span class="p">.</span><span class="nc">cue4</span> <span class="p">.</span><span class="nc">info4</span> <span class="p">{</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">170</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">timeline_info</span><span class="p">.</span><span class="nc">cue5</span> <span class="p">.</span><span class="nc">info5</span> <span class="p">{</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">timeline_info</span><span class="p">.</span><span class="nc">cue6</span> <span class="p">.</span><span class="nc">info6</span> <span class="p">{</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">100</span><span class="p">);</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">230</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /></pre></div><br /><figcaption>CSS</figcaption></figure></div>

</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-info-html" href="#"><span class="codetogglehint">show</span> HTML code</a>
</div>
<div id="timeline-info-html" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;timeline_info&quot;</span><br />     <span class="na">class</span><span class="o">=</span><span class="s">&quot;flowplayer&quot;</span><br />     <span class="na">data-cuepoints</span><span class="o">=</span><span class="s">&quot;[0.5, 4, 8, 12, 14, 16, 20]&quot;</span><br />     <span class="na">data-hls-qualities</span><span class="o">=</span><span class="s">&quot;[-1,1,3,6,7]&quot;</span><br />     <span class="na">data-ratio</span><span class="o">=</span><span class="s">&quot;0.5625&quot;</span><span class="p">&gt;</span><br />&nbsp;<br />   <span class="p">&lt;</span><span class="nt">video</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;application/x-mpegurl&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/trains.m3u8&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/mp4&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/trains.mp4&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;/</span><span class="nt">video</span><span class="p">&gt;</span><br />&nbsp;<br />   <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;info info0&quot;</span><span class="p">&gt;</span>Helsinki railway station<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;info info1&quot;</span><span class="p">&gt;</span>Sunday 8:30 AM<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;info info2&quot;</span><span class="p">&gt;</span>10:09 AM from Malminkartano<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;info info3&quot;</span><span class="p">&gt;</span>12:15 AM to Riihimäki<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;info info4&quot;</span><span class="p">&gt;</span>11:25 AM from Kerava<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;info info5&quot;</span><span class="p">&gt;</span>2:55 PM to St. Petersburg<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;info info6&quot;</span><span class="p">&gt;</span>5:25 PM from Vaasa<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><br />&nbsp;<br /><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span><br /></pre></div><br /><figcaption>HTML</figcaption></figure></div>

</div>

<p class="help closure">
  <a href="/docs/player/standalone/timeline/info.html">view standalone page</a>
  <span class="bar">|</span>
  <a href="http://demos.flowplayer.com/lookandfeel/link-cues.html">alternative version with clickable cues</a></p>

<hgroup class="title" id="art-demo">
   <h1>Video art</h1>
   <h2>Layer video over changing background</h2>
</hgroup>

<div id="art" class="flowplayer is-splash no-volume"
     data-cuepoints="[0.5, 3, 6, 9, 12]" data-ratio="0.5625" data-share="false">
   <video data-title="Video Art">
      <source type="video/webm"
              src="https://edge.flowplayer.org/art/640x360.webm">
      <source type="video/mp4"
              src="https://edge.flowplayer.org/art/640x360.mp4">
      <source type="video/flash"
              src="mp4:art/640x360"></video>
</div>



<div class="info">
   Here cuepoints change the background image. Here is the <a href="/media/css/demos/timeline/art.css">CSS code</a>.
</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-art-css" href="#"><span class="codetogglehint">show</span> CSS code</a>
</div>
<div id="timeline-art-css" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span> <span class="p">.</span><span class="nc">fp-ui</span><span class="o">,</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span> <span class="p">.</span><span class="nc">fp-engine</span> <span class="p">{</span><br /><span class="c">/* make the player elements smaller */</span><br />  <span class="k">top</span><span class="p">:</span> <span class="mi">5</span><span class="kt">%</span><span class="p">;</span><br />  <span class="k">left</span><span class="p">:</span> <span class="mi">5</span><span class="kt">%</span><span class="p">;</span><br />  <span class="k">width</span><span class="p">:</span> <span class="mi">90</span><span class="kt">%</span><span class="p">;</span><br />  <span class="k">height</span><span class="p">:</span> <span class="mi">90</span><span class="kt">%</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span> <span class="p">.</span><span class="nc">fp-engine</span> <span class="p">{</span><br /><span class="c">/* little opacity to the video or object tag */</span><br />  <span class="k">opacity</span><span class="p">:</span> <span class="mf">0.6</span><span class="p">;</span><br />  <span class="k">filter</span><span class="p">:</span> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="nf">Alpha</span><span class="p">(</span><span class="n">Opacity</span><span class="err">=</span><span class="mi">60</span><span class="p">);</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span> <span class="p">.</span><span class="nc">fp-player</span> <span class="p">{</span><br />  <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/art5.jpg&quot;</span><span class="p">)</span> <span class="mi">0</span> <span class="mi">-20</span><span class="kt">px</span><span class="p">;</span><br />  <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mi">3</span><span class="kt">s</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mi">3</span><span class="kt">s</span><span class="p">;</span><br />  <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mi">3</span><span class="kt">s</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span><span class="p">.</span><span class="nc">cue0</span> <span class="p">.</span><span class="nc">fp-player</span> <span class="p">{</span><br /><span class="c">/* switch background image based on cuepoint */</span><br />  <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/art7.jpg&quot;</span><span class="p">)</span> <span class="mi">-20</span><span class="kt">px</span> <span class="mi">-70</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span><span class="p">.</span><span class="nc">cue1</span> <span class="p">.</span><span class="nc">fp-player</span> <span class="p">{</span><br />  <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/art2.jpg&quot;</span><span class="p">)</span> <span class="mi">-10</span><span class="kt">px</span> <span class="mi">-20</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span><span class="p">.</span><span class="nc">cue2</span> <span class="p">.</span><span class="nc">fp-player</span> <span class="p">{</span><br />  <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/art3.jpg&quot;</span><span class="p">)</span> <span class="mi">-10</span><span class="kt">px</span> <span class="mi">0</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span><span class="p">.</span><span class="nc">cue3</span> <span class="p">.</span><span class="nc">fp-player</span> <span class="p">{</span><br />  <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/art4.jpg&quot;</span><span class="p">)</span> <span class="mi">20</span><span class="kt">px</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">art</span><span class="p">.</span><span class="nc">flowplayer</span><span class="p">.</span><span class="nc">cue4</span> <span class="p">.</span><span class="nc">fp-player</span> <span class="p">{</span><br />  <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/art6.jpg&quot;</span><span class="p">)</span> <span class="mi">-50</span><span class="kt">px</span> <span class="mi">-50</span><span class="kt">px</span><span class="p">;</span><br /><span class="p">}</span><br /></pre></div><br /><figcaption>CSS</figcaption></figure></div>

</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-art-html" href="#"><span class="codetogglehint">show</span> HTML code</a>
</div>
<div id="timeline-art-html" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;art&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;flowplayer is-splash no-volume&quot;</span><br />     <span class="na">data-cuepoints</span><span class="o">=</span><span class="s">&quot;[0.5, 3, 6, 9, 12]&quot;</span> <span class="na">data-ratio</span><span class="o">=</span><span class="s">&quot;0.5625&quot;</span> <span class="na">data-share</span><span class="o">=</span><span class="s">&quot;false&quot;</span><span class="p">&gt;</span><br />   <span class="p">&lt;</span><span class="nt">video</span> <span class="na">data-title</span><span class="o">=</span><span class="s">&quot;Video Art&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/webm&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/art/640x360.webm&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/mp4&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/art/640x360.mp4&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/flash&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;mp4:art/640x360&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">video</span><span class="p">&gt;</span><br /><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span><br /></pre></div><br /><figcaption>HTML</figcaption></figure></div>

</div>

<p class="help closure">
  <a href="/docs/player/standalone/timeline/art.html">view standalone page</a>
  </p>

<hgroup class="title" id="thumbs-demo">
   <h1>Thumbs</h1>
   <h2>Generated and visible cuepoints</h2>
</hgroup>

<div id="thumbs" class="flowplayer" data-ratio="false"
     data-cuepoints="[5.5, 12, 17.5, 23.7, 27, 30.5]" data-generate_cuepoints="true">

   <video>
      <source type="application/x-mpegurl"
              src="https://edge.flowplayer.org/playful.m3u8">
      <source type="video/mp4"
              src="https://edge.flowplayer.org/playful.mp4">
      </video>

</div>



<div class="info" style="margin-top:150px">
   Here cuepoints are automatically generated and styled with <a href="/media/css/demos/timeline/thumbs.css">CSS</a>.
</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-thumbs-css" href="#"><span class="codetogglehint">show</span> CSS code</a>
</div>
<div id="timeline-thumbs-css" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">#</span><span class="nn">thumbs</span> <span class="p">{</span><br />  <span class="k">overflow</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-ratio</span> <span class="p">{</span><br />  <span class="k">padding-top</span><span class="p">:</span> <span class="mf">41.67</span><span class="kt">%</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-cuepoint</span> <span class="p">{</span><br />  <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span><br />  <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span><br />  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span><br />  <span class="k">width</span><span class="p">:</span> <span class="mi">8</span><span class="kt">%</span><span class="p">;</span><br />  <span class="k">padding-top</span><span class="p">:</span> <span class="mi">8</span><span class="kt">%</span><span class="p">;</span><br />  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#333</span><span class="p">;</span><br />  <span class="k">margin-left</span><span class="p">:</span> <span class="mi">-4</span><span class="kt">%</span><span class="p">;</span><br />  <span class="k">top</span><span class="p">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span><br />  <span class="kp">-webkit-</span><span class="k">background-size</span><span class="p">:</span> <span class="kc">cover</span><span class="p">;</span><br />  <span class="kp">-moz-</span><span class="k">background-size</span><span class="p">:</span> <span class="kc">cover</span><span class="p">;</span><br />  <span class="k">background-size</span><span class="p">:</span> <span class="kc">cover</span><span class="p">;</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-cuepoint0</span> <span class="p">{</span><br />  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/playful1.jpg&quot;</span><span class="p">);</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-cuepoint1</span> <span class="p">{</span><br />  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/playful2.jpg&quot;</span><span class="p">);</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-cuepoint2</span> <span class="p">{</span><br />  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/playful4.jpg&quot;</span><span class="p">);</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-cuepoint3</span> <span class="p">{</span><br />  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/playful6.jpg&quot;</span><span class="p">);</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-cuepoint4</span> <span class="p">{</span><br />  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/playful7.jpg&quot;</span><span class="p">);</span><br /><span class="p">}</span><br /><span class="p">#</span><span class="nn">thumbs</span> <span class="p">.</span><span class="nc">fp-cuepoint5</span> <span class="p">{</span><br />  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;//flowplayer.org/media/img/demos/timeline/playful8.jpg&quot;</span><span class="p">);</span><br /><span class="p">}</span><br /></pre></div><br /><figcaption>CSS</figcaption></figure></div>

</div>

<div class="help">
  <a class="codetoggletrigger" data-code-id="timeline-thumbs-html" href="#"><span class="codetogglehint">show</span> HTML code</a>
</div>
<div id="timeline-thumbs-html" class="codetoggle">
<div class="codebox"><figure class="code"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;thumbs&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;flowplayer&quot;</span> <span class="na">data-ratio</span><span class="o">=</span><span class="s">&quot;false&quot;</span><br />     <span class="na">data-cuepoints</span><span class="o">=</span><span class="s">&quot;[5.5, 12, 17.5, 23.7, 27, 30.5]&quot;</span> <span class="na">data-generate_cuepoints</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span><br />&nbsp;<br />   <span class="p">&lt;</span><span class="nt">video</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;application/x-mpegurl&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/playful.m3u8&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;</span><span class="nt">source</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;video/mp4&quot;</span><br />              <span class="na">src</span><span class="o">=</span><span class="s">&quot;//edge.flowplayer.org/playful.mp4&quot;</span><span class="p">&gt;</span><br />      <span class="p">&lt;/</span><span class="nt">video</span><span class="p">&gt;</span><br />&nbsp;<br /><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span><br /></pre></div><br /><figcaption>HTML</figcaption></figure></div>

</div>

<p class="help closure">
  <a href="/docs/player/standalone/timeline/thumbs.html">view standalone page</a>
  <span class="bar">|</span>
  <a href="https://demos.flowplayer.com/scripting/chapters.html">variant with manually configured cuepoints</a></p>


            </div>


   <script>
   var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-27182341-1']);
     _gaq.push(['_trackPageview']);   </script>
   <script src="https://www.google-analytics.com/ga.js"></script>


</body>

</html>