Flowplayer · Playlist · Demo

prev next

<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

<body/>

<!-- dark grey bgcolor for Flash object -->
<div data-ratio="0.5625" data-bgcolor="#333333" class="flowplayer 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"></a>
<a href="//edge.flowplayer.org/night3.mp4"></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>

HTML