Canvas基本视频引用

最新推荐文章于 2024-06-20 15:43:31 发布

寓言s

最新推荐文章于 2024-06-20 15:43:31 发布

阅读量1.9k

点赞数

分类专栏： javascript canvas

本文链接：https://blog.csdn.net/u011551941/article/details/50432951

版权

javascript canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

demo1 demo2

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            *{
                margin:0;
                padding:0;
            }
            #Mycanvas{
                position: absolute;
                top:0;
                left:0;
            }
            #mvideo{
                position:absolute;
                top:50%;
                left:50%;
                width:480px;
                height:360px;
                margin: -180px 0 0 -240px;
            }
        </style>
    </head>
    <body>
        <canvas id="Mycanvas">
            
        </canvas>
        <video loop controls autoplay id="mvideo" style="opacity:0">
            <source src="../t.mp4" type="video/mp4"></source>
        </video>
    </body>
    <script>
        !(function(doc){
           
            var Mycanvas=doc.getElementById("Mycanvas"),
                cont=Mycanvas.getContext("2d"),
                Myvideo=doc.getElementById("mvideo");
                cw=window.innerWidth; 
                ch=window.innerHeight;
                Mycanvas.width=cw;
                Mycanvas.height=ch;
                Myvideo.addEventListener("canplay",function(){
                    var cont2=cerateCanvas(cw,ch).getContext("2d");
                    draw(this,cont,cont2,cw,ch);
                },false)
                
                function cerateCanvas(w,h){
                    var cr=doc.createElement("canvas");
                        cr.width=w;
                        cr.height=h;
                    return cr;
                }
                function draw(v,c,c2,w,h){
                    if(v.paused||v.ended){
                        cancelAnimationFrame(stop);
                        return false;
                    }
                    c2.drawImage(v,0,0,w,h);
                    var idata=c2.getImageData(0, 0, w, h),
                        data=idata.data;
                    for (var i = 0; i < data.length; i+=4) {
                        var r=data[i],
                            g=data[i+1],
                            b=data[i+2];
                            brightness=(3*r+4*g+b)>>>3;
                        data[i]=brightness;
                        data[i+1]=brightness;
                        data[i+2]=brightness;
                    };
                    idata.data=data;
                    c.putImageData(idata,0,0);
                    var stop=requestAnimationFrame(function(){
                        draw(v,c,c2,w,h);
                    });
                }
        })(document)
    </script>
</html>

Canvas加载视频和图片是一样的使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面。