canvas实现拖动页面时显示窗口视频

简介

　　当前主流的视频网站目前有不少新鲜好玩的功能，最明显的莫过于小视频的显示--当视频不在当前视口范围

时，会在右下角用一个小窗口来显示当前的视频，而且可以拖拽。

　　今晚心血来潮，起了动手试试的念头。我的想法很简单，用canvas来获取视频每一帧的数据，并用动画函数

requestAnimationFrame函数（这里没有考虑兼容性）来显示每一帧的视频数据。另外，对canvas绑定拖动的

功能，这样就基本实现了简易的窗口视频。

　　本章内容的重点就是requestAnimationFrame函数和canvas的drawImage函数，canvas的drawImage函数

可以获取图片或者视频的帧数据ImageData，可以对其操作，在之前的文章 使用cancas改变视频的灰度 一文中

已经介绍过该函数。另外就是拖动的实现，之前的文章中也有涉及。

　　现将demo呈上：

　　

<style>
        html{height:2000px;}
        div{ 500px;margin:40px auto;}
    </style>

------------------------------------------------------------------------

<div>
    <video id="v" controls="controls" autoplay="autoplay" src="a.mp4" width="500" height="300"></video>
</div>

------------------------------------------------------------------------

function $(i){return document.getElementById(i)}
    var v = $("v");
    function fixScrollEvent(el,fn,context){
        var type = "mousewheel";
        context = context || window;
        try{
            document.createEvent("MouseScrollEvents");
            type = "DOMMouseScroll";
        }catch(e){}
        if(type == "mousewheel"){
            el.onmousewheel = function(e){
                e = e || window.event;
                if(window.opera && window.opera.version()<10){
                    e.delta = -e.wheelDelta / 30;
                }else{
                    e.delta = e.wheelDelta / 30;
                }
                fn.call(context,e);
            }
        }else{
            el.addEventListener("DOMMouseScroll",function(e){
                e.delta = -e.detail;
                fn.call(context,e);
            },false)
        }
    }

    fixScrollEvent(window,function(e){
        var dh,cp;
        var c, d,graphic;
        var imageData;
        //视口宽度和高度
        var vpWidth = window.innerWidth || document.documentElement.clientWidth
                || document.body.clientWidth;
        var vpHeight = window.innerHeight || document.documentElement.clientHeight
                || document.body.clientHeight;
        cp = v.getBoundingClientRect();
        dh = cp.top + v.scrollTop + v.clientHeight;

        c = $("miniVideo");
        if(dh < document.documentElement.scrollTop){
            if(c){
                c.setAttribute("data-flag",1);
                c.style.display = "";
            }else{
                c = document.createElement("canvas");
                c.id = "miniVideo";
                // Drag 拖动插件必须要确定top和left值，不能使用right和bottom代替。
                c.style.cssText = "300px;height:200px;background:black;position:fixed;" +
                        "left:"+(vpWidth - 30 - 300)+"px;top:"+(vpHeight - 20 - 200)+"px;";
                c.setAttribute("data-flag",1);
                if(c.innerText !== undefined){
                    c.innerText = "Your Browser can not support Canvas!";
                }else{
                    c.textContent = "Your Browser can not support Canvas!";
                }
                document.body.appendChild(c);
                new Drag(c)

            }
            requestAnimationFrame(function recurse(){
                graphic = c.getContext("2d");
                graphic.drawImage(v,0,0, c.width, c.height);
                if(c.getAttribute("data-flag")){
                    requestAnimationFrame(recurse);
                }
            })
        }else{
            if(c){
                //设置空字符串，之前犯了个错误，在html property保存的始终是字符串。
                c.setAttribute("data-flag","");
                c.style.display = "none";
            }
        }
    })

　　实例图片：　　

　　实现虽然简单，但是通过这个demo我又复习了一些基本的canvas用法以及相关的位置参数获取。还是挺有

收获的。