Flowplayer · Playlist events

prev next

<head/>

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

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine (light) -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

HTML

<style>

.flowplayer {
background-color: #036;
/* allow room for playlist buttons */
margin-bottom: 100px;
}
 
.flowplayer .fp-playlist {
position: absolute;
bottom: -100px;
width: 100%;
text-align: center;
}
 
.flowplayer .fp-playlist a {
display: inline-block;
width: 70px;
height: 70px;
border-radius: 70px;
background-color: #666;
margin: 15px;
}
 
.flowplayer .fp-playlist a.is-active {
background-color: #eee;
}
 
.flowplayer.is-paused .fp-playlist a.is-active {
background-color: #ccc;
}
 
.flowplayer a.fp-prev,
.flowplayer a.fp-next {
position: absolute;
filter: alpha(opacity=100);
opacity: 1;
color: #00abcd !important;
bottom: -60px;
font-size: 20px;
display: none;
cursor: pointer;
}
 
.flowplayer .fp-prev {
left: 0;
}
.flowplayer .fp-next {
right: 0;
}
 
.flowplayer.is-ready .fp-next,
.flowplayer.is-ready .fp-prev {
display: block;
}
 
/* event info box */
#info {
background-color: #333;
font-family: monaco, monospace;
max-width: 300px;
min-height: 100px;
margin: 0 auto;
color: #eee;
padding: 10px;
}
 
#info p {
margin: 0;
}

CSS

<script>

// listen to playlist events
$(function() {
 
function log() {
$("#info").append("<p>" + [].slice.call(arguments).join(", ") + "</p>");
}
 
flowplayer().on("load ready", function(e, api) {
var video = api.video;
log(e.type, video.index, "is_last: " + video.is_last);
 
}).on("cuepoint", function(e, api, cuepoint) {
log("clip " + api.video.index, "cuepoint " + cuepoint.time);
 
});
 
});

JavaScript

<body/>

<div data-ratio="0.5625" data-bgcolor="#333333" class="flowplayer fp-custom-playlist is-splash">
 
<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" data-cuepoints="[0.3, 0.9]"></a>
<a href="//edge.flowplayer.org/night3.mp4" data-cuepoints="[1, 1.5]"></a>
<a href="//edge.flowplayer.org/night5.mp4"></a>
<a href="//edge.flowplayer.org/night6.mp4"></a>
</div>
 
<a class="fp-prev">prev</a>
<a class="fp-next">next</a>
 
</div>
 
<div id="info"></div>

HTML