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/6.0.5/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

HTML

<style>

.flowplayer {
background-color: #2f2f4f;
}

CSS

<script>

The live property is set on the clip level.

window.onload = function () {
 
flowplayer("#player", {
ratio: 9/16,
splash: true,
embed: false,
hlsjs: {
// these streams work ok in desktop Safari
safari: true
},
hlsQualities: true,
 
// live stream only available via https:
// force loading of Flash HLS via https
swfHls: "https://releases.flowplayer.org/6.0.5/flowplayerhls.swf",
 
playlist: [{
live: 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("load", function (e, api, video) {
// enable API for feature
api.disable(!video.index);
 
// info for demo purposes only
document.getElementById("playing").innerHTML =
api.engine.engineName + " engine playing " + video.src;
 
});
 
};

JavaScript

<body/>

<div id="player"></div>
 
<!-- only for demo purposes -->
<p id="playing" class="info">&nbsp;</p>

HTML