JSFiddle - React, Tailwind, and code Playground

by epinapala

HTML

<!-- Flowplayer skin -->
<link rel="stylesheet" href="http://releases.flowplayer.org/7.0.4/skin/skin.css">

<!-- Minimal styling for this standalone page, can be removed -->
<link rel="stylesheet" href="http://demos.flowplayer.org/media/css/demo.css">
<!-- Syntax highlighting of source code, can be removed -->
<link rel="stylesheet" href="http://demos.flowplayer.org/media/css/pygments.css">
<!-- Flowplayer library -->
<script src="http://releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
<!-- The hlsjs plugin for playback of HLS without Flash in modern browsers -->
<script src="http://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>


   <div id="content">

      <h1>Flowplayer · hlsjs plugin</h1>

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

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

<div class="doc">
  <p>The Flowplayer <a href="https://flowplayer.com/docs/plugins.html#hlsjs">hlsjs plugin</a>
  allows to play <a href="https://flowplayer.com/docs/setup.html#hls">HLS streams</a> in browsers
  which do not support HLS. And it does so without the need for
  <a href="https://flowplayer.com/docs/setup.html#flash-hls">Flash</a>. This results in a
  performance improvement and avoids increasing restrictions on Flash imposed by
  <a href="https://github.com/flowplayer/flowplayer/issues/922">browser manufacturers</a> and
  in-house company policies. Simply by <a href="#javascript-setup">loading the plugin</a> the widest
  possible audience range enjoys the benefits of Adaptive Bit Rate streaming
  (<a href="https://en.wikipedia.org/wiki/Adaptive_bitrate_streaming">ABR</a>).</p>

  <p>Advantages...

CSS

#hlsjsvod {
  background-image: url(http://drive.cdn.flowplayer.org/202777/84049-snap.jpg);
}

#hlsjslive {
  background-color: #2f2f4f;
}

.hlsjs-supported {
  font-weight: bold;
}

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,
    ratio: 5 / 12,

    // manual HLS level selection for Drive videos
    hlsQualities: "drive",

    clip: {
      sources: [{
        type: "application/x-mpegurl",
        src: "//cdn.flowplayer.org/202777/84049-bauhaus.m3u8"
      }, {
        type: "video/mp4",
        src: "//cdn.flowplayer.org/202777/84049-bauhaus.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.0.4/flowplayerhls.swf",

    clip: {
      live:...