JSFiddle - React, Tailwind, and code Playground

integration synchro image sur video (avec create.js)

by Lio Vousk-prod.

HTML

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<canvas id="hm_animcanvas"></canvas>
<p style="position:absolute; bottom: 0; left: 3%; margin:0;">
    <input id="play" type="button" value="Play" onclick="playVideo()" style="font:18pt Helvetica" />
</p>

CSS

#hm_animcanvas {
    position: absolute;
    width: 400px;
    height: 225px;
    /*pointer-events: none;*/
}

JavaScript

var stage, myCanvas, bitmap, strpos, tabpos, starttick, lastTime, curtime, videoBitmap, playButton, lVideo, factor, curframe;

$(document).ready(function () {
    init();
});

function init() {
    lastTime = -1;
    myCanvas = $("#hm_animcanvas").get(0);
    myCanvas.width = myCanvas.clientWidth;
    myCanvas.height = myCanvas.clientHeight;
    factor = myCanvas.width / 1280;
    console.log("size factor = ", factor);
    playButton = document.getElementById("play");
    stage = new createjs.Stage(myCanvas);

    initTab();

    videoBitmap = createVideoBitmap(400, 225, "");
    videoBitmap.scaleX = factor;
    videoBitmap.scaleY = factor;
    stage.addChild(videoBitmap);


    bitmap = new createjs.Bitmap("http://hapticmedia.fr/_workdev/cusvird/hm_cusvird/media/bennet.png");
    bitmap.regX = 52;
    bitmap.regY = 61.5;
    bitmap.snapToPixel = false;
    bitmap.scaleX = factor;
    bitmap.scaleY = factor;
    stage.addChild(bitmap);

    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(25);
    createjs.Ticker.addEventListener("tick", handleTick);
    createjs.Ticker.setPaused(true);
}

function handleTick(event) { // Actions carried out each frame 
    if (!event.paused) {
        curtime = lVideo.currentTime;
        if (curtime !== lastTime) {
            //console.log('time: ' + curtime);

            curframe = ((Math.floor(curtime) * 25) + 1) + (Math.floor((curtime - Math.floor(curtime)) * 25) + 1) -1;
            //console.log('curframe: ' + curframe);
            curframe = curframe * 2 - 1;
            if (curframe < tabpos.length) {
                bitmap.x = tabpos[curframe - 1] * factor;
                bitmap.y = tabpos[curframe] * factor;
            }

            lastTime = curtime;
            stage.update();
        }

    }
}

function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');
    source.src = src;
    source.type = type;
    element.appendChild(source);
}

function...