canvas实现视频截图

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

<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>

时间： 2024-08-08 01:25:30

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

canvas与html5实现视频截图功能

这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上已经加载完成了这个视频,这样才能够方便的对其操作.如果使用下面直接嵌入<video>标签的方式: 1 2 3 4 5 <video loop controls id="testmp4" width="500" height="400"

HTML5 CSS3 诱人的实例：模仿优酷视频截图功能

一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还是很不错,下面我给大家分析下,极其核心代码很简单: _canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = '#ffffff'; _ctx

indows下PHP通过ffmpeg给上传的视频截图详解

windows下PHP通过ffmpeg给上传的视频截图详解,php_ffmpeg.dll安装下载,找了很久php_ffmpeg.dll的下载地址和应用,发现有用的资源很少,现在问题解决了,贴出来跟大家分享一下: 首先要安装PHP的ffmpeg扩展,我们需要php_ffmpeg.dll文件和一些其他的辅助文件, 这里整理了一下提供给大家: ffmpeg-php-win32-all.rar: 解压后你将得到5个文件,将avcodec-51.dll, avformat-51.dll, a

iOS 对网络视频采集视频截图

在播放网络视频是经常可以看到播放按钮下面是该制品的某个截图 : 一般情况下后台服务器是可以把视频截图一起返回给你你直接拿到图片显示就可以了但是当后台没有提供时我们也可以根据视频地址自己去截取视频截图: //获取视频封面 videoURL:视频网络地址 - (UIImage*)thumbnailImageForVideo:(NSURL *)videoURL { AVURLAsset *asset = [[AVURLAsset alloc] initWithURL:videoURL

IOS批量截取视频截图 UIImage mp4 IOS Video

IOS批量截取视频截图 //生成截图 NSString *path = [NSHomeDirectory() stringByAppendingString:@"/Documents"]; NSLog(@"path %@", path); for (int i = 0; i<[mItems count]; i++) { NSMutableDictionary *info = (NSMutableDictionary *)mItems[i]; //视频信息 NS

Android 视频截图

1. 前言本文讨论的是获取视频在某个时间点的图像, 而非屏幕截图. 如果要获取屏幕截图的话直接(电源键+音量下) 2. 获取视频截图 2.1 MediaMetadataRetriever MediaMetadataRetriever从名称上看可以获取视频的Metadata信息, 此外还可以获取视频的截图, 其中抽取视频的缩略图就是采用此函数实现的. 2.2 使用方法采用MediaMetadatRetriever.getFrameAtTime方法获取视频的该帧图像. public Bitmap

使用ffmpeg 对视频截图，和视频转换格式

//执行CMD命令方法 public static void CmdProcess(string command)//调用CMD { //实例化一个进程类 Process process = new Process(); process.StartInfo.FileName = "cmd.exe"; //将cmd的标准输入和输出全部重定向到.NET的程序中 process.StartI

用canvas给视频图片添加特效

Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条弧线, 文字就是画布的功能. 具体提供的js函数看http://www.w3school.com.cn/tags/html_ref_canvas.asp 2 简单介绍一下使用: Var canvas = document.documentElementById(“canvasId”); Var ctx = canvas.getCon

Java Web 中使用ffmpeg实现视频转码、视频截图

转载自:[http://www.cnblogs.com/dennisit/archive/2013/02/16/2913287.html] 视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpeg有非常强大的功能包括视频采集功能.视频格式转换.视频抓图.给视频加水印等. ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可