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

<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. POJ 2411 状态压缩递，覆盖方案数
			
    无非就是横着放与竖着放,状态中用1表示覆盖,0表示未覆盖. #include <iostream> #include <vector> #include <algorit ...
    
			
    2. 
						
  2. 使用SSH框架查出的实体集合用AJAX形式刷新到页面JOSONArray报异常
			
    所报异常:net.sf.json.JSONException: java.lang.reflect.InvocationTargetException 问题根源:数据库中查出的日期是java.sql. ...
    
			
    3. 
						
  3. bzoj4800 [Ceoi2015]Ice Hockey World Championship
			
    Description 有n个物品,m块钱,给定每个物品的价格,求买物品的方案数. Input 第一行两个数n,m代表物品数量及钱数 第二行n个数,代表每个物品的价格 n<=40,m<=1 ...
    
			
    4. 
						
  4. DirectFB 之 简介
			
    1. DirectFB概述        首先 DirectFB 类似于桌面中的 XFree86 .桌面中的 XFree86 不需要 Frame Buffer 设备,而 DirectFB 需要.    ...
    
			
    5. 
						
  5. 【算法系列学习】HDU 5527 Too Rich贪心
			
    http://www.cnblogs.com/AOQNRMGYXLMV/p/4934747.html #include<iostream> #include<cstdio> # ...
    
			
    6. 
						
  6. hdu1711kmp
			
    Given two sequences of numbers : a11, a22, ...... , aNN, and b11, b22, ...... , bMM (1 <= M <= ...
    
			
    7. 
						
  7. #使用parser获取图片信息,输出Python官网发布的会议时间、名称和地点。
			
    # !/usr/bin/env/Python3 # - * - coding: utf-8 - * - from html.parser import HTMLParser import urllib ...
    
			
    8. 
						
  8. PHP三维数组拼装
			
    foreach ($records as $k => $v) { foreach ($records as $m => $n) { if ($v['days'] == $n['days'] ...
    
			
    9. 
						
  9. Jquery将<a>链接变为post请求
			
    
			
    10. 
						
  10. 成熟的C#网络通信框架介绍——ESFramework通信框架
			
    (转自:http://www.cnblogs.com/zhuweisky/archive/2010/08/12/1798211.html) ESFramework通信框架是一套性能卓越.稳定可靠.强大 ...
    
			
    11.