js+HTML5实现视频截图的方法

本文实例讲述了js+HTML5实现视频截图的方法。分享给大家供大家参考。具体如下：
1. HTML部分：

<video id="video" controls="controls"><source src=".mp4" /></video><button id="capture">Capture</button><div id="output"></div>

2. 点击按钮时触发如下代码：

（function（） {"use strict";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）;}（））;

希望本文所述对大家的javascript程序设计有所帮助。