JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://ableplayer.github.io/ableplayer/thirdparty/modernizr.custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ableplayer.github.io/ableplayer/thirdparty/js.cookie.js"></script>
<link rel="stylesheet" href="https://ableplayer.github.io/ableplayer/build/ableplayer.min.css">
<script src="https://ableplayer.github.io/ableplayer/build/ableplayer.js"></script>

JavaScript

function addFrame() {
  var frame = document.createElement("video")
  frame.id = "1"
  frame.setAttribute("preload", "")

  var source = document.createElement("source")
  source.src = "http://content.noodlestream.com.s3.amazonaws.com/custom-courses/AMZ-1.0/video/5.mp4"
  source.type = "video/mp4"

  var track = document.createElement("track")
  track.setAttribute("label", "English")
  track.setAttribute("kind", "subtitles")
  track.src = "https://ableplayer.github.io/ableplayer/media/wwa_captions_en.vtt"
  track.setAttribute("srclang", "en")

  frame.appendChild(source)
  frame.appendChild(track)

  return frame
}

var frame = addFrame();

document.body.appendChild(frame);

var player = new AblePlayer($(frame));