Element video – dodanie kontrolek (HTML5 canvas)

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="auto">
				<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>