JSFiddle - React, Tailwind, and code Playground

by zodiacleo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<button class="load-button">Load video button</button>
		<input class="time-input" />
		<button class="seek-button">Seek button</button>
		
	</body>
</html>

JavaScript

function init() {
	const app = new PIXI.Application({
		width: 800,
		height: 600,
		backgroundColor: 0xffff00,
	});
	return app;
}

function loadVideo() {
	return new Promise((resolve, reject) => {
		const videoElement = document.createElement('video');
		videoElement.addEventListener('canplaythrough', function () {
			console.log(`HTMLVideoElement fired canplaythrough event!`);
			console.log(`HTMLVideoElement duration: ${videoElement.duration}`);
			resolve(videoElement);
		});
		videoElement.addEventListener('error', function () {
			console.log(`Error while loading video element`);
		});
		videoElement.loop = true;
		videoElement.crossOrigin = 'anonymous';
		videoElement.src =
			'https://d1c7ic18uy0m4b.cloudfront.net/previews-480/Coconut1617826423659.webm';
	});
}

const app = init();

let videoElement= null;
document.body.appendChild(app.view);

const loadVideoButton = document.querySelector('.load-button');
loadVideoButton.addEventListener('click', async function () {
	videoElement = await loadVideo();
	const videoTexture = PIXI.Texture.from(videoElement);
	const videoSprite = new PIXI.Sprite(videoTexture);
	// videoSprite.scale = new PIXI.ObservablePoint(() => {}, null, 0.5, 0.5);
	app.stage.addChild(videoSprite);

	videoElement.play();
});

const timeInputElement = document.querySelector(
	'.time-input'
);
const seekButton = document.querySelector('.seek-button');
seekButton.addEventListener('click', function () {
	const timeInSeconds = parseInt(timeInputElement.value, 10);
	videoElement.currentTime = timeInSeconds;
});

/* resources.BaseImageResource.prototype.upload = function (renderer, baseTexture, glTexture, source) {
    const gl = renderer.gl;
    const width = baseTexture.realWidth;
    const height = baseTexture.realHeight;

    source = source || this.source;

    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha);

    // add this line, check for video
    const isVideo = !!source.videoWidth
    if (!isVideo &&...