canvas 插件,

　　给视频添加一个封面，以遮挡视频的某个区域，指定区域在视频的某个时间段，比如第10到20分钟，不会显示。应用包括屏蔽电视图标、屏蔽视频右下角广告、充当马赛克等。

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

　　前端实现视频遮罩

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

　　主要原理是在HTML的视频标签上粘贴一个透明的画布层，然后响应mousedown、mousemove、mouseup事件。因为canvas事件只是基于canvas元素，每个元素的事件响应(矩形、圆形等。)应该由自己的代码使用坐标来完成。

　　插件GitHub地址

　　https://github.com/cunzaizhuyi/maskPlugin

　　演示地址

　　http://htmlpreview.github.io/?https://github . com/cunzaizhuyi/mask plugin/blob/master/mask/mask . html

　　实现的功能点

　　绘制遮罩(矩形)设置遮罩样式(API提供)在画布上移动遮罩缩放鼠标样式变换封装的API

　　名称值类型1的描述。矩形相关设置fillStyle颜色值矩形填充颜色，默认为 #eeeeee strokeStyle颜色值矩形边界颜色，默认为 # 0000ff 输入光标字符串。当鼠标在一个小矩形内时，默认是“移动”。它可以设置为“指针”或类似的东西。2.矩形边界上的八个小矩形与设置bRectsStrokeStyle颜色值相关。矩形边界上的小矩形颜色默认为 # 0000ff边长数，默认值为6。3.masksTime与每个掩码的开始显示时间和结束显示时间相关，一个掩码对应一个矩形。

　　masksTime举例：

　　[{ maskId: 1，开始时间：0，结束时间：10，}，{maskId: 2，开始时间：3，结束时间：13，}]最后

　　这个基于原生canvas的700多行插件可能只是探索canvas世界的开始。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。