Html5 video playback and dynamic screenshot implementation steps and code (Other untested safari supported)

Comments: Html5 video playback is dynamic. It is a fashionable and cool function. chrom is not supported for the time being, and safari is not tested. If you need to know about it, you can refer to it and do not support chrom for the time being. Support for safari. Other not tested
REFERENCE The jquery address first. Select Sina's

The Code is as follows:
<Script type = "text/javascript" src = "http://lib.sinaapp.com/js/jquery/1.6/jquery.js"> </script>

Add a video tag

The Code is as follows:
<Video id = "video" controls = "controls">
<Source src = "1.mp4"/>
</Video>

Then js

The Code is as follows:
<Script type = "text/javascript">
$ (). Ready (function (){
Var video, output;
Var scaling = 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>

It will not be pasted.