JSFiddle - React, Tailwind, and code Playground

by zodiacleo

HTML

<!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>Pixi Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.5/pixi.js"></script>
</head>

<body>
    <button onclick="clicked()">Click me</button>
    <video
        src="https://ak.picdn.net/shutterstock/videos/3909965/thumb/stock-footage-two-girls-are-playing-catch-up-with-flare.webm"></video>
        </body>

</html>

JavaScript

function clicked() {
            const app = new PIXI.Application();
            document.body.appendChild(app.view);
            const texture = PIXI.Texture.from('https://ak.picdn.net/shutterstock/videos/3909965/thumb/stock-footage-two-girls-are-playing-catch-up-with-flare.webm');
            texture.autoplay = false;
            const videoSprite = new PIXI.Sprite(texture);
            const videoControler = videoSprite._texture.baseTexture.resource.source;

            videoControler.oncanplaythrough = () => {
                videoControler.pause();
            }
            videoControler.onseeked = () => {
                console.log('seeked')
                texture.update();
                // download_sprite_as_png(app.renderer, videoSprite, 'hello.png');
            }
            const interval = setInterval(() => {
                console.log('current time', videoControler.currentTime);
                videoControler.currentTime = videoControler.currentTime + 1
            }, 100);

            setTimeout(() => {
                clearInterval(interval);
            }, 1000)

            app.stage.addChild(videoSprite);
        }

        function download_sprite_as_png(renderer, sprite, fileName) {
            renderer.extract.canvas(sprite).toBlob(function (b) {
                var a = document.createElement('a');
                document.body.append(a);
                a.download = fileName;
                a.href = URL.createObjectURL(b);
                a.click();
                a.remove();
            }, 'image/png');
        }