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

这篇文章主要介绍了js+HTML5实现视频截图的方法,涉及javascript操作html5元素实现多媒体文件截图的相关技巧,需要的朋友可以参考下

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

1. HTML部分：

Capture

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程序设计有所帮助。