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

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

  1. HTML部分:

  ?

1
2
3
4
5

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

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

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

时间: 2024-09-27 05:23:38

js+HTML5实现视频截图的方法的相关文章

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

本文实例讲述了js+HTML5实现视频截图的方法.分享给大家供大家参考.具体如下: 1. HTML部分: <video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output&

js+html5操作sqlite数据库的方法_javascript技巧

本文实例讲述了js+html5操作sqlite数据库的方法.分享给大家供大家参考,具体如下: //copyright by lanxyou lanxyou[at]gmail.com var lanxDB=function(dbname){ var db=openDatabase(dbname,'1.0.0','',65536); return{ //返回数据库名 getDBName:function(){ return dbname; }, //初始化数据库,如果需要则创建表 init:func

C#从视频截图的方法

前公司在制作播客系统(Web程序)中,用到从视频截图功能. 下边是截图CatchImg方法,可从大多数的视频文件中截图成功,大家可测试;如果截图不成功,大多是因为视频本身的问题,如编码标准或加了密.但从在线录制的视频Flv文件中截图,还未发现截图失败; /// <summary>/// @从视频文件截图,生成在视频文件所在文件夹/// 在Web.Config 中需要两个前置配置项:/// 1.ffmpeg.exe文件的路径/// <add key="ffmpeg" v

js+HTML5基于过滤器从摄像头中捕获视频的方法

  本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法.分享给大家供大家参考.具体如下: index.html页面: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="warning"> <h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2> </div>

js+HTML5基于过滤器从摄像头中捕获视频的方法_javascript技巧

本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法.分享给大家供大家参考.具体如下: index.html页面: <div class="warning"> <h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2> </div> <div class="container"> &l

node js-Node.js HTML5视频IOS不播放问题

问题描述 Node.js HTML5视频IOS不播放问题 用node做个简单的本地服务器,可以播放html video,在桌面浏览器以及安卓设备中匀可以 正常播放视频,在ios中无法播放 *注:我使用php的服务器中却可以在ios上播放 以下为ios截图: 解决方案 是不是你的视频格式不支持ios的浏览器

js+html5绘制图片到canvas的方法

  本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px soli

js+HTML5实现canvas多种颜色渐变效果的方法

  本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px

js+html5通过canvas指定开始和结束点绘制线条的方法

  本文实例讲述了js+html5通过canvas指定开始和结束点绘制线条的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1p