专栏首页前端杂货铺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="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用法以及相关的位置参数获取。还是挺有

收获的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS的内建函数reduce

    @(js) reduce函数,是ECMAScript5规范中出现的数组方法。在平时的工作中,相信大家使用的场景并不多,一般而言,可以通过reduce方法实现的逻...

    欲休
  • 异步Promise实现

    简介    异步回调的书写往往打乱了正常流的书写方式,在ECMAScript 6中实现了标准的Promise API,旨在 解决控制回调流程的问题。   简单的...

    欲休
  • ReactJS分析之入口函数render

    前言   在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等...

    欲休
  • Canvas小游戏——五子棋

    Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容。 HTML5的Canvas画布功能真的很强大,与之对应的还...

    Javanx
  • 判断一个对象是否是空

    用户4973967
  • 前端技巧——js篇

    流眸
  • cssjshtml 多div现实echarts饼图实现

    葫芦
  • 7 mysql事务(包括redo log,undo log,MVCC)及事务实现原理

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    天涯泪小武
  • 文档片段(createDocumentFragment)

    天天_哥

扫码关注云+社区

领取腾讯云代金券