html5 plays video and dynamic screenshot implementation steps and code (supports other untested safari)

Comment: html5 plays videos and dynamic screenshots, a very fashionable and cool feature, does not support chrom at the moment, supports other untested safari. If you need to know, please refer to it appropriately

First refer to the jquery address. Choose Sina's

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.6/jquery.js"></script>

Add a video tag

<video controls="controls">

<source src="1.mp4" />

</video>

Then js

<script type="text/javascript">

$().ready(function(){

var video, output;

var scale = 0.25;

var initialize = function() {

output = $("#output");

video = $("#video").get(0);

$("#capture").click(captureImage);

};

var captureImage = function() {

var canvas = document.createElement("canvas");

canvas.width = video.videoWidth * scale;

canvas.height = video.videoHeight * scale;

canvas.getContext('2d')

.drawImage(video, 0, 0, canvas.width, canvas.height);

var img = document.createElement("img");

img.src = canvas.toDataURL();

output.prepend(img);

};

$(initialize);

});

</script>

I won't post the renderings.