Flowplayer · Playlist with linkable clips

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/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: #333;
}

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"></a>
<a class="fp-next"></a>
</div>

HTML