JSFiddle - React, Tailwind, and code Playground

by Robert Washbourne

HTML

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">

<div id="video_info">
</div>

<div style="width: 100%; max-width: 960px;" id="video_container">
  <video-js autoplay id="video-player" class="video-js vjs-default-skin vjs-16-9" preload="auto" poster="https://thumbs.gfycat.com/WeakHonestIbex-size_restricted.gif">
    <source src="https://bs.raw.sh:5443/WebRTCApp/streams/162450245072971049992561.m3u8" type="application/x-mpegURL">
  </video-js>
</div>

<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>

<!-- <script>
var player = videojs('stream');
player.play();
</script> -->

CSS

html, body, .video-js {
  margin: 0 auto;
}

body {
	background-color:#eee;	
	overflow:hidden;
}

#video_container{
	display: none;
}

#video_info {
	color:#555;
	position:relative;
	top:30%;
	text-align:center;
	font-size:36px;
	font-family:sans-serif;
	line-height:45px;
	height:100%;
}

JavaScript

(function(self) {
  'use strict';

  if (self.fetch) {
    return
  }

  var support = {
    searchParams: 'URLSearchParams' in self,
    iterable: 'Symbol' in self && 'iterator' in Symbol,
    blob: 'FileReader' in self && 'Blob' in self && (function() {
      try {
        new Blob()
        return true
      } catch(e) {
        return false
      }
    })(),
    formData: 'FormData' in self,
    arrayBuffer: 'ArrayBuffer' in self
  }

  if (support.arrayBuffer) {
    var viewClasses = [
      '[object Int8Array]',
      '[object Uint8Array]',
      '[object Uint8ClampedArray]',
      '[object Int16Array]',
      '[object Uint16Array]',
      '[object Int32Array]',
      '[object Uint32Array]',
      '[object Float32Array]',
      '[object Float64Array]'
    ]

    var isDataView = function(obj) {
      return obj && DataView.prototype.isPrototypeOf(obj)
    }

    var isArrayBufferView = ArrayBuffer.isView || function(obj) {
      return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
    }
  }

  function normalizeName(name) {
    if (typeof name !== 'string') {
      name = String(name)
    }
    if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) {
      throw new TypeError('Invalid character in header field name')
    }
    return name.toLowerCase()
  }

  function normalizeValue(value) {
    if (typeof value !== 'string') {
      value = String(value)
    }
    return value
  }

  // Build a destructive iterator for the value list
  function iteratorFor(items) {
    var iterator = {
      next: function() {
        var value = items.shift()
        return {done: value === undefined, value: value}
      }
    }

    if (support.iterable) {
      iterator[Symbol.iterator] = function() {
        return iterator
      }
    }

    return iterator
  }

  function Headers(headers) {
    this.map = {}

    if (headers instanceof Headers) {
      headers.forEach(function(value, name) {
        this.append(name, value)
      }, this)
    } else if...