canvas实现拖动页面时显示窗口视频
时间:2022-05-04
本文章向大家介绍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用法以及相关的位置参数获取。还是挺有
收获的。
- Eclipse相关问题
- (54) 剖析Collections - 设计模式 / 计算机程序的思维逻辑
- Django 博客教程(三):创建应用和编写数据库模型
- package-info.java文件详解
- 在Spring下集成ActiveMQ
- Java中只有按值传递,没有按引用传递!
- 我是如何使用Python来自动化我的婚礼的
- left join 过滤条件写在on后面和写在where 后面的区别
- 如何在大量jar包中搜索特定字符
- sql自连接经典示例
- astyle 使用说明
- Spring AOP 实现原理与 CGLIB 应用
- Django 博客教程:建立django工程(连载二)
- 使用python实现后台系统的JWT认证
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
- 使用PyTorch的TensorBoard-可视化深度学习指标 | PyTorch系列(二十五)
- 技术分享 | 只有.frm和.ibd文件时如何批量恢复InnoDB的表
- 14个 JavaScript 代码优化技巧
- 你写注释吗?写你就输了
- 跨端框架模板解析引擎了解一下
- 【Java】基础04:Java虚拟机
- 【Java】基础07:常量、变量和数据类型
- 【Java】基础08:数据类型的转换
- 【Java】基础09:运算符
- MYSQL 监控 performance_schema 拿得起 不放下(1))
- AkShare-股票数据-交易日历
- AkShare-股票数据-股票指数历史成份
- 封装变化的内容
- 域信息收集自动脚本WinPwn