js+HTML5实现视频截图的方法
更新时间：2015年06月16日 12:18:23 作者：红薯
这篇文章主要介绍了js+HTML5实现视频截图的方法,涉及javascript操作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程序设计有所帮助。
您可能感兴趣的文章:
- vue 使用html2canvas将DOM转化为图片的方法
- js使用html2canvas实现屏幕截取的示例代码
- Javascript保存网页为图片借助于html2canvas库实现
- JavaScript实现网页截图功能
- javascript在网页中实现读取剪贴板粘贴截图功能
- js实现截图保存图片功能的代码示例
- JavaScript+html5 canvas实现本地截图教程
- JS打开摄像头并截图上传示例
- JS实现div模块的截图并下载功能
- JS实现预加载视频音频/视频获取截图（返回canvas截图）
- javascript实现粘贴qq截图功能（clipboardData）
- html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
相关文章
这篇文章主要介绍了js实现遮罩层弹出框的方法,可实现对遮罩层弹出框的样式定义、按钮事件及相关功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
使用javascript技术验真实姓名，要用到unicode字符来匹配，由于中国人的姓名长度一般是在2-4这个范围内，所以重复匹配{2,4}次。接下来，通过本文给大家分享js验证省份证号与真实姓名是否匹配，需要的朋友可以参考下2015-10-10
js 限制input只能输入数字小数点也不能输入或者是只能输入数字,能输小数点等等，本文大致整理了一些，感兴趣的朋友可以收藏下2013-12-12
基于cornerstone.js的dicom医学影像查看浏览功能
这篇文章主要介绍了基于cornerstone.js的dicom医学影像查看浏览功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了新手快速入门微信小程序组件库 iView Weapp，iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了bootstrap table表格客户端分页实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了使用typescript快速开发一个cli的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
今天小编就为大家分享一篇layui清除radio的选中状态实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Actionscript与javascript交互实例程序(修改)
这篇文章主要介绍了Actionscript与javascript交互实例程序(修改)的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
本篇文章主要介绍了微信小程序scroll-view实现横向滚动和上拉加载示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
最新评论