JSFiddle - React, Tailwind, and code Playground

by mmis1000

HTML

<video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="true"></video>
<div class='container'>
    <div class='container' id='rotate2'>
        <canvas id="canvas" height='134px' width='240px'></canvas>
    </div>
    <button id='play'>click</button>
</div>
<br>
<input type='text' id='run' value='Hello World!'></input>

CSS

* {
    border:0px;
    padding:0px;
    margin:0px;
}
video {
    display:none;
}
#canvas {
    width:240px;
    animation:rotateZ 2.5s linear 0s infinite;
    -webkit-animation:rotateZ 2.5s linear 0s infinite;
}
#rotate2 {
    animation:rotateY 5s linear 0s infinite;
    -webkit-animation:rotateY 5s linear 0s infinite;
}
.container {
    perspective: 360px;
    width:240px;
    height:auto;
}
#run {
    width:240px;
    border:1px solid;
}
@keyframes rotateY {
    0% {
        transform:rotateY(0deg);
    }
    100% {
        transform:rotateY(360deg);
    }
}
@keyframes rotateZ {
    0% {
        transform:rotateZ(0deg);
    }
    100% {
        transform:rotateZ(360deg);
    }
}
-webkit-@keyframes rotateY {
    0% {
        transform:rotateY(0deg);
    }
    100% {
        transform:rotateY(360deg);
    }
}
-webkit-@keyframes rotateZ {
    0% {
        transform:rotateZ(0deg);
    }
    100% {
        transform:rotateZ(360deg);
    }
}

JavaScript

$(function () {
    var i = 0;
    var text = 'Hello World!';
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var video = document.getElementById('video');
    ctx.font = "20px Georgia";
    video.addEventListener('play', function () {
        console.log(Date.now());
        var $this = this; //cache
        (function loop() {
            if (!$this.paused && !$this.ended) {
                ctx.drawImage($this, 0, 0, 240, 134, 0, 0, 240, 134);
                setTimeout(loop, 1000 / 30); // drawing at 30fps

                ctx.fillText(text, i % 360 - 120, 75);
                i++
            }
        })();
    }, 0);
    //video.play();
    $('#run').keyup(function () {
        text = $(this).val();
    })
    $('#play').click(function(){
        video.play();
        console.log(Date.now());
    })
    
});