Flowplayer · Overlayed prev/next elements

Display only the prev/next elements overlayed on screen

<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: #00abcd;
}
.flowplayer .fp-color-play {
fill: #eee;
}
/* only show prev/next elements */
.flowplayer .fp-playlist {
display: none;
}

CSS

<body/>

<div data-ratio="0.5625"
data-loop="true"
data-hls-qualities="-1,1,3,6,7"
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>
 
<a class="fp-prev" title="prev"></a>
<a class="fp-next" title="next"></a>
 
<div class="fp-playlist">
<a href="//edge.flowplayer.org/night1.mp4"></a>
<a href="//edge.flowplayer.org/night2.mp4"></a>
<a href="//edge.flowplayer.org/night3.mp4"></a>
<a href="//edge.flowplayer.org/night4.mp4"></a>
<a href="//edge.flowplayer.org/night5.mp4"></a>
<a href="//edge.flowplayer.org/night6.mp4"></a>
<a href="//edge.flowplayer.org/night7.mp4"></a>
</div>
 
</div>

HTML