Flowplayer · Custom screen on finish

Flowplayer

The HTML5 video player for the web

Alternate end screen demo Play it again, Sam!

Overlay a custom screen, including a replay button, when the video finishes

<head/>

<style>

Differing from this demo the Flowplayer UI is not hidden by positioning it outside the page with left: -9999em. Instead it is overlayed by setting the z-index: 12 CSS directive for the endscreen class in the is-finished state.

.flowplayer {
background-image: url(//flowplayer.com/media/img/demos/white_big.jpg);
}
 
.flowplayer .endscreen {
top: 10%;
left: 10%;
position: absolute;
width: 80%;
height: 70%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 14px;
background-color: #777;
text-align: center;
 
/* do not show endscreen by default - a simpler, non-animated alternative would be:
* display: none; */
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
}
.flowplayer .endscreen h3 {
font-size: 160%;
font-weight: bold;
color: #ccc;
margin-top: 10%;
}
.flowplayer .endscreen h4 {
font-size: 120%;
color: #eee;
}
.flowplayer .endscreen .button {
background-color: #00a6bc;
padding: 20px 30px;
margin: 15px 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
font-size: 110%;
color: #eee;
cursor: pointer;
display: inline-block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
transition: background-color .1s;

}
.flowplayer .endscreen .button:hover {
background-color: #00afc6;
}
.flowplayer .endscreen .button:active {
background-color: #009db2;
}
.flowplayer .endscreen .fp-toggle {
display: block;
color: #eee;
cursor: pointer;
}
.flowplayer .endscreen .fp-toggle:hover {
text-decoration: underline;
}
 
/* overlay player screen when video is finished */
.flowplayer.is-finished .endscreen {
/* the player UI has z-index: 11, overlay it */
z-index: 12;
 
/* show endscreen - a simpler alternative would be:
* display: block; */
filter: alpha(opacity=100);
opacity: 1;
}

CSS

<script>

window.onload = function () {
 
flowplayer("#white", {
ratio: 25/47,
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
embed: {
skin: "//releases.flowplayer.org/6.0.5/skin/minimalist.css"
},
clip: {
sources: [
{ type: "video/webm", src: "//edge.flowplayer.org/white/470x250.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/white/470x250.mp4" },
{ type: "video/flash", src: "mp4:white/470x250" }
]
}
});
 
};

JavaScript

<body/>

<div id="white" class="no-volume no-mute">
 
<div class="endscreen">
<h3>Flowplayer</h3>
<h4>The <em>HTML5</em> video player for the web</h4>

<a class="button"
href="https://flowplayer.com/v6/standalone/timeline/finish.html"
target="_blank">Alternate end screen demo</a>

<!-- an element with class "fp-toggle" automatically works as a replay button -->
<a class="fp-toggle">Play it again, Sam!</a>
</div>
 
</div>

HTML