Flowplayer · Playlist with linkable clips

prev next

The currently playing video triggers a specific fragment identifier for the page in the browser's location bar.

Copy the link to a new browser window and the player will start playing that video.

<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>

.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 .fp-prev,
.flowplayer .fp-next {
position: absolute;
bottom: -60px;
font-size: 20px;
display: none;
z-index: 1;
cursor: pointer;
}
 
.flowplayer .fp-next {
right: 0;
}
 
.flowplayer.is-ready .fp-next,
.flowplayer.is-ready .fp-prev {
display: inline;
}

CSS

<script>

If an appropriate fragment identifier is given on page load, it is used to derive the value for the startIndex configuration option.

window.onload = function () {
var videoIndex;
 
// determine startIndex at page load from location.hash if present
if (window.location.hash) {
videoIndex = window.location.hash.split("-")[1];
 
if (Number(videoIndex) % 1 === 0) {
videoIndex = Number(videoIndex);
}
}
 
flowplayer("#player", {
startIndex: videoIndex || 0,
autoplay: true,
playlist: [{
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/night1.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/night1.mp4" }
]
}, {
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/night3.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/night3.mp4" }
]
}, {
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/night5.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/night5.mp4" }
]
}, {
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/night6.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/night6.mp4" }
]
}]
 
}).on("ready", function (e, api, video) {
// update fragment identifier
window.location.hash = "video-" + video.index;
 
});
 
};

JavaScript

<body/>

<div id="player">
<a class="fp-prev">prev</a>
<a class="fp-next">next</a>
</div>

HTML