html

把视频绘制到canvas

发表回复

网上的大多数文档里都没有说视频(video对象)可以绘制到canvas上面，提到canvas的drawImage方法的时候都只提到了把Image对象和canvas对象绘制到canvas上，于是我这个熊孩子就把video对象也拿来试了试，果然也是可以的。

DEMO:demo.luojia.me/drawVideoOnCanvas

代码：

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的，没有什么使用价值。。。



2018年7月起本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统，如果看不到评论框，请尝试爬墙。