Element video – migawki (HTML5 canvas)

Wideo na canvas: migawki

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

Listing

<video id="psy" width="640" height="480" preload="auto"
			style="border: 1px solid #238E3E;">
			<source src="media/psy1.mp4" type="video/mp4">
		</video>
		<div>
			<button>Play</button>
			<button>Stop</button>
			<button>Migawka</button>
		</div>
		<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>
            

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;
	}
	function handleButtons(evt) {
		switch (evt.target.innerHTML) {
		case 'Play':
			psy.play();
			break;
		case 'Stop':
			psy.pause();
			break;
		case 'Migawka':
			var psy1 = document.getElementById("psy");
			ctx.drawImage(psy, 0, 0, 640, 480);
		}
	};
};