Flowplayer · Poster setup

4 ways to create a poster setup.

poster option

poster video attribute

background image poster

background color poster

<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>

#backgroundimage-poster {
background-image: url(https://flowplayer.com/media/img/logo-blue.png);
}
#backgroundcolor-poster {
background-color: #00abcd;
}

CSS

<body/>

By adding the is-closeable state class to the container element one can always return to poster state by clicking on the close button top right.

<h2>poster option</h2>
 
<div data-ratio="0.4167" class="fp-slim flowplayer is-closeable"
data-poster="https://flowplayer.com/media/img/logo-blue.png"
data-title="poster option">
<video>
<source type="application/x-mpegurl" src="//edge.flowplayer.org/bauhaus.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/bauhaus.mp4">
</video>
</div>
 
<h2>poster video attribute</h2>
 
<div data-ratio="0.4167" class="fp-slim flowplayer is-closeable">
<video poster="https://flowplayer.com/media/img/logo-blue.png"
data-title="poster video attribute">
<source type="application/x-mpegurl" src="//edge.flowplayer.org/bauhaus.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/bauhaus.mp4">
</video>
</div>
 
<h2>background image poster</h2>
 
<div data-ratio="0.4167" class="fp-slim flowplayer is-closeable"
id="backgroundimage-poster">
<video data-title="background image poster">
<source type="application/x-mpegurl" src="//edge.flowplayer.org/bauhaus.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/bauhaus.mp4">
</video>
</div>
 
<h2>background color poster</h2>
 
<div data-ratio="0.4167" class="fp-slim flowplayer is-closeable"
id="backgroundcolor-poster">
<video data-title="background color poster">
<source type="application/x-mpegurl" src="//edge.flowplayer.org/bauhaus.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/bauhaus.mp4">
</video>
</div>

HTML