Flowplayer · VOD pre-roll - Live feature
<head/>
For smoother HLS playback in modern browsers we load the hlsjs plugin.
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.2.4/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine (light) -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>
<style>
.flowplayer {
background-color: #2f2f4f;
}
.flowplayer .fp-color-play {
fill: #eee;
}
/* hide no-op control icons during pre-roll */
.flowplayer.is-disabled .fp-airplay,
.flowplayer.is-disabled .fp-chromecast,
.flowplayer.is-disabled .fp-playbtn,
.flowplayer.is-disabled .fp-volume,
.flowplayer.is-disabled .fp-fullscreen {
display: none;
}
<script>
The live
property is set on the
clip level.
window.onload = function () {
flowplayer("#player", {
ratio: 9/16,
splash: true,
share: false,
hlsjs: {
// these streams work ok in desktop Safari
safari: true
},
// live stream only available via https:
// force loading of Flash HLS via https
swfHls: "https://releases.flowplayer.org/7.2.4/flowplayerhls.swf",
// no playlist UI to make pre-roll -> feature mandatory
customPlaylist: true,
playlist: [{
live: false,
hlsQualities: false,
title: "VOD Pre-roll",
sources: [
{ type: "application/x-mpegurl",
src: "https://edge.flowplayer.org/moon.m3u8" }
]
}, {
live: true,
title: "Live Feature",
sources: [
{ type: "application/x-mpegurl",
src: "https://nasa-i.akamaihd.net/hls/live/253565/NASA-NTV1-Public/master.m3u8" }
]
}]
}).on("ready", function (e, api, video) {
// disable API for pre-roll
api.disable(!video.index);
// info for demo purposes only
document.getElementById("playing").innerHTML =
api.engine.engineName + " engine playing " + video.src;
});
};
<body/>
<div id="player"></div>
<!-- only for demo purposes -->
<p id="playing" class="info"> </p>