Flowplayer · Delayed video start

 

<head/>

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

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

HTML

<style>

#player {
background-image: url(//flowplayer.org/media/img/demos/functional.jpg);
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
#player {
background-image: url(//flowplayer.org/media/img/demos/functional@x2.jpg);
}
}

CSS

<script>

Note: On devices which do not allow autoplay the video must be loaded immediately. In this case we simulate the loading state in paused state.

On devices which do not inline playback the generic player waits on the first frame, but during that period playback can be started manually.

window.onload = function () {
var autoplayallowed = flowplayer.support.firstframe,
container = document.getElementById("player");
 
flowplayer(container, {
splash: true,
ratio: 5/12,
clip: {
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/functional.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/functional.mp4" }
]
}
 
}).one("load progress", function(e, api, video) {
if (autoplayallowed && e.type == "load") {
e.preventDefault();
api.loading = false;
 
} else if (!autoplayallowed && e.type == "progress") {
// hack: pause after load at first progress
api.pause();
 
}
 
if (autoplayallowed && e.type == "load" || !autoplayallowed && e.type == "progress") {
var seconds = 5,
state = document.getElementById("loading"),
 
timer = setInterval(function() {
seconds--;
state.innerHTML = "Your video will start in " + seconds + " seconds ...";
 
if (seconds === 0) {
clearInterval(timer);
api.load();
 
if (!autoplayallowed && e.type == "progress") {
// hack to hide engine in paused state
container.className = container.className.replace("hide-engine", "");
 
}
 
state.innerHTML = "Your video is now playing.";
}
}, 1000);
}
 
}).one("ready", function (e, api) {
if (!autoplayallowed) {
// hack to hide engine and pretend loading in paused state
container.className = container.className + " is-splash is-loading";
}
 
});
 
};

JavaScript

<body/>

<div id="player"></div>
 
<p id="loading" class="info">&nbsp;</p>

HTML