Video Player with Clickable area to click part of the video and drag

app.js

/*
 *  Author: Mike Newell
 *  
 *  iwearshorts.com
 *  
 *  Feel free to copy and do whatever, but if you think it's cool, give me some credit.
 *
 **/
var App = function() {
    
    var video = {},
        hole = {},
        c1 = {},
        ctx1 = {},
        c3 = {},
        _c3 = {},
        ctx3 = {},
        offsetLeft = {},
        offsetTop = {},
        animating = false,
        clicked = false,
        width = 0,
        height = 0,
        offsetX = 0,
        offsetY = 0,
        mouseX = 0,
        mouseY = 0,
        circleDiameter = 200;
        
    this.init = function() {
                
        var embed =     '<video id="cVideo" id="video" autobuffer="true" autoplay="autoplay" tabindex="0">';
            embed +=        '<source src="https://s3.amazonaws.com/iwearshorts/videos/base-jump.webm" type="video/webm" />';
            embed +=        '<source src="https://s3.amazonaws.com/iwearshorts/videos/base-jump.mp4" type="video/mp4" />';
            embed +=        '<source src="https://s3.amazonaws.com/iwearshorts/videos/base-jump.ogv" type="video/ogg" />';
            embed +=    '</video>';
            
        $('body section').append(embed);
        
        // initalize some variables
        video = document.getElementById('cVideo'),
        hole = document.getElementById('hole'),
        c1 = document.getElementById('c1'),
        ctx1 = c1.getContext('2d'),
        c3 = document.getElementById('c3'),
        _c3 = $(c3),
        ctx3 = c3.getContext('2d'),
        offsetLeft = $('#c3').offset().left,
        offsetTop = $('#circle-demo-container').offset().top;
        
        c3.style.left = (circleDiameter * -1) + 'px';
        c3.style.bottom = (circleDiameter * -1) + 'px';
        c3.style.borderRadius = circleDiameter + 'px';
        _c3.attr({'width' : circleDiameter, 'height': circleDiameter});
        
        hole.style.left = (circleDiameter * -1) + 'px';
        hole.style.top = (circleDiameter * -1) + 'px';
        hole.style.width = circleDiameter + 'px';
        hole.style.height = circleDiameter + 'px';
        hole.style.borderRadius = circleDiameter + 'px';
        
        // event listeners
        video.addEventListener('playing', function(evt) {

            width = video.clientWidth;
            height = video.clientHeight;
            callback();

        }, false);
        
        $(video).on('timeupdate', function(evt) {
            
            var ct = Math.floor(evt.target.currentTime);
            
        });
        
        $(c3).on('mouseup', function(evt) {
            
            clicked = false;
            
            c3.style.width = circleDiameter + 'px';
            c3.style.height = circleDiameter + 'px';
            c3.style.top = (circleDiameter * -1) + 'px';
            c3.style.left = 0 + 'px';
            c3.style.zIndex = 35;
            c3.style.display = 'none';

            animating = false;

            hole.style.opacity = 0;
            hole.style.top = (circleDiameter * -1) + 'px';
            hole.style.left = (circleDiameter * -1) + 'px';
            hole.style.zIndex = 9;
        });
        
        video.addEventListener('mousedown', function(evt) {
            evt.preventDefault();
            
            clicked = true;
            animating = true;
            
            c3.style.display = 'block';
            
            offsetX = evt.clientX;
            offsetY = evt.clientY;
            
            console.dir(hole);
            
            hole.style.top = (offsetY - (circleDiameter / 2)) + 'px';
            hole.style.left = (offsetX - (circleDiameter / 2)) + 'px';
            hole.style.opacity = 1;
            
        }, false);
        
        $(window).on('mousemove', function(evt) {
            mouseX = evt.pageX;
            mouseY = evt.pageY;
            
        });


    };
    
    var callback = function() {
        
        computeFrame();
        setTimeout(function() {
            callback();
        }, 0);

    }

    var computeFrame = function() {
        
        if(clicked) {
            
            c3.style.top = ((mouseY - (circleDiameter / 2)) - offsetTop) + 'px';
            c3.style.left = ((mouseX - (circleDiameter / 2)) - offsetLeft) + 'px';

        }
        
        ctx1.drawImage(video, 0, 0, width, height);
        
        var box = ctx1.getImageData(((offsetX - (circleDiameter / 2))), ((offsetY - (circleDiameter / 2))), circleDiameter, circleDiameter);

        if(animating) {
            ctx3.putImageData(box, 0, 0);
        }

        return;
    };
}

index.html

<!--
Author: Mike Newell

iwearshorts.com

Feel free to copy and do whatever, but if you think it's cool, give me some credit.

-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <title>Test</title>
        <style>

            #circle-demo-container {
                width: 640px;
                height: 390px;
                position: relative;
            }

            #cVideo {
                position: absolute;
                top: 0;
                left: 0;
                width: 640px;
                height: 390px;
            }

            #c1 {
                position: absolute;
                top: 0;
                right: 0;
                display: none;
            }

            #c3 {
                position: absolute;
                z-index: 35;
                -moz-box-shadow:    3px 3px 20px -4px #000;
                -webkit-box-shadow: 3px 3px 20px -4px #000;
                box-shadow:         3px 3px 20px -4px #000;
            }


            #hole {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                z-index: 9;
                background: white;

                -moz-box-shadow:    inset 3px 3px 20px -4px #000;
                -webkit-box-shadow: inset 3px 3px 20px -4px #000;
                box-shadow:         inset 3px 3px 20px -4px #000;

                -webkit-transition: opacity .5s ease;
                -moz-transition: opacity .5s ease;
                -o-transition: opacity .5s ease;
                transition: opacity .5s ease;
            }

        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.path.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script>
            (function($) {

                $(window).load(function() {

                    var app = new App();

                    app.init();

                });

            })(jQuery);
        </script>
    </head>
    <body>
        <div id="wrap">
            <header>
                
            </header>
            <section>
                <div id="circle-demo-container">
        
                    <canvas id="c1" width="640" height="390"></canvas>

                    <canvas id="c3"></canvas>

                    <div id="hole"></div>

                </div>
            </section>
            <footer>
                
            </footer>
        </div>
    </body>
</html>