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


Posted in Javascript onJune 16, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
js tab效果的实现代码
Dec 26 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
AngularJS中的过滤器使用详解
Jun 16 #Javascript
简述AngularJS的控制器的使用
Jun 16 #Javascript
详解AngularJS中的表达式使用
Jun 16 #Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
python提取字典key列表的方法
2015/07/11 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
UNIX特点都有哪些
2016/04/05 面试题
奖学金自我鉴定范文
2013/10/03 职场文书
岗位职责的定义
2013/11/10 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers