Wideo na canvas: dodanie kontrolek


Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"


Listing

 window.requestAnimFrame = (function(callback){
             return window.requestAnimationFrame ||
             function(callback){
                 window.setTimeout(callback, 1000 / 60);
             };
         })();
         
         function drawFrame(ctx, video){
             ctx.drawImage(video, 0, 0);
             requestAnimFrame(function(){
                 drawFrame(ctx, video);
             });
         }
       
function handleButtons(evt){
	switch(evt.target.innerHTML){
	case 'Play':
		psy.play();
		break;
        case 'Stop':
		psy.pause();
		break;
	}
};	
         window.onload = function(){
             var cv = document.getElementById("canvas");
             var ctx = cv.getContext("2d");             
             var psy = document.getElementById("psy");
 	     var buttons = document.getElementsByTagName("button");
 		  for(var i=0; i<buttons.length;i++){
 			buttons[i].onclick = handleButtons;
			}
            drawFrame(ctx, psy);
           
        };
            
  <video   id="psy" style="display:none" width="640" 
           height="480" preload="none"> <source 
            src="media/psy1.mp4" type="video/mp4" >
			</video>
	<canvas id="canvas" width="640" height="480"
		style="border: 1px solid #238E3E;">Zawartość 
                  możesz zobaczyć w 
		przeglądarce obsługującej element <canvas> 
		z kontekstem "2d"</canvas>