Android drawImage to canvas from paused video

I'm having a really weird problem and I can't tell if it's an Android issue or something.

Basically I have a video that is playing and every time a pause is selected, I want to take a screenshot using the HTML5 canvas technique drawImage()

and add it to the canvas. This works fine in the first pause, but after I start the video again and in any subsequent pause, it drawImage()

draws the image the first time I stop on the canvas. The code works fine in Chrome / Firefox, but not on my Android device.

I have included the code below, any advice would be great.

document.addEventListener('DOMContentLoaded', function(){

    document.getElementById('v').addEventListener('pause',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }


        //i even remove the canvas from the stage
        $( '#c' ).remove();

        //and re add a canvas to the dom
        $('#canvasdrawer').html('<canvas id="c"></canvas>');

        var canvas = document.getElementById('c');
        var context = canvas.getContext('2d');

        var cw = Math.floor(canvas.clientWidth / 100);
        var ch = Math.floor(canvas.clientHeight / 100);
        canvas.width = cw;
        canvas.height = ch;

        setTimeout(function(){ 
            alert("timeout running");
            //i have even tried to put it in a timeout to almost force refresh but that doesnt help
            context.drawImage(document.getElementById('v'),0,0,cw,ch); 
        }, 2000);

    }

},false);

      

+3


source to share





All Articles