js+HTML5实现视频截图的方法
2015-11-30 11:48
471 查看
本文实例讲述了js+HTML5实现视频截图的方法。分享给大家供大家参考。具体如下:
1. HTML部分:
2. 点击按钮时触发如下代码:
希望本文所述对大家的javascript程序设计有所帮助。
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 for-in有序遍历json数据并探讨各个浏览器差异
- 在jsp页面,只让按钮点击一下有用,点击第二下无效,需要刷新一下
- js简易检测密码强度
- 解析JSON的2种方式
- js之DOM学习
- Javascript禁止网页复制粘贴效果,或者复制时自动添加来源信息
- [Javascript] RegExp 正则
- js 去空格
- extjs的级联展开
- js获取图片真实大小
- javascript 打开页面window.location和window.open的区别
- 判断一个字符串同时出现几个字符的C#版本和JS版本
- javascript获取鼠标点击位置的兼容写法
- js,jq
- js实时检测密码强度
- js使点击网页其他地方使显示框消失
- JavaScript中事件处理
- WebDatagrid-checkbox行如何用js控制其是否可用
- 还在比较 JSON 和 XML?Stop!
- JSP中文乱码问题终极解决方案