Posted By

chrisaiv on 03/31/12

Tagged

javascript

Versions (?)

Last Edited at 03/31/12 07:05am

Statistics

Viewed 4295 times

Favorited by 0 user(s)

Related snippets

Javascript: Copy a video frame and turn it into an image

/ Published in: JavaScript

Very cool example of copying a frame from an MP4 and displaying it on the canvas or image. In order for images to be saved, the video must come from the same domain

Highlighted TextExpand

window.onload = function (){

var video = document.getElementById('my_video');
                var thecanvas = document.getElementById('thecanvas');
		var img = document.getElementById('thumbnail_img');

video.addEventListener('pause', function(){
			
                        draw( video, thecanvas, img);
	
		}, false);

};

function draw( video, thecanvas, img ){

// get the canvas context for drawing
		var context = thecanvas.getContext('2d');

// draw the video contents into the canvas x, y, width, height
                context.drawImage( video, 0, 0, thecanvas.width, thecanvas.height);

// get the image data from the canvas object
                var dataURL = thecanvas.toDataURL();

// set the source of the img tag
		img.setAttribute('src', dataURL);

}
        </script>
    </head>
    <body>
	The Video
	<br />
        <video id="my_video" controls>
            <source src="http://jamesbaca.net/slides/source_code/html5_andJSThumbs/VeryMaryKate.mp4" type="video/mp4" />
        </video>
	<br />
	The Canvas
	<br />
        <canvas id="thecanvas">
        </canvas>
	<br />
	The Image
	<br />
        <img id="thumbnail_img" alt="Right click to save" />
	<br />
    </body>
</html>

URL: http://jamesbaca.net/slides/source_code/html5_andJSThumbs/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.