fabric.js video player

Fabricjs video player

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.js"></script>
<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<canvas id="c" width="600" height="400" class="c"></canvas>

CSS

.canvas-container {
    border: 1px solid #999;
}

JavaScript

var canvas = new fabric.Canvas('c', {
	// preserveObjectStacking: true
});
//let vid = $('#video2');
let vid = $('<video>').hide().attr('class', 'wb-video')
	.attr('poster', '//peach.blender.org/wp-content/uploads/evil-frank.png?x11217')
	.attr("width", 640).attr("height", 360)
	.append($('<source>').attr('type', 'video/mp4')
		.attr('src', '//www.quirksmode.org/html5/videos/big_buck_bunny.mp4'));
var mainColor = '#ff6600';

canvas.on({
	'wb:object:created': function() {}
	, 'object:modified': function() {}
	, 'object:added': function() {}
	, 'object:selected': function() {}
	, 'path:created': function() {}
});

$('body').append(vid);

new fabric.Image.fromURL(vid.attr('poster'), function(poster) {
	new fabric.Image(vid[0], {}, function (video) {
		let rad = 20;
		video.visible = false;
		poster.width = video.width;
		poster.height = video.height;
		let group = new fabric.Group([video, poster], {
			left: 10
			, top: 10
			, subTargetCheck: true
			, width: video.width
			, height: video.height
			, objectCaching: false
		});
		let paused = true;
		let trg = new fabric.Triangle({
			left: group.left + 2.7 * rad
			, top: group.top + group.height - 2.5 * rad
			, visible: paused
			, angle: 90
			, width: rad
			, height: rad
			, stroke: mainColor
			, fill: mainColor
		});
		let rectPause1 = new fabric.Rect({
			left: group.left + 1.6 * rad
			, top: group.top + group.height - 2.5 * rad
			, visible: !paused
			, width: rad / 3
			, height: rad
			, stroke: mainColor
			, fill: mainColor
		});
		let rectPause2 = new fabric.Rect({
			left: group.left + 2.1 * rad
			, top: group.top + group.height - 2.5 * rad
			, visible: !paused
			, width: rad / 3
			, height: rad
			, stroke: mainColor
			, fill: mainColor
		});
		let play = new fabric.Group([
				new fabric.Circle({
					left: group.left + rad
					, top: group.top + group.height - 3 * rad
					, radius: rad
					, stroke: mainColor
					, strokeWidth: 2
					, fill: null
				})
				, trg, rectPause1,...