首页 > 代码库 > canvas实现拖动页面时显示窗口视频
canvas实现拖动页面时显示窗口视频
简介
当前主流的视频网站目前有不少新鲜好玩的功能，最明显的莫过于小视频的显示--当视频不在当前视口范围
时，会在右下角用一个小窗口来显示当前的视频，而且可以拖拽。
今晚心血来潮，起了动手试试的念头。我的想法很简单，用canvas来获取视频每一帧的数据，并用动画函数
requestAnimationFrame函数（这里没有考虑兼容性）来显示每一帧的视频数据。另外，对canvas绑定拖动的
功能，这样就基本实现了简易的窗口视频。
本章内容的重点就是requestAnimationFrame函数和canvas的drawImage函数，canvas的drawImage函数
可以获取图片或者视频的帧数据ImageData，可以对其操作，在之前的文章 使用cancas改变视频的灰度 一文中
已经介绍过该函数。另外就是拖动的实现，之前的文章中也有涉及。
现将demo呈上：
1 <style> 2 html{height:2000px;} 3 div{width: 500px;margin:40px auto;} 4 </style> 5 6 ------------------------------------------------------------------------ 7 8 <div> 9 <video id="v" controls="controls" autoplay="autoplay" src=http://www.mamicode.com/"a.mp4" width="500" height="300"></video>10 </div>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用法以及相关的位置参数获取。还是挺有
收获的。
canvas实现拖动页面时显示窗口视频
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。