Flowplayer · Overlayed prev/next elements

< >

Display the prev/next elements overlayed on screen

<head/>

For smoother HLS playback in modern browsers we load the hlsjs plugin. We also offer manual selection of HLS levels if hlsjs is supported.

<!-- a Flowplayer skin -->
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/minimalist.css">
<!-- Flowplayer quality selector stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.css">
 
<!-- ... -->
<!-- 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>

To be clickable a higher z-index value than 11 - the position of the Flowplayer UI on the z-axis - must be assigned to the prev/next elements.

.flowplayer {
background-color: #ccc;
}
.is-splash.flowplayer .fp-prev, .is-splash.flowplayer .fp-next {
display: none;
}
.flowplayer .fp-prev, .flowplayer .fp-next {
position: absolute;
top: 44%;
font-size: 240%;
color: #fff;
padding: 4px;
font-weight: bold;
text-shadow: 0 0 1px #000;
cursor: pointer;
z-index: 12; /* make clickable */
filter: alpha(opacity=100);
opacity: 1;
}
.flowplayer .fp-prev {
left: 5px;
}
.flowplayer .fp-next {
right: 5px;
}
.is-mouseout.flowplayer .fp-prev, .is-mouseout.flowplayer .fp-next {
filter: alpha(opacity=0);
opacity: 0;
/* same transition as other ui elements like fullscreen */
-webkit-transition: opacity .15s .3s;
-moz-transition: opacity .15s .3s;
transition: opacity .15s .3s;
}

CSS

<body/>

<div data-ratio="0.5625"
data-loop="true"
data-hls-qualities="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">&lt;</a>
<a class="fp-next" title="next">&gt;</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