Flowplayer · Controls in poster state

Show all controls which are not no-ops in poster state, and go back to poster state on finish.

On devices which do not support loading the first video frame and therefore enforce a splash setup the standard splash setup is used to the same effect as in this demo.

Note that the player and video are not really unloaded when there is no splash setup, but that the player engine is positioned outside the page in poster state. The player can also not be forced to leave fullscreen state.

<head/>

For smoother HLS playback in modern browsers we load the hlsjs plugin.

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

HTML

<style>

.flowplayer {
background-image: url(//flowplayer.com/media/img/minimalist.jpg);
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.flowplayer {
background-image: url(//flowplayer.com/media/img/demos/minimalist@x2.jpg);
}
}
 
/* show all controls, except quality selection, in poster state */
.is-poster.flowplayer .fp-controls {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.is-poster.flowplayer .fp-qsel {
display: none;
}

CSS

<script>

flowplayer(function (api) {
// go back to poster (or splash) state on finish
api.on("finish", function () {
api.unload();
});
});

JavaScript
<div class="flowplayer fp-slim is-closeable"
data-ratio="0.4167" data-key="$775445646737769" data-embed="false">
<video>
<source type="application/x-mpegurl" src="//edge.flowplayer.org/bauhaus.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/bauhaus.mp4">
</video>
</div>

HTML

<body/>