截取视频当前播放画面，直接上源码。

<body>
    <div class="container">
        <video id="test" width="500" height="400" >
            <source src="test.mp4" type="video/mp4">
        </video>
    </div>
    <canvas height="400" width="500" id="canvas2" style="border:1px solid #000;margin: 50px;"></canvas>
    <canvas height="400" width="500" id="canvas1" style="border:1px solid #000;margin: 50px;display: none;"></canvas>
    <button type="button" onclick="drawImg()">click</button>
<script>
    var video = document.getElementById('test');
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');
    var context1 = canvas1.getContext('2d');
    var context2 = canvas2.getContext('2d');
    function drawVideo() {
        context1.drawImage(video,0,0,video.width,video.height);
    }
    function drawImg() {
        context2.drawImage(canvas1,0,0,canvas1.width,canvas1.height)
    }
    video.play();
    setInterval(drawVideo,100);
</script>
</body>
效果截图如下：

               



												


											
canvas实现视频截图的更多相关文章
	

    
								
  1. canvas与html5实现视频截图功能
		
    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
    
		
    2. 
						
  2. js实现视频截图,视频批量截图,canvas实现
		
    截取视频的某一时间的图像并保存 利用canvas的绘画能力画出视频某一帧的视频画面, 获得到图像之后转换成base64图像, 再利用a标签的实现自动保存到本地 html代码 <!DOCTYPE  ...
    
		
    3. 
						
  3. 利用HTML5的Video进行视频截图并保存到本地
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    4. 
						
  4. 【转载】用原生JS和html5进行视频截图并保存到本地
		
    支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...
    
		
    5. 
						
  5. 用原生JS和html5进行视频截图并保存到本地
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    6. 
						
  6. 阿里云Aliplayer高级功能介绍(一)：视频截图
		
    基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
    
		
    7. 
						
  7. iOS 对网络视频采集视频截图
		
    在播放网络视频是  经常可以看到播放按钮下面是该制品的某个截图 : 一般情况下  后台服务器是可以把视频截图一起返回给你 你直接拿到图片显示就可以了 但是当后台没有提供时  我们也可以根据视频地址 自 ...
    
		
    8. 
						
  8. 使用ffmpeg 对视频截图，和视频转换格式
		
    //执行CMD命令方法 public static void CmdProcess(string command)//调用CMD        {            //实例化一个进程类      ...
    
		
    9. 
						
  9. JavaScript+html5 canvas实现本地截图教程
		
    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JAVA压缩图片 服务器端压缩图片 原创
			
    @RequestMapping(value = "/uploadImage", method = RequestMethod.POST) @ResponseBody public  ...
    
			
    2. 
						
  2. 【原创】10万条数据采用存储过程分页实现（Mvc+Dapper+存储过程）
			
    有时候大数据量进行查询操作的时候,查询速度很大强度上可以影响用户体验,因此自己简单写了一个demo,简单总结记录一下: 技术:Mvc4+Dapper+Dapper扩展+Sqlserver 目前主要实现 ...
    
			
    3. 
						
  3. 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]
			
    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 <form> 元素添加 role="form". 把标签 ...
    
			
    4. 
						
  4. 实用收藏Linux命令备忘
			
    系统操作 #使用shutdown命令马上重启系统[root@H32 ~]# shutdown –r now #使用shutdown命令马上关闭系统[root@H32 ~]# shutdown –h n ...
    
			
    5. 
						
  5. 详解Java动态代理机制
			
    之前介绍的反射和注解都是Java中的动态特性,还有即将介绍的动态代理也是Java中的一个动态特性.这些动态特性使得我们的程序很灵活.动态代理是面向AOP编程的基础.通过动态代理,我们可以在运行时动态创 ...
    
			
    6. 
						
  6. 0基础搭建Hadoop大数据处理-集群安装
			
    经过一系列的前期环境准备,现在可以开始Hadoop的安装了,在这里去apache官网下载2.7.3的版本 http://www.apache.org/dyn/closer.cgi/hadoop/com ...
    
			
    7. 
						
  7. js获取宽高
			
    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
    
			
    8. 
						
  8. 转：request.getSession(true)和request.getSession(false)的区别
			
    1.转自:http://wenda.so.com/q/1366414933061950?src=150 概括: request.getSession(true):若存在会话则返回该会话,否则新建一个会 ...
    
			
    9. 
						
  9. 第二章  基本图像处理（Image Processing）
			
    主要内容: 图像的表示----介绍图像是如何表示的,以及所有基本操作的作用对象 高斯滤波-----滤波操作的原理与应用 图像金字塔-----高斯和拉普拉斯 边缘检测-----Sobel算子和Lapla ...
    
			
    10. 
						
  10. 深入理解JAVA序列化
			
    如果你只知道实现 Serializable 接口的对象,可以序列化为本地文件.那你最好再阅读该篇文章,文章对序列化进行了更深一步的讨论,用实际的例子代码讲述了序列化的高级认识,包括父类序列化的问题.静 ...
    
			
    11.