canvas实现拖动页面时显示窗口视频
2015-01-08 21:36
351 查看
简介
当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽。
今晚心血来潮,起了动手试试的念头。我的想法很简单,用canvas来获取视频每一帧的数据,并用动画函数
requestAnimationFrame函数(这里没有考虑兼容性)来显示每一帧的视频数据。另外,对canvas绑定拖动的
功能,这样就基本实现了简易的窗口视频。
本章内容的重点就是requestAnimationFrame函数和canvas的drawImage函数,canvas的drawImage函数
可以获取图片或者视频的帧数据ImageData,可以对其操作,在之前的文章 使用cancas改变视频的灰度 一文中
已经介绍过该函数。另外就是拖动的实现,之前的文章中也有涉及。
现将demo呈上:
<style> html{height:2000px;} div{width: 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 = "width: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用法以及相关的位置参数获取。还是挺有
收获的。
相关文章推荐
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- 安卓canvas实现拖动显示大背景图片
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- opencv2/3播放视频实现进度条显示拖动、快进、快退、逐帧播放、显示当前帧于图像
- 点击页面的悬浮窗口实现随意拖动
- 让Flex控件 Canvas实现弹出窗口并拖动
- Qt中单个窗口中实现多个页面显示
- Js实现窗口的的显示和拖动
- 问题五-实现详细信息页面(点击列表,预览窗口显示具体信息)
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- QT嵌于某个页面中的多个视频窗口如何显示全屏与恢复
- 传输视频流时拖动窗口或显示窗口失去焦点视频传输停止
- [原创]dataGrid在页面拖动行(在表头,用htc文件实现)
- 在JSP页面中实现检索数据的分页显示
- FireFox不用插件实现单窗口多页面浏览
- 轻松实现页面提交时,显示“提交中..” (转帖)
- .Net 环境下实现可变大小的无标题窗口拖动
- 在J2ME中实现全屏幕显示Canvas的方式
- 最简短的HTML页面实现显示时间
- 轻松实现页面提交时,显示“提交中..”