JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<title>HTML5VideoYTControls-V03</title>

<script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="https://code.createjs.com/movieclip-0.7.1.min.js"></script>


<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	exportRoot = new lib.HTML5VideoYTControlsV03();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();
	stage.enableMouseOver();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}
</script>


<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="700" height="500" style="background-color:#FFFFFF"></canvas>
</body>

JavaScript

(function (lib, img, cjs) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
	width: 700,
	height: 500,
	fps: 24,
	color: "#FFFFFF",
	manifest: []
};



// symbols:



(lib.VolumeSliderBase = function() {
	this.initialize();

	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#CCCCCC").s().p("AjHAKIAAgTIGOAAIAAATg");
	this.shape.setTransform(20,0);

	this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,-1.1,40,2.2);


(lib.VolumeControlSliderHead = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#666666").s().p("AgiBUQgPgOAAgUIAAhjQAAgUAPgPQAPgOATAAQAUAAAPAOQAPAPAAAUIAABjQAAAUgPAOQgPAQgUgBQgTABgPgQg");

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(3).to({scaleX:2.22,scaleY:1.31},0).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-5,-10,10,20);


(lib.Playhead = function() {
	this.initialize();

	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f().s("#666666").ss(1,1,1).p("ABLAAQAAAegWAXQgXAWgeAAQgdAAgXgWQgWgXAAgeQAAgdAWgXQAXgWAdAAQAeAAAXAWQAWAXAAAdg");
	this.shape.setTransform(7.5,7.5);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.rf(["#EEEEEE","#484848"],[0.639,0.925],0,0,0,0,0,8.2).s().p("Ag0A0QgVgVgBgfQABgdAVgXQAXgVAdgBQAfABAVAVQAXAXAAAdQAAAfgXAVQgVAXgfAAQgdAAgXgXg");
	this.shape_1.setTransform(7.5,7.5);

	this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-1,-1,17,17);


(lib.PlayButton = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// timeline functions:
	this.frame_0 = function() {
		this.stop();
	}

	// actions tween:
	this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(2));

	// Tween
	this.shape = new...