弹幕本身不是对视频的操作,其实是给视频上面加DIV等DOM元素,也就是给视频上面加层,然后展示我们想要的内容即可,目前弹幕的主要实现有两种方式:
Canvas
HTML+CSS
首先,这种我们自然想到用Canvas,使用Canvas能很方便地绘制动画,并且获得非常不错的性能,目前前端不少动画都是通过Canvas去做。不过对于基于Canvas的动画而言,最大的问题就是“交互性”上面。
如果用HTML+CSS的方式实现,我们可以很简单地通过监听原生DOM事件去知道哪一条弹幕与用户鼠标发生了交互。但是通过Canvas,我们只能通过监听画布的事件,然后做一堆遍历计算坐标的骚操作去确定是哪一条弹幕。从鹅厂的视频网站可以看到,他们的弹幕是可交互的,所以他们使用了HTML+CSS的实现方式;而B站的弹幕是非交互的,它提供Canvas和HTML+CSS可选,默认是前者。
虽然功能性上两者的实现会有点差异,但弹幕的基本原理都是一样。
所以弹幕本身就是对DIV元素的操作,DIV层一般在Video层上面,类似下面的图,不过也有放在Video层下面,弹幕层在底下,详情参考这篇文章的介绍 https://github.com/logcas/a-barrage