Element video (HTML5 canvas)

Wideo na canvas

Jeśli nie widzisz automatycznie odtwarzającego się wideo – sprawdź ustawienia przeglądarki

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);
     });
 }
  window.onload = function(){
     var cv = document.getElementById("canvas");
     var ctx = cv.getContext("2d");
     var video = document.getElementById("psy");
     drawFrame(ctx, video);
 };
    

 <video   id="psy" style="display:none" width="640" height="480" autoplay 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>