JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<script src="https://vjs.zencdn.net/6.2/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>
<script src="https://cdn.rawgit.com/videojs/videojs-youtube/master/src/Youtube.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.4.1/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.8.1/videojs-dash.min.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/6.2/video-js.css">
<script src="https://skylgenet.nl/videojs-flash.min.js"></script>
<div id="instructions">

  <video id="vid1" class="video-js vjs-default-skin vjs-fluid" poster="" width="1280" height="720" controls preload="none" data-setup='{ "techOrder": ["html5"], "sources": [{ "type": "application/x-mpegURL", "src": "https://videodelivery.net/1fbd5d7253687e607fa61abb06338a97/manifest/video.m3u8"}]}'></video>

</div>

CSS

#instructions {
    max-width: 1280px;
    text-align: left;
    margin: 0px auto;
  }

  #instructions textarea {
    width: 100%;
    height: 100px;
  }

  /* Show the controls (hidden at the start by default) */

  .video-js .vjs-control-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  /* Make the demo a little prettier */

  body {
    background: #222;
    text-align: center;
    color: #aaa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  a,
  a:hover,
  a:visited {
    color: #76DAFF;
  }

JavaScript

/* VIDEOJS */
// declare object for video
var vgsPlayer, poster;

vgsPlayer = videojs('vid1');

//vgsPlayer.poster('https://img.youtube.com/vi/aqz-KE-bpKQ/maxresdefault.jpg');

function vsgLoadVideo(vidURL, poster) {

  var type = getType(vidURL);

  console.log(type);

  vgsPlayer.src({
    "src": vidURL,
    "type": type
  });
  if (poster)
    vgsPlayer.poster(poster);

  vgsPlayer.play();

  return false;

}

var rtmp_suffix = /^rtmp:\/\//;
var hls_suffix = /\.m3u8/;
var mp4_suffix = /\.(mp4|m4p|m4v|mov)/i;
var hds_suffix = /\.f4m/;
var dash_suffix = /\.mpd/;
var flv_suffix = /\.flv/;
var webm_suffix = /\.webm/;

var mpeg_suffix = /\.(mp3|m4a)/i;
var ogg_suffix = /\.ogg/;

var yt_suffix = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var dm_suffix = /\.?dailymotion.com/;
var vm_suffix = /\.?vimeo.com/;


function getType(url) {

  /* AUDIO */
  if (mpeg_suffix.test(url))
    return 'audio/mpeg';
  if (ogg_suffix.test(url))
    return 'audio/ogg';
  if (dash_suffix.test(url))
    return 'application/dash+xml';
  if (rtmp_suffix.test(url))
    return 'rtmp/mp4';
  if (hls_suffix.test(url))
    return 'application/x-mpegurl';
  if (mp4_suffix.test(url))
    return 'video/mp4';
  if (hds_suffix.test(url))
    return 'application/adobe-f4m';
  if (flv_suffix.test(url))
    return 'video/flv';
  if (webm_suffix.test(url))
    return 'video/webm';
  if (yt_suffix.test(url)) {
    //alert(url.match(yt_suffix)[2]);
    //player.poster(ytmaxres(url.match(yt_suffix)[2]));
    //alert(ytmaxres(url.match(yt_suffix)[2]));
    return 'video/youtube';
  }
  if (dm_suffix.test(url))
    return 'video/dailymotion';
  if (vm_suffix.test(url))
    return 'video/vimeo';

  console.log('could not guess link type: "' + url + '" assuming mp4');
  return 'video/mp4';
};

function getExt(ext) {

  //if (ext == "youtube") ext = "mp4";
  if (ext == "mp4" || ext == "m4v") ext = "m4v";
  if (ext == "ogg" || ext == "ogv") ext = "oga";
  if (ext == "webm") ext =...