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

时间:2021-08-25 05:05:35

简介

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

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

  今晚心血来潮,起了动手试试的念头。我的想法很简单,用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="" height=""></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()<){
e.delta = -e.wheelDelta / ;
}else{
e.delta = e.wheelDelta / ;
}
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",);
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 - - )+"px;top:"+(vpHeight - - )+"px;";
c.setAttribute("data-flag",);
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,,, c.width, c.height);
if(c.getAttribute("data-flag")){
requestAnimationFrame(recurse);
}
})
}else{
if(c){
//设置空字符串,之前犯了个错误,在html property保存的始终是字符串。
c.setAttribute("data-flag","");
c.style.display = "none";
}
}
})

  实例图片:  

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

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

收获的。