JSFiddle - React, Tailwind, and code Playground

using guide on http://demos.flowplayer.org/api/hlsjs.html

by dledle2

HTML

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.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>


<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>

CSS

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

JavaScript

/* 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:...