Flowplayer · Chapter navigation

1 2 3 4 5 6

A manual variant of the demo for clickable cuepoints generation.

<head/>

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

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

HTML

<style>

#player {
background-color: #001f1f;
background-image: url(//flowplayer.com/media/img/demos/playful.jpg);
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
#player {
background-image: url(//flowplayer.com/media/img/demos/playful@x2.jpg);
}
}
 
#chapters {
margin: 26px 0 0 4%;
}
#chapters .cuepoint {
display: inline-block;
margin-right: 4%;
padding: 26px 4%;
background-color: #001f1f;
color: #eee;
text-shadow: 2px 2px 2px #111;
font-weight: bold;
font-size: 24px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
cursor: pointer;
}
#chapters .cuepoint.active {
color: #f00;
}
#chapters .cuepoint0 {
background-image: url("//flowplayer.com/media/img/demos/timeline/playful1.jpg");
}
#chapters .cuepoint1 {
background-image: url("//flowplayer.com/media/img/demos/timeline/playful2.jpg");
}
#chapters .cuepoint2 {
background-image: url("//flowplayer.com/media/img/demos/timeline/playful4.jpg");
}
#chapters .cuepoint3 {
background-image: url("//flowplayer.com/media/img/demos/timeline/playful6.jpg");
}
#chapters .cuepoint4 {
background-image: url("//flowplayer.com/media/img/demos/timeline/playful7.jpg");
}
#chapters .cuepoint5 {
background-image: url("//flowplayer.com/media/img/demos/timeline/playful8.jpg");
}

CSS

<script>

$(function () {
var elems = $("#chapters a"),
 
chaptertoggle = function (index) {
elems.each(function (i) {
$(this).toggleClass("active", index == i);
});
},
 
clearchapters = function () {
elems.removeClass("active");
},
 
api = flowplayer("#player", {
ratio: 5/12,
cuepoints: [5.5, 12, 17.5, 23.7, 27, 30.5],
clip: {
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/playful.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/playful.mp4" }
]
},
splash: true
 
}).on("cuepoint", function (e, api, cue) {
chaptertoggle(cue.index);
 
}).on("beforeseek", function (e, api, pos) {
if (pos < api.conf.cuepoints[0]) {
clearchapters();
 
} else {
$.each(api.conf.cuepoints, function (index, cue) {
if (index == api.conf.cuepoints.length - 1 ||
pos >= cue && pos < api.conf.cuepoints[index + 1]) {
 
chaptertoggle(index);
return false;
}
});
}
 
}).on("finish", function (e, api) {
api.one("resume.replay", clearchapters);
 
}).on("unload", clearchapters);
 
elems.click(function (e) {
var cue = api.conf.cuepoints[elems.index(this)];

e.preventDefault();
 
chaptertoggle(cue.index);
 
if (api.ready) {
api.seek(cue);
} else {
api.one("ready.chapter", function (e, api) {
api.seek(cue);
});
api.load();
}
 
});
 
});

JavaScript

<body/>

<div id="player" class="fp-playful is-closeable"></div>
 
<div id="chapters">
<a class="cuepoint cuepoint0">1</a>
<a class="cuepoint cuepoint1">2</a>
<a class="cuepoint cuepoint2">3</a>
<a class="cuepoint cuepoint3">4</a>
<a class="cuepoint cuepoint4">5</a>
<a class="cuepoint cuepoint5">6</a>
</div>

HTML