详解基于canvas的视频遮罩插件


Posted in HTML / CSS onJanuary 04, 2018

为一个视频添加一个覆盖物,从而挡住视频某区域,在视频的某一时间段,比如第10到第20分钟不显示划定的这块区域。应用场景包括 遮挡卫视图标 、 遮挡视频右下角广告 、 充当马赛克 等。

一个长视频可能包含多个遮罩,每个遮罩有特定的显示时间(在此时间外,隐藏该遮罩)。

前端实现视频遮罩

有 基于div 和 基于canvas 两种技术方案,本文是使用canvas完成的。

主要原理是在HTML的video标签上贴上一个透明的canvas图层,然后响应mousedown、mousemove、mouseup事件。 由于canvas事件只是基于canvas元素,所以canvas内部每个元素(一个矩形,一个圆等)的事件响应要利用坐标来自己代码完成。

插件GitHub地址

https://github.com/cunzaizhuyi/maskPlugin

演示地址
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html

实现的功能点

  1. 画遮罩(矩形)
  2. 设置遮罩样式(提供API)
  3. 遮罩移动
  4. 遮罩缩放
  5. canvas上鼠标样式变换

封装的API

名称 值类型 说明
1、矩形相关设置    
fillStyle 颜色值 矩形填充色, 默认为'#eeeeee'
strokeStyle 颜色值 矩形边界线颜色, 默认为'#0000ff'
inRectCursor 字符串 当鼠标处于某个小矩形内部时鼠标样式,默认为'move'。可以设置为'pointer'之类的。
2、矩形边界上的八个小矩形 相关设置    
bRectsStrokeStyle 颜色值 矩形边界上的小矩形的颜色,默认为'#0000ff'
bSideLength number 矩形边界上小矩形的边长值,默认为6
3、遮罩时间相关    
masksTime   每个遮罩的开始显示时间和结束显示时间,一个遮罩对应一个矩形

masksTime举例:

[{
    maskId: 1,
    startTime: 0,
    endTime: 10,
}, {maskId: 2,
    startTime: 3,
    endTime: 13,
}]

最后

这个基于原生canvas的700多行的小插件,对于探索canvas的世界可能仅仅是一个开始。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
使用CSS实现音波加载效果
May 07 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 #HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 #HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 #HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 #HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 #HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 #HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 #HTML / CSS
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
自我评价个人范文
2013/12/16 职场文书
出国考察邀请函
2014/01/21 职场文书
模具数控专业自荐信
2014/01/27 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
教师师德师风整改措施
2014/10/24 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
布达拉宫导游词
2015/02/02 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书