Flowplayer · Disable pausing

Movie cannot be paused, while all other UI functionality is available.

<head/>

<style>

/* default cursor for screen */
.flowplayer.is-ready .fp-ui {
cursor: default;
}
/* re-instate pointer cursor for controls
* and header control elements
* plus entirely in finished state for replay
*/
.flowplayer.is-ready .fp-controls,
.flowplayer.is-ready .fp-header>*,
.flowplayer.is-finished .fp-ui {
cursor: pointer;
}
/* do not show play/pause button in controlbar */
.flowplayer .fp-playbtn {
display: none;
}
/* do not show on-screen pause action indicator on finish */
.flowplayer .fp-pause {
display: none;
}
 
.flowplayer {
background-image: url(//flowplayer.org/media/img/demos/playful.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.flowplayer {
/* retina splash image */
background-image: url(//flowplayer.org/media/img/demos/functional@x2.jpg);
}
}

CSS

<script>

The pause event cannot be cancelled like seek in a 'before' event. Therefore we have prevent the propagation of the click events which would trigger pausing.

// do not allow pausing by hitting space
flowplayer.conf.keyboard = false;
 

flowplayer(function (api, root) {
 
// disable click on screen
$(".fp-ui", root).click(function (ev) {
if (!api.splash && !api.poster && !api.finished) {
// but do not disable click on other UI elements
// i.e. confine to parent element with class="fp-ui"
if ($(ev.target).hasClass("fp-ui")) {
ev.stopPropagation();
}
}
});
 
// show on-screen play button on finish for replay
api.on("finish", function () {
root.querySelector(".fp-play").className += " fp-visible";
});
});

JavaScript

<body/>

<div class="flowplayer fp-playful" data-ratio="0.4167">
<video>
<source type="video/webm" src="//edge.flowplayer.org/playful.webm">
<source type="video/mp4" src="//edge.flowplayer.org/playful.mp4">
</video>
</div>

HTML