canvas与html5实现视频截图功能

这段时间一直在研究canvas，突发奇想想做一个可以截屏视频的功能，然后把图片拉去做表情包，哈哈哈哈哈哈~~

制作方法：

1.在页面中加载视频

在使用canvas制作这个截图功能时，首先必须保证页面上已经加载完成了这个视频，这样才能够方便的对其操作。如果使用下面直接嵌入<video>标签的方式：

<video loop controls id="testmp4" width="500" height="400" >

<source src="test.mp4" type="video/mp4">

<source src="test.webm" type="video/webm">

<source src="test.ogg" type="video/ogg">

</video>

在我的那篇《html5与视频》中讲到，浏览器对视频的预加载progress以及load事件支持不同，会影响video的播放及其他事件的触发。所以我们在这里使用js构造video的方式来引入视频。

这种方式引入视频要注意，不能引入多个source，所以要先判断浏览器对视频格式的支持。

1.1使用video的canPlayType()方法判断支持格式

canPlayType()方法需要传入一个参数，这个参数就是video的格式，

常用值：video/ogg;

　　　　video/mp4;

　　　　video/webm;

或者包括编码器：

　　　　video/ogg;codecs="theora,vorbis"

　　　　video/mp4;codecs="avc1.4D401E, mp4a.40.2"

　　　　video/webm;codesc="vp8.0, vorbis"

返回值：表示网页的支持级别:"probably"-最有可能支持(输入值带编码器的时候只返回这个);"maybe" - 可能支持；"" - （空字符串）不支持；

function videoType(video){

    var returnType='';

    if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){

    　　returnType= 'mp4';

    }else if(video.canPlayType('video/ogg')=='probably'||video.canPlayType('video/ogg')=='maybe'){
 　　　　returnType= 'ogg'; 　　 
　　 }else if(video.canPlayType('video/webm')=='probably'||video.canPlayType('video/webm')=='maybe'){
 　　　　returnType= 'webm'; 　　 
　　 }
　　 return returnType;

这个函数可以判断浏览器对video支持的格式。

1.2使用js动态加载video标签

这里判断了浏览器的支持格式后，由于我用的是chrome，所以我的浏览器支持mp4格式的视频，然后我们动态创建一个video标签。

var videoElem;

var videoDiv;

function createVideo(){

     videoElem=document.createElement("video");//创建video

     videoDiv=document.getElementById("videopanel");//获取video的外层容器

     videoDiv.appendChild(videoElem);

     var vtype=videoType(videoElem);//判断浏览器支持的格式

     if(vtype==""){

        videoDiv.innerHtml('不支持video')

    }else{

        videoElem.setAttribute('src',"text."+vtype);

    }

}

由于这里我们要制作截图功能，单纯的video不具备截图的接口，所以我们要把它复制到canvas上，在canvas上播出这个视频，所以这里我们先把video给隐藏掉(display:none)。

2.使用canvas复制视频

现在video已经在浏览器上播放了，接下来我们把它复制到canvas里，首先建立canvas，然后得到画布context，这些就不说了。如何把video画在canvas上，这里我们要使用一个函数。drawImage函数的用法

1.drawImage(img,x,y):在画布的（x,y）这个位置画一个img；

2.drawImage(img,x,y,width,height):在画布的（x,y）这个位置画一个width宽，height高的img；

3.drawImage(img,sx,sy,swidth,sheight,x,y,width,height):在画布的（x,y）位置画一个img的（sx,sy）位置的swidth宽，sheight高的一块截图，画在画布上要缩放到width宽和height高。

以上就是drawImage的用法了，这个函数非常的强大。

回到做截图，我们现在已经在浏览器上创建好了画布--contextVideo,接着我们在这里把视频画出来：

contextVideo.drawImage(videoElem,0,0);

然后我们可以看到在canvas里画了一张图，但是视频是不断变化的，所以我们需要使用setInterval函数不断的吧video作为源来画图。

setInterval(function(){
    contextVideo,drawImage(videoElem,0,0);
},100)

这里时间间隔的大小会影响到视频播放是否会卡。　　

