网站建设：怎么使用js+HTML5实现视频截图的方法

这篇文章主要介绍了js+HTML5实现视频截图的方法,涉及javascript操作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);
}());
本文来源于大连网站建设公司、大连网站设计制作公司与大连网站推广公司-新图闻科技公司！
大连网站建设,大连网站设计,大连网站制作,大连网页设计，大连网站建设公司 ,大连网站设
计公司, 大连网站制作公司，大连网页设计公司，大连手机网站建设，手机网站建设，大连网站推广，网站推广，大连建网站，大连做网站，大连微信网站建设，大连微商城网站建设，大连商城网站建设，大连平台网站建设，大连响应式网站建设，大连微信营销，大连网络公司。