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

<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. 2017/4/26-DOM解析XML文件
			
    DOM解析XML 1.分析 DOM是JAVA自带的XML解析API.DOM首先将XML文件全部加载至内存中,然后再内存中创建DOM树,生成DOM树上的每个Node节点. 2.优点 1) 可以创建或修改 ...
    
			
    2. 
						
  2. vector实现最大流EK算法
			
    序: 在之前的文章中实现了不利用STL实现EK算法,效率也较高.这次我们企图简化代码,减少变量的使用与手写模拟的代码. 注意:vector等STL的container在不开O2优化的时候实现同一个效果 ...
    
			
    3. 
						
  3. 谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode
			
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
			
    4. 
						
  4. cd命令使用详解
			
    cd命令是目录切换命令,是shell内置命令. 语法: cd [-L|-P] [dir] 选项: -p 如果要切换到的目标目录是一个符号连接,直接切换到符号连接指向的目标目录 -L 如果要切换的目标目 ...
    
			
    5. 
						
  5. UI—视图的生命周期
			
    
			
    6. 
						
  6. 初次使用git配置以及git如何使用ssh密钥（将ssh密钥添加到github）
			
    初次安装git配置用户名和邮箱 初次安装git需要配置用户名和邮箱,否则git会提示:please tell me who you are. 你需要运行命令来配置你的用户名和邮箱: $ git con ...
    
			
    7. 
						
  7. 2017最新修复福运来完整运营中时时彩源码PC+手机版本功能齐全
			
    QQ:1395239152 2017-3.14最新修复福运来完整运营版时时彩源码PC+手机版本功能齐全 使用php+mysql开发,并带有完整数据库.截图!!!  注意哈  带手机版  以下截图均为测 ...
    
			
    8. 
						
  8. Linux_shell 学习
			
    shell中test的运用 test 命令是用于检查某个条件是否成立,他可以进行数值.符号.文件三个方面的测试 1.数值中的运用 -eq 等于 -ne 不等于 -gt 大于 -ge 大于等于 -lt  ...
    
			
    9. 
						
  9. java面向对象--类加载器及Class对象
			
    类加载器 jvm 和 类的关系 当调用 java命令运行一个java程序时,会启动一个java虚拟机进程.同一个jvm的所有线程.所有变量都处于同一个进程里,都使用该jvm进程的内存区. jvm进程终 ...
    
			
    10. 
						
  10. 【JAVAWEB学习笔记】28_jquery加强：json数据结构、jquery的ajax操作和表单校验插件
			
    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(Jav ...
    
			
    11.