Flowplayer · Pre-roll for a playlist

prev next
pre-roll

Playlist with a mandatory pre-roll advert which is played only once.

The player can only be loaded by clicking on the screen and starting the advert.

<head/>

For smoother HLS playback in modern browsers we load the hlsjs plugin.

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

HTML

<style>

Note how the pre-roll announcement is only shown on page load and during pre-roll playback using the is-splash state class and the video0 playlist class. The gradient of the playlist element is toggled by the same means.

.flowplayer {
background-color: #333;
/* allow room for playlist element */
margin-bottom: 100px;
}
.flowplayer .fp-playlist, .flowplayer .preroll-cover {
position: absolute;
bottom: -100px;
width: 100%;
height: 100px;
text-align: center;
}
/* gradient for active playlist */
.flowplayer .fp-playlist {
height: 100px;
background-color: rgba(0, 0, 0, 0.2);
background: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
background: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
background: -ms-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
 
}
/* gradient for playlist during pre-roll */
.is-splash.flowplayer .fp-playlist, .flowplayer.video0 .fp-playlist {
background: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
background: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
background: -ms-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
 
/* the pre-roll announcement - hidden by default */
.flowplayer .preroll-cover {
display: none;
font-size: 60px;
color: #fff;
letter-spacing: 1em;
text-transform: uppercase;
cursor: default;
}
/* show the pre-roll announcement during pre-roll */
.is-splash.flowplayer .preroll-cover, .flowplayer.video0 .preroll-cover {
display: block;
z-index: 1;
}
 
/* the playlist item anchors */
.flowplayer .fp-playlist a {
display: inline-block;
color: #000;
background-color: #777;
padding: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-size: 20px;
margin: 30px 15px;
}
/* hide advert playlist anchor */
.flowplayer .fp-playlist a.is-advert {
display: none;
}
.flowplayer .fp-playlist a.is-active {
background-color: #fff;
}
.is-paused.flowplayer .fp-playlist a.is-active {
background-color: #eee;
}
/* hide prev/next during preroll
* hide prev during first feature, next during last feature
* hide fullscreen button during pre-roll as it's a no-op
*/
.flowplayer.is-splash .fp-prev, .flowplayer.is-splash .fp-next,
.flowplayer.video0 .fp-prev, .flowplayer.video0 .fp-next,
.flowplayer.video1 .fp-prev, .flowplayer.last-video .fp-next,
.flowplayer.video0 .fp-fullscreen {
display: none;
}
.flowplayer .fp-next, .flowplayer .fp-prev {
position: absolute;
bottom: -60px;
font-size: 20px;
color: #777;
cursor: pointer;
display: block;
}
.flowplayer .fp-prev {
left: 1em;
z-index: 1;
}
.flowplayer .fp-next {
right: 1em;
}
 
/* always show the logo */
.flowplayer .fp-logo {
display: block;
opacity: 1 !important;
}

CSS

<script>

flowplayer.conf = {
key: "$130763224349944",
logo: "https://flowplayer.org/media/img/mylogo.png",
splash: true,
ratio: 5/12,
embed: false
};
 
flowplayer(function (api, root) {
api.on("ready", function (e, api, video) {
// disable user interaction during pre-roll
api.disable(video.index < 1);
 
}).on("load", function (e, api) {
if (api.video.index === 1) {
// preview was silent, but now show volume and mute controls
$.each(["no-volume", "no-mute"], function (i, klass) {
$(root).removeClass(klass);
});
}
 
}).on("finish", function (e, api) {
if (api.video.is_last) {
// do not show pre-roll on replay
api.off("resume.fromfirst") // disable default playlist behaviour
.one("resume", function (e, api) { // one() binds event just once
api.play(1);
});
}
 
});
});

JavaScript

<body/>

<!-- no-volume and no-mute classes to be removed after silent preview -->
<div class="flowplayer no-volume no-mute">
<video>
<source type="application/x-mpegurl" src="//edge.flowplayer.org/download.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/download.mp4">
</video>
 
<div class="fp-playlist">
<a class="is-advert" href="//edge.flowplayer.org/download.mp4"></a>
<a href="//edge.flowplayer.org/bauhaus.mp4">minimal</a>
<a href="//edge.flowplayer.org/functional.mp4">functional</a>
<a href="//edge.flowplayer.org/playful.mp4">playful</a>
</div>
 
<a class="fp-prev">prev</a>
<a class="fp-next">next</a>
 
<div class="preroll-cover">pre-roll</div>
</div>

HTML