How can I insert image on html video tag while playing the main video.

I would think to solve the problem in the following way (as a first attempt):

Create a video tag, then make reference to the video tag using some javascript code.
Create a canvas and draw the video content in it, then create another canvas which will hold the advertisement image. On the desired time we will draw the second canvas content on top of the first one.
The code should look like below:

var startTime = Date.now();
$(function () {
    var canvas = document.getElementById('canvas');
    var canvas2 = document.createElement('canvas');    
    canvas2.setAttribute('id', 'canvas2');
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    var img = new Image();
    img.src = "...";
    img.onload = function() {
        ctx2.drawImage(img);
    }

    var video = document.getElementById('video');

    video.addEventListener('play', function () {
        var $this = this; //cache
        (function loop() {
            var currentTime = Date.now() - startTime;
            if (!$this.paused && !$this.ended) {
                if (currentTime > 3600)  {
                    ctx.drawImage(canvas2, 0, canvas.height - 100);
                } else {
                    document.removeElementById('canvas2');
                }                    

                ctx.drawImage($this, 0, 0);
                setTimeout(loop, 1000 / 30); // drawing at 30fps
            }
        })();
    }, 0);
});
​

I found a nice an thoroughly explained article at html5doctor on the process. However i didn't check their solution. The offered solution is not complete, i sketch only the basic idea how i would approach the problem.