JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<html>
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.6/shaka-player.compiled.debug.js"></script>
  </head>
  <body>
  </body>
</html>

JavaScript

(function() {
	var manifestUrl = "https://528dc4ef17d725ed.mediapackage.eu-central-1.amazonaws.com/out/v1/a60d84a4018f462389336c917a34fd14/index.m3u8";

	shaka.polyfill.installAll();

	if(!shaka.Player.isBrowserSupported()) {
		throw new Error("Shaka player not supported on this device!");
	}

	var video = document.createElement("video");
	video.classList.add("shaka_player");
	document.body.appendChild(video);
	var player = new shaka.Player(video);

	video.style.position = "absolute";
	video.style.left = "0px";
	video.style.top = "0px";
	video.setAttribute("width", "320");
	video.setAttribute("height", "240");
	video.setAttribute("controls", "");
	video.style.visibility = "visible";

	player.load(
		manifestUrl,
		0
	).then(function onVideoLoaded() {
		video.play();
	}).catch(function onVideoLoadError(error) {
		console.error(error);
	});
})();