canvas play video

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>캔버스에 비디오 재생하기</title>
<style type="text/css">
canvas {border:1px solid #000;}
</style>
</head>
<body>
<form>
<input type="file" id="video">
</form>
<canvas id="mycanvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var video = document.createElement("video");
video.addEventListener('loadeddata', function() {
  video.play();
  refresh();
});

$("#video").change(function(){
    videoLoad(this);
});

function videoLoad(videoSelector){
    if( ! videoSelector.files ) return;
    if( ! videoSelector.files[0] ) return;
    console.log("v");
    var reader = new FileReader();
    reader.onload = function(event){
        var src = event.target.result;
        video.src = src;
    };
    reader.readAsDataURL(videoSelector.files[0]);
}

function refresh(){
    ctx.drawImage(video,0,0,canvas.width,canvas.height);
    requestAnimationFrame(refresh);
}
</script>
</body>
</html>