网上的大多数文档里都没有说视频(video对象)可以绘制到canvas上面,提到canvas的drawImage方法的时候都只提到了把Image对象和canvas对象绘制到canvas上,于是我这个熊孩子就把video对象也拿来试了试,果然也是可以的。
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
绘制视频到canvas <video width="300" height="150" autoplay="autoplay" src="http://luojia.u.qiniudn.com/vedio/osu20130517.webm" controls="controls"></video> <canvas></canvas> <a href="http://luojia.me" target="_blank">来自luojia.me</a><script>// <![CDATA[ var v=document.querySelector("video"); var c=document.querySelector("canvas"); var ct=c.getContext("2d"); v.ondurationchange=function(){ function refresh(){ ct.drawImage(v,0,0); //把视频对象用drawImage绘制到canvas上 requestAnimationFrame(refresh); } requestAnimationFrame(refresh); setInterval(function(){c.style.height=c.height=v.offsetHeight; c.style.width=c.width=v.offsetWidth;},500); } /*刷新帧,不用管这里*/ (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelRequestAnimationFrame = window[vendors[x]+ 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); // ]]></script> |
打开浏览器的任务管理器还是可以发现这么做是相当耗CPU的,没有什么使用价值。。。
本文发布于 https://luojia.me
本站文章未经文下加注授权不得拷贝发布。
本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。