Flowplayer · Traditional play button

Traditional onscreen play button on pause

Usually Flowplayer 7 displays an onscreen play button only until playback is initiated. Pause and play action indicators alert to the change of player state at the moment of pausing or resuming. The content is visible without an obstruction in the center in paused state while the controlbar featuring a play button is constantly visible.

The traditional approach with a centered onscreen play button can be achieved with one CSS rule and a minimal customization of the pause event in the global JavaScript setup.

<head/>

<style>

/* never show pause action indicator */
.flowplayer .fp-pause {
display: none;
}
 
/* red brand color */
.flowplayer .fp-color {
background-color: #f00;
}
/* emphasize play button */
.flowplayer .fp-color-play {
fill: #f00;
}
 
.flowplayer {
background-image: url(/media/img/nature-timelapse.jpg);
}

CSS

<script>

flowplayer(function (api, root) {
// keep large scaled play button visible
api.on("pause", function () {
root.querySelector(".fp-play").className += " fp-visible";
});
});

JavaScript

<body/>

<div class="flowplayer fp-minimal no-volume"
data-aspect-ratio="12:5"
data-dash-qualities="false"
data-hls-qualities="false">
<video>
<source type="application/dash+xml" src="//edge.flowplayer.org/nature.mpd">
<source type="application/x-mpegurl" src="//edge.flowplayer.org/nature.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/nature.mp4">
</video>
</div>

HTML