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

<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. ob缓存
			
    ob的基本原则:如果ob缓存打开,则echo的数据首先放在ob缓存.如果是header信息,直接放在程序缓存.当页面执行到最后,会把ob缓存的数据放到程序缓存,然后依次返回给浏览器.下面我说说ob的基 ...
    
			
    2. 
						
  2. iOS模式详解—「runtime面试、工作」看我就 🐒 了 ^_^.
			
    Write in the first[写在最前] 对于从事 iOS 开发人员来说,当提到 ** runtime时,我想都可以说出来 「runtime 运行时」和基本使用的方法.相信很多开发者跟我当初一 ...
    
			
    3. 
						
  3. DirectFB 之 字体显示
			
    通过本文,可以简单地了解directfb字体内部运行机制. 简介 SetFont函数,是每次写字体前必须调用的一个函数,否则directfb程序将会报错.这个函数是将某种字体与某个surface相关联 ...
    
			
    4. 
						
  4. Mysql PHP
			
    if(_mysql.query(sql.data()) < 0) 这里不能使用sql.c_str() 因为这个会有‘\0’而在Mysql查询中,这个0是不希望出现的.
    
			
    5. 
						
  5. java文件创建和删除
			
    流的操作在项目开发中用的很普遍,虽然每次在网上都可以百度到,但是总感觉心里不踏实,对此,关于流的操作做一个详细的总结--- 1.根据数据的流向来分:输出流:是用来写数据的,是由程序(内存)---> ...
    
			
    6. 
						
  6. Python错误集
			
    1-->IndentationError:expected an indented block   >IndentationError: unindent does not match a ...
    
			
    7. 
						
  7. zabbix_server表面启动成功，但是没有进程
			
    [root@iZ25m1box8cZ zabbix]# /etc/init.d/zabbix_server start Starting zabbix_server (via systemctl):  ...
    
			
    8. 
						
  8. lightOJ 1258  Making Huge Palindromes(KMP)
			
    题目链接:http://lightoj.com/volume_showproblem.php?problem=1258 就是求逆串和原串的匹配长度 答案就是原串长度的2倍减去匹配长度即可 第一次我将原 ...
    
			
    9. 
						
  9. [刷题]算法竞赛入门经典(第2版) 5-14/UVa1598 - Exchange
			
    题意:模拟买卖,当出售价bid等于或低于出售价ask,则交易. 代码:(Accepted,0.330s) //UVa1598 - Exchange //Accepted 0.330s //#defin ...
    
			
    10. 
						
  10. jgs--多线程和synchronized
			
    多线程 多线程是我们开发人员经常提到的一个名词.为什么会有多线程的概念呢?我们的电脑有可能会有多个cpu(或者CPU有多个内核)这就产生了多个线程.对于单个CPU来说,由于CPU运算很快,我们在电脑上 ...
    
			
    11.