Flowplayer · Adverts in playlist

An advert is played before every second video.

<head/>

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

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

HTML

<style>

.flowplayer {
background-color: #00abcd;
}
.flowplayer .fp-color-play {
fill: #eee;
}
.flowplayer .fp-playlist {
position: absolute;
padding: 10px;
top: 10px;
}
/* do not header controls be covered by playlist */
.flowplayer .fp-header {
text-align: right;
}
 
/* brand color screen during advert */
.flowplayer.is-disabled.is-ready .fp-player {
background-color: #00abcd;
}
/* do not show no-op header elements during ad */
.flowplayer.is-disabled .fp-header {
display: none;
}
 
.flowplayer .fp-playlist a {
padding: 10px;
color: #00abcd !important;
background-color: #fff;
}
.flowplayer .fp-playlist a.is-active {
background-color: #00abcd;
color: #fff !important;
}
 
.flowplayer .fp-playlist p {
color: #fff;
margin-left: 3em;
display: none;
}
/* hide playlist anchors */
.flowplayer.is-disabled .fp-playlist a {
display: none;
}
/* show ad countdown */
.flowplayer.is-disabled .fp-playlist p {
display: block;
}

CSS

<script>

flowplayer(function(api, root) {
var adRolling = false;
 
api.on("load", function(ev, api, video) {
if (!adRolling && video.index % 2) {
// advert not playing and video index an odd number
 
var originalVideoIndex = video.index;
 
ev.preventDefault();
api.loading = false;
 
adRolling = true;
 
api.one("load", function() {
// trick flowplayer to think we are playing the previous clip
// so we can resume with originalVideoIndex after the advert
api.video.index = originalVideoIndex - 1;
})
.load({
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/nature-timelapse.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/nature-timelapse.mp4" }
]
})
.disable()
// custom event progress.ad
.on("progress.ad", function(e, api, currentTime) {
$(".fp-playlist p", root).text("Advert running, resuming your playlist in: " +
Math.ceil(api.video.duration - currentTime) + " seconds");
})
.one("finish", function() {
api.disable(false)
.off("progress.ad")
.play(originalVideoIndex);
 
adRolling = false;
});
}
});
});

JavaScript

<body/>

<div class="flowplayer fp-custom-playlist is-splash"
data-ratio="0.5625"
data-hls-qualities="false">
<video>
<source type="application/x-mpegurl" src="//edge.flowplayer.org/night1.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/night1.mp4">
</video>
<div class="fp-playlist">
<a href="//edge.flowplayer.org/night1.mp4">Night 1</a>
<a href="//edge.flowplayer.org/night2.mp4">Night 2</a>
<a href="//edge.flowplayer.org/night3.mp4">Night 3</a>
<a href="//edge.flowplayer.org/night4.mp4">Night 4</a>
<a href="//edge.flowplayer.org/night5.mp4">Night 5</a>
<a href="//edge.flowplayer.org/night6.mp4">Night 6</a>
<a href="//edge.flowplayer.org/night7.mp4">Night 7</a>
<p></p> <!-- show info about advert -->
</div>
</div>

HTML