Flowplayer · hlsjs plugin

VOD

player engine:

video type:

 

Video courtesy of Figs In Wigs

Live

Note: the stream is not available with https at the moment, so please use the http version of the demo


player engine:

video type:

 

The Flowplayer hlsjs-lite engine allows to play HLS streams in browsers which do not support HLS. And it does so without the need for Flash. This results in a performance improvement and avoids increasing restrictions on Flash imposed by browser manufacturers and in-house company policies. Simply by including the hls.js client library the widest possible audience range enjoys the benefits of Adaptive Bit Rate streaming (ABR).

Advantages over Dash (a similar technology):

Compare with the dashjs plugin.

Playback relies on the MediaSource-feature of browsers and the MediaSource implementation must reliably support segmented MPEG-4 video so hls.js can handle it. Your browser: .

The hlsjs-lite engine interacts with the hls.js client library.

Source picking order

  1. HLS (ABR) via hlsjs engie: Chrome 34+, Firefox 42+, Internet Explorer 11+, Opera 30+, Chrome 34+ for Android
  2. HLS (ABR) generic: Safari, iOS, most mobile devices
  3. HLS (ABR) Flash: browsers with Flash enabled
  4. WEBM (fallback)
  5. MP4 (fallback)

<head/>

The following JavaScript assets are loaded in the HEAD section of the page:

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.2.4/flowplayer.min.js"></script>
 
<!-- load the Flowplayer hlsjs engine (light), including hls.light.js -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

HTML

<style>

#hlsjsvod {
background-image: url(//demos.flowplayer.com/media/img/figsinwigs.jpg);
background-color: #f60;
}
#hlsjslive {
background-color: #2f2f4f;
}

CSS

<script>

Then the player can be installed as usual:

/* global event listeners for demo purposes, omit in production */
flowplayer(function (api, root) {
var instanceId = root.getAttribute("data-flowplayer-instance-id"),
engineInfo = document.getElementById("engine" + instanceId),
vtypeInfo = document.getElementById("vtype" + instanceId),
detail = document.getElementById("detail" + instanceId);
 
api.on("ready", function (e, api, video) {
var engineName = api.engine.engineName;
 
engineInfo.innerHTML = engineName;
vtypeInfo.innerHTML = video.type;
if (engineName === "flash") {
detail.innerHTML = "video source: " + video.src;
}
 
}).on("progress", function (e, api) {
var hlsengine = api.engine.hlsjs,
vtag = api.engine.engineName === "html5" && root.querySelector(".fp-engine");
 
if (hlsengine) {
var current = hlsengine.currentLevel,
level = hlsengine.levels[current],
info;
 
if (level) {
info = api.conf.clip.live
? level.bitrate / 1000 + " kbps"
: level.height + "p";
 
detail.innerHTML = "HLS level " + (current > -1
? current + ": " + info
: "");
}
 
} else if (vtag) {
// native playback, less informative
detail.innerHTML = "Resolution: " + vtag.videoWidth + "x" + vtag.videoHeight;
}
});
 
});
/* end global event listeners setup */
 

window.onload = function () {
 
flowplayer("#hlsjsvod", {
splash: true,
aspectRatio: "16:9",
 
clip: {
// enable hlsjs in desktop Safari for manual quality selection
// CAVEAT: may cause decoding problems with some streams!
hlsjs: {
safari: true
},
 
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/cilla_black_bean_sauce.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/cilla_black_bean_sauce.mp4" }
]
}
 
});
 

flowplayer("#hlsjslive", {
splash: true,
ratio: 9/16,
 
// stream only available via https:
// force loading of Flash HLS via https
swfHls: "https://releases.flowplayer.org/7.2.4/flowplayerhls.swf",
 
clip: {
// enable hlsjs in desktop Safari for manual quality selection
// CAVEAT: may cause decoding problems with some streams!
hlsjs: {
safari: true
},
live: true,
sources: [
{ type: "application/x-mpegurl",
src: "https://nasa-i.akamaihd.net/hls/live/253565/NASA-NTV1-Public/master.m3u8" }
]
}
 
});
 
};

JavaScript

<body/>

<h2 id="vod">VOD</h2>
 
<div id="hlsjsvod" class="fp-slim"></div>
 
<div class="info">
<p>player engine: <span id="engine0"></span></p>
 
<p>video type: <span id="vtype0"></span></p>
 
<p id="detail0">&nbsp;</p>
</div>
 
<p class="info">Video courtesy of <a href="https://www.figsinwigs.com/">Figs In Wigs</a></p>
 
<h2 id="live">Live</h2>
 
<div id="hlsjslive" class="fp-slim"></div>
 
<div class="info">
<p>player engine: <span id="engine1"></span></p>
 
<p>video type: <span id="vtype1"></span></p>
 
<p id="detail1">&nbsp;</p>
</div>

HTML