JSFiddle - React, Tailwind, and code Playground

by epinapala

HTML

<script src="//releases.flowplayer.org/7.2.4/flowplayer.min.js"></script>
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.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"> </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"> </p>
</div>

CSS

#hlsjsvod {
  background-image: url(//demos.flowplayer.com/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: 9/16,

    //...