到这里我们就把video搬到canvas上展示了。接下来制作截图。

3.制作截图展示canvas面板

这里我们需要再在页面上画一个canvas画布--contextImg，然后再次利用drawImage方法，截图。

contextImg.drawImage(canvasVideo,0,0,canvasVideo.width,canvasVideo.height);

这段代码将第一个canvas画到了第二个canvas上。

4.制作截图按钮

制作一个按钮，然后绑定click事件，点击后就调用上一步的函数，这样就可以制作一个截图了。

当图截好后可以将图右键保存下来，然后倒入ps制作表情包了。

5.demo及一些表情包。

视频截图：Demo；(打开之前请调小音量，点击坐上click即可截图)

表情包：

内容原创，转载请注明出处：

作者：Jess_喵

来源：http://www.cnblogs.com/zhangwenjiajessy/p/6158131.html

canvas与html5实现视频截图功能的更多相关文章

【转载】用原生JS和html5进行视频截图并保存到本地
支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...
用原生JS和html5进行视频截图并保存到本地
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5 CSS3 诱人的实例：模仿优酷视频截图功能
一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还 ...
.net视频截图功能，没测试
/// <summary> /// @从视频文件截图,生成在视频文件所在文件夹 /// 在Web.Config 中需要两个前置配置项: /// 1.ffmpeg.exe文件的路径 /// ...
通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现
最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...
阿里云Aliplayer高级功能介绍(一)：视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
利用HTML5的Video进行视频截图并保存到本地
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
java-FFmpeg（一）实现视频的转码和截图功能
FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库l ...

随机推荐

Oracle中已有数据的字段类型修改
创建测试表 create table t_person( id varchar2(200) primary key, name varchar2(200), address varchar2(200) ...
SpringMVC学习系列-后记解决GET请求时中文乱码的问题
SpringMVC学习系列-后记解决GET请求时中文乱码的问题之前项目中的web.xml中的编码设置: <filter> <filter-name>CharacterEnc ...
高校手机签到系统——zxing.net生成二维码（补充）
高校手机签到系统——第一部分Authority权限系统(上) 高校手机签到系统——第一部分Authority权限系统(下) 高校手机签到系统——手机客户端关于zxing.net的使用网上已有很多说明 ...
利用selenium Server实现IE firefox 和 chrome兼容性测试
本文的主题是基于Selenium Server,使用 Java 语言编写网页交互流程, 实现多浏览器(IE Firefox Chrome)兼容性测试,为使用纪要. Selenium Selenium是 ...
js数据结构与算法存储结构
数据结构(程序设计=数据结构+算法) 数据结构就是关系,没错,就是数据元素相互之间存在的一种或多种特定关系的集合. 传统上,我们把数据结构分为逻辑结构和物理结构. 逻辑结构:是指数据对象中数据元素之间 ...
Android DiffUtil
Android 的recyclerview-v7:24.2.0 发布后多了个DiffUtil工具类,这个工具类能够大大解放了Android开发者的一个苦恼:RecyclerView局部刷新和重新刷新时 ...
RANSAC算法详解
给定两个点p1与p2的坐标,确定这两点所构成的直线,要求对于输入的任意点p3,都可以判断它是否在该直线上.初中解析几何知识告诉我们,判断一个点在直线上,只需其与直线上任意两点点斜率都相同即可.实际操作 ...
html5的video标签支持的视频格式
exe4j使用说明
1:首先下载exe4j,软件根据电脑的版本下载(32bit or 64bit,本人的电脑是64bit),我下载的是没显示电脑版本的exe4j,有本地导入的选项和联网下载的选项,安装jre后才能进入-图 ...
【Web Shell】- 技术剖析中国菜刀 – Part I
这里的中国菜刀不是指切菜做饭的工具,而是中国安全圈内使用非常广泛的一款Webshell管理工具,想买菜刀请出门左拐东门菜市场王铁匠处.中国菜刀用途十分广泛,支持多种语言,小巧实用,据说是一位中国军人退 ...

canvas与html5实现视频截图功能

canvas与html5实现视频截图功能的更多相关文章

随机推荐

热门专题