简介

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

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

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

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

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

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

可以获取图片或者视频的帧数据ImageData，可以对其操作，在之前的文章  一文中

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

　　现将demo呈上：

　　

1  5  6 ------------------------------------------------------------------------ 7  8 
     
       9     
      10 
     
11 12 ------------------------------------------------------------------------13 14 function $(i){
   return document.getElementById(i)}15     var v = $("v");16     function fixScrollEvent(el,fn,context){17         var type = "mousewheel";18         context = context || window;19         try{20             document.createEvent("MouseScrollEvents");21             type = "DOMMouseScroll";22         }catch(e){}23         if(type == "mousewheel"){24             el.onmousewheel = function(e){25                 e = e || window.event;26                 if(window.opera && window.opera.version()<10){27                     e.delta = -e.wheelDelta / 30;28                 }else{29                     e.delta = e.wheelDelta / 30;30                 }31                 fn.call(context,e);32             }33         }else{34             el.addEventListener("DOMMouseScroll",function(e){35                 e.delta = -e.detail;36                 fn.call(context,e);37             },false)38         }39     }40 41     fixScrollEvent(window,function(e){42         var dh,cp;43         var c, d,graphic;44         var imageData;45         //视口宽度和高度46         var vpWidth = window.innerWidth || document.documentElement.clientWidth47                 || document.body.clientWidth;48         var vpHeight = window.innerHeight || document.documentElement.clientHeight49                 || document.body.clientHeight;50         cp = v.getBoundingClientRect();51         dh = cp.top + v.scrollTop + v.clientHeight;52 53         c = $("miniVideo");54         if(dh < document.documentElement.scrollTop){55             if(c){56                 c.setAttribute("data-flag",1);57                 c.style.display = "";58             }else{59                 c = document.createElement("canvas");60                 c.id = "miniVideo";61                 // Drag 拖动插件必须要确定top和left值，不能使用right和bottom代替。62                 c.style.cssText = "width:300px;height:200px;background:black;position:fixed;" +63                         "left:"+(vpWidth - 30 - 300)+"px;top:"+(vpHeight - 20 - 200)+"px;";64                 c.setAttribute("data-flag",1);65                 if(c.innerText !== undefined){66                     c.innerText = "Your Browser can not support Canvas!";67                 }else{68                     c.textContent = "Your Browser can not support Canvas!";69                 }70                 document.body.appendChild(c);71                 new Drag(c)72 73             }74             requestAnimationFrame(function recurse(){75                 graphic = c.getContext("2d");76                 graphic.drawImage(v,0,0, c.width, c.height);77                 if(c.getAttribute("data-flag")){78                     requestAnimationFrame(recurse);79                 }80             })81         }else{82             if(c){83                 //设置空字符串，之前犯了个错误，在html property保存的始终是字符串。84                 c.setAttribute("data-flag","");85                 c.style.display = "none";86             }87         }88     })

　　实例图片：　　

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

收获的。