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.
#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
<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.
#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
<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.
#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
<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.
#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
<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