标签:
当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围
时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽。
今晚心血来潮,起了动手试试的念头。我的想法很简单,用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="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.clientWidth 47 || document.body.clientWidth; 48 var vpHeight = window.innerHeight || document.documentElement.clientHeight 49 || 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用法以及相关的位置参数获取。还是挺有
收获的。
标签:
原文地址:http://www.cnblogs.com/accordion/p/4211917.html