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

制作方法:

1.在页面中加载视频

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

  1. <video loop controls id="testmp4" width="500" height="400" >
  2. <source src="test.mp4" type="video/mp4">
  3. <source src="test.webm" type="video/webm">
  4. <source src="test.ogg" type="video/ogg">
  5. </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" - 可能支持;"" - (空字符串)不支持;

  1. function videoType(video){
  2. var returnType='';
  3. if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){
  4.   returnType= 'mp4';
  5. }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;
  1. }

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

1.2使用js动态加载video标签

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

  1. var videoElem;
  2. var videoDiv;
  3. function createVideo(){
  4. videoElem=document.createElement("video");//创建video
  5. videoDiv=document.getElementById("videopanel");//获取video的外层容器
  6. videoDiv.appendChild(videoElem);
  7. var vtype=videoType(videoElem);//判断浏览器支持的格式
  8. if(vtype==""){
  9. videoDiv.innerHtml('不支持video')
  10. }else{
  11. videoElem.setAttribute('src',"text."+vtype);
  12. }
  13.  
  14. }

由于这里我们要制作截图功能,单纯的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作为源来画图。

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

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

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

3.制作截图展示canvas面板

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

  1. 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实现视频截图功能的更多相关文章

  1. 【转载】用原生JS和html5进行视频截图并保存到本地

    支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...

  2. 用原生JS和html5进行视频截图并保存到本地

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

    一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还 ...

  4. .net视频截图功能,没测试

    /// <summary> /// @从视频文件截图,生成在视频文件所在文件夹 /// 在Web.Config 中需要两个前置配置项: /// 1.ffmpeg.exe文件的路径 ///  ...

  5. 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现

    最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...

  6. 阿里云Aliplayer高级功能介绍(一):视频截图

    基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...

  7. 利用HTML5的Video进行视频截图并保存到本地

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  9. java-FFmpeg(一) 实现视频的转码和截图功能

    FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库l ...

随机推荐

  1. 关于如何提高Web服务端并发效率的异步编程技术

    最近我研究技术的一个重点是java的多线程开发,在我早期学习java的时候,很多书上把java的多线程开发标榜为简单易用,这个简单易用是以C语言作为参照的,不过我也没有使用过C语言开发过多线程,我只知 ...

  2. Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  3. php报错 ----> Call to undefined function imagecreatetruecolor()

    刚才在写验证码的时候,发现报错,然后排查分析了一下,原来是所用的php版本(PHP/5.3.13)没有开启此扩展功能. 进入php.ini 找到extension=php_gd2.dll ,将其前面的 ...

  4. C#中如何创建PDF网格并插入图片

    这篇文章我将向大家演示如何以编程的方式在PDF文档中创建一个网格,并将图片插入特定的网格中. 网上有一些类似的解决方法,在这里我选择了一个免费版的PDF组件.安装控件后,创建新项目,添加安装目录下的d ...

  5. Unity3D 5.3 新版AssetBundle使用方案及策略

    1.概览 Unity3D 5.0版本之后的AssetBundle机制和之前的4.x版本已经发生了很大的变化,一些曾经常用的流程已经不再使用,甚至一些老的API已经被新的API所取代. 因此,本文的主要 ...

  6. C# 索引器,实现IEnumerable接口的GetEnumerator()方法

    当自定义类需要实现索引时,可以在类中实现索引器. 用Table作为例子,Table由多个Row组成,Row由多个Cell组成, 我们需要实现自定义的table[0],row[0] 索引器定义格式为 [ ...

  7. 简单酷炫的canvas动画

    作为一个新人怀着激动而紧张的心情写了第一篇帖子还请大家多多支持,小弟在次拜谢. 驯鹿拉圣诞老人动画效果图如下 html如下: <div style="width:400px;heigh ...

  8. Centos6.5 配置Nginx开机自启动

    1.在/etc/init.d/目录下创建 nginx 文件,内容如下: #!/bin/sh # # nginx - this script starts and stops the nginx dae ...

  9. 亡命之徒aaaaaa.......chao

    前端是一个看似入门门槛不高,但要学好很难的领域.前端的知识体系庞杂又松散,技术演进快,如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏.其实只要掌握了正确的方法,学习前端和学好前端就只是个时间问题. ...

  10. UWP开发:APP之间的数据交互(以微信为例)

    目录 说明 UWP应用唤醒方式 跟微信APP交互数据 APP之间交互数据的前提 说明 我们经常看到,在手机上不需要退到桌面,APP之间就可以相互切换,并且可以传递数据.比如我在使用知乎APP的时候,需 ...