H5为视频播放器设置截图功能.

1：
实例说明
当用户点击按钮的时候
程序把视频中当前播放的帧放到页面canvas元素中
，用户可以自行保存
实现过程
：
css样式
/*截图的样式*/
#win{
display:none;
position:absolute;
left:270px;
top:270px;
width:400px;
height:230px;
border:#F00 2px solid;
}
--
html代码
<video id="video" src="width="400px" controls="controls">您的浏览器不支持</video>
<button id="btnCatchPicture" onclick="CatchPictures()">截图</button>
<!--截图的-->
<div id="win"><br>
<canvas id="canvas" width="400px" height="230px"></canvas><!--设置截屏画布的大小-->
</div>
---
js代码
<script type="text/javascript">
var video=document.getElementById("video");//获取id
//函数
function CatchPictures(){
document.getElementById("video");//获取id
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');//类型是2d
canvas.width=video.veidoWidth;//画布的宽度等于视频屏幕的宽度
canvas.height=video.videoHeight;
ctx.drawImage(video,0,0,400,230);//在画布上画画
document.getElementById("win").style.display="block";
}
</script>