js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~
制作方法:
1.在页面中加载视频
在使用canvas制作这个截图功能时,首先必须保证页面上已经加载完成了这个视频,这样才能够方便的对其操作。如果使用下面直接嵌入标签的方式:
在我的那篇《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
js截屏 video_canvas与html5实现视频截图功能相关推荐
- js截屏 video_video结合canvas实现视频在线截图功能
给大家讲解下我前几天看到的一个有趣小demo:视频在线截图.以下是我修改和添加了新功能后的效果图: 是不是很酷,其实挺简单的,下面就给大家讲讲怎么弄哈. 这里主要分为三大块功能,首先是第一个: 利用U ...
- html中图片切割视频,canvas与html5实现视频截图功能示例
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 视频截图html,canvas与html5实现视频截图功能(示例代码)
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- js截屏以及three.js场景截屏
做这个功能都是半个月之前的事情了,没想到一直耽误却一直都没有写下总结,尴尬.....来来来,说正事 在手机端截屏完全不需要前端动什么脑子,但是在网页上截屏就很头疼了,我这里介绍两种情形,针对普遍和某一 ...
- 视频弹幕技术 php,HTML5实现视频弹幕功能
1.首先展示一下弹幕视频弹幕原图,事实说话 2.代码展示 1>html代码展示 关闭弹幕 开启静音 2>css代码展示 *{ padding: 0; margin: 0; } input{ ...
- HTML5实现视频直播功能思路详解
HTML5实现视频直播功能思路详解 最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下 ...
- android 8.1.0怎么截屏,vivo Z1i怎么截屏?4种vivo Z1i截图方法
近日,vivo发布了第款Z系列手机--Z1i,简单来说就是vivo Z1的衍生版,存储空间升级到了128GB,不过处理器降为骁龙636,前置摄像头降为1600万像素,售价1898元,主打的是颜值.拍照 ...
- 华为Android10版怎么截屏,华为Mate10怎么截屏?华为Mate10两种截图方法
10月20日上午,华为带来了一款年度高端旗舰机----华为Mate10,主打大屏商务体验,该机已经在电商平台和线下渠道上市发售了.拿到真机之后相信不少朋友打使用过程当中需要用到截图操作.那么.华为Ma ...
- ASP.NET 视频截图功能的C#代码
前公司在制作播客系统(Web程序)中,用到从视频截图功能.下边是截图CatchImg方法,可从大多数的视频文件中截图成功,大家可测试;如果截图不成功,大多是因为视频本身的问题,如编码标准或加了密.但从 ...
最新文章
- 使用链栈来对十进制数进行任意进制的转换
- STM32F1迷你板外部中断
- “互联网+”时代下 银行信息如何保证安全?
- zookeeper3.4.6安装
- java项目processes设置,Jvm调优和SpringBoot项目优化的详细教程
- Centos7 Greenplum6.1开源版本集群部署
- 单片机wifi模块与服务器通信协议,单片机常用的几种通信协议
- shiro filter
- cvs 文件如何解析?
- JS数组 团里添加新成员(向数组增加一个新元素)只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。myarray[5]=88;...
- 智能视频监控中的多目标跟踪分析
- 嵌入式linux 中文输入法,一种用于嵌入式Linux系统的中文拼音输入法的制作方法...
- 计算机思维导论在线测试题库,计算机导论题库有答案.docx
- AxureUX中后台管理信息系统通用原型方案 v2 (全新AxureRP8作品 )
- Excel-甘特图制作
- php实现服务器访问统计,服务器端统计网站总访问人数
- native聊天界面 react_ReactNative 聊天 App 实战|RN 仿微信界面群聊|朋友圈
- CAD和GIS绘制图形分析
- vivado IP核知识点学习
- 360手机官方刷机教程(N5系列通用)
热门文章
- 【Linux+Mono+Asp.net公开课】视频下载
- 提升Visual Studio 2012的响应能力
- Flash Builder 4.7 安装
- python3 统计文件夹下文件(含文件夹)的个数
- [Shell 脚本] 备份数据库文件至OSS服务(纯shell脚本无sdk)
- 探索从 MVC 到 MVVM + Flux 架构模式的转变
- C#一键显示及杀死占用端口号进程
- Log4j显示异常的奇怪问题
- Java - 错误: quot;java.lang.ArrayIndexOutOfBoundsException: length=1; index=1quot;
- nodejs使用带用户和密码的Mongo示例