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

<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. 商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)
			
    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 现在很多的 APP 里面都有自己的自定义风格,特别是京东商城中自 ...
    
			
    2. 
						
  2. AspNet.OData 协议概述
			
    1. 什么是OData? OData 全称 Open Data Protocol,字面理解为开放数据协议,是一个基于Http协议且API实现为Restful风格的协议标准,目前由微软支持大力推广,你可 ...
    
			
    3. 
						
  3. Hadoop - 操作练习之单机配置 - Hadoop2.8.0/Ubuntu16.04
			
    系统版本 anliven@Ubuntu1604:~$ uname -a Linux Ubuntu1604 4.8.0-36-generic #36~16.04.1-Ubuntu SMP Sun Feb ...
    
			
    4. 
						
  4. get和post提交数据的区别
			
    get是客户端向服务器索取数据的请求,设定的初衷是,客户端(浏览器)给服务器发送请求,然后服务器再返回给客户端其要求的数据. 那么为什么说get也能提交数据呢? 我们仔细理解第一句话“客户端(浏览器) ...
    
			
    5. 
						
  5. [UWP]了解模板化控件(8)：ItemsControl
			
    1. 模仿ItemsControl 顾名思义,ItemsControl是展示一组数据的控件,它是UWP UI系统中最重要的控件之一,和展示单一数据的ContentControl构成了UWP UI的绝大 ...
    
			
    6. 
						
  6. EasyUI开发的驾校管理系统
			
    开源SmartLife驾校管理系统,地址:https://github.com/SmartOfLife/DriveMgr 1.界面布局是用的ymnets大神的界面,具体参考:http://www.cn ...
    
			
    7. 
						
  7. Bash 的若干基本问题
			
    Bash 的若干基本问题   这里介绍一些bash启动前.后的问题,以及一些使用bash需要注意的基本问题.     1.Bash的介绍   Bash是一种Shell程序,它是一般的Linux系统中的 ...
    
			
    8. 
						
  8. 如何将angular-ui的图片轮播组件封装成一个指令
			
    在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
    
			
    9. 
						
  9. redis单机主从搭建
			
    tar zxvf redis-2.8.13.tar.gz cd redis-2.8.13 make 1.安装主库 mkdir /opt/redis/sbin -p mkdir    /opt/redi ...
    
			
    10. 
						
  10. PHP获得上(两)周时间
			
    就不手写了
    
			
    11.