使用canvas实现和HTML5 video交互的弹幕效果

一、canvas实现弹幕性能较好

从技术实现成本角度讲,要实现弹幕效果,最简单的方法就是DOM+CSS3控制,如果我们的弹幕效果比较简单,使用CSS3动画实现也不失为一个好的方法。

但是如果我们的弹幕数据量比较大,就像下面这种:
超然弹幕

使用DOM来实现很容易卡成了80年代的拖拉机——一顿一顿的。

很显然,面对这种多元素的复杂动画,使用canvas实现是更加合适的,动画会流畅很多。

本文就将展示两个案例,使用canvas实现弹幕效果。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

两个高保真demo的源代码都是可以免费使用的,使用MIT许可,也就是需要保留源代码中的版权声明。

好,下面我们一个人来看一下。

二、HTML5 canvas实现的静态循环滚动播放弹幕

先看效果,您可以狠狠地点击这里:HTML5 canvas实现的静态循环弹幕demo

效果截图如下:
静态循环弹幕截图

相关JS代码直接查看页面源代码就可以看到了。

使用方法和API

语法如下:

canvasBarrage(canvas, data);

其中:

canvas
canvas表示我们的<canvas>画布元素,可以直接是DOM元素,也可以是<canvas>画布元素的选择器。
data
data表示弹幕数据,是一个数组。例如下面:

[{
    value: '弹幕1',
    color: 'blue',
    range: [0, 0.5]
}, {
    value: '弹幕2',
    color: 'red',
    range: [0.5, 1]
}]

可以看到数组中的每一个值表示一个弹幕的信息对象。其中value表示弹幕的文字内容;color表示弹幕描边的颜色(弹幕文字本身默认是白色);range表示弹幕在画布中的区域范围,例如[0, 0.5]表示弹幕在画布中的上半区域显示,[0.5, 1]表示弹幕在画布中的下半区域显示。

然后就可以看到无限滚动的弹幕效果了。

补充说明:

  • 此弹幕效果默认文字大小是28px,并且文字加粗,如果这个效果不符合您的需求,需要在canvasBarrage()方法中修改源代码。因为本来就是个简单静态效果,因此没有专门设计成API。
  • 此弹幕效果默认是白色文字加可变颜色描边,同样的,如果这个效果不符合您的需求,需要在canvasBarrage()方法中修改源代码。
  • 跟真实的弹幕效果有所不同,这里的弹幕出现的速度和时机不是基于特定时间,而是随机产生。所以看到有些文字好像开飞机,而有些文字好像坐着拖拉机。因为是死数据,这样设计会看上去更真实写。

三、canvas实现的和HTML5 video真实交互的弹幕

这个原型就有点厉害了,市面上估计很难找到这么负责任的原型页面了。实现的动机完全兴趣使然,上面实现了个简单的,就想着要不实现一个真实的,万一以后用得到呢?

先来看效果,您可以狠狠的点击这里:HTML5 canvas和mp4视频真实交互弹幕demo

页面效果截图如下:

和视频交互的弹幕效果截图

可以看到:

  1. 为了方便演示,我特意录制了一个21秒的视频;
  2. 可以实时更改弹幕的透明度字号大小位置等;
  3. 可以实时发送弹幕并显示。

部分演示如下:

点击播放按钮:
点击播放按钮

1秒后,此时可以看到弹幕呈现,2秒后有弹幕进入:
弹幕开始进入

设置位置居底显示后:
弹幕居底显示

也可以发送弹幕:
点击发送按钮截图示意
发送的弹幕显示的效果

使用方法和API

语法如下:

new CanvasBarrage(canvas, video, options);

其中:

canvas
canvas表示我们的<canvas>画布元素,只能是DOM元素。
video
video表示我们播放的视频元素,只能是DOM元素。
options
options为可选参数,包括:

API名称 默认值 简单释义
opacity 100 弹幕透明度。数值。0表示完全透明,100表示完全不透明。
fontSize 24 弹幕文字大小。数值。单位px
speed 2 弹幕移动速度。数值。单位px。如果设置为0,则表示弹幕不移动,直接视频中间区域显示。
range [0,1] 弹幕显示的垂直范围。数组。支持两个值。[0,1]表示弹幕整个随机分布,[0,0.5]表示只在上半区域随机分布,[0.5,1]表示只在下半区域随机分布。
color white 文字颜色。字符串。颜色值,可以是关键字,也可以是16进制颜色表示,例如#ff9000等。
data [] 弹幕数据。数组。数组中的值只能是一个一个的弹幕数据对象,例如:
[{
    value: '弹幕1',
    time: 1
}, {
    value: '弹幕2',
    time: 2
}]

valuetime是必须的,分布表示弹幕内容,和弹幕在视频播放到什么时候显示(单位是秒)。其他可选参数包括options参数中除data以外的所有参数,用来覆盖全局设置,例如:

[{
    value: '弹幕',
    time: 1,
    color: 'red'
}]

此时“弹幕”这个文字的颜色就不是默认的白色,而是这里设置的红色。

如何修改全局设置和添加弹幕?

当我们使用new CanvasBarrage()构造完我们的弹幕方法后,会返回一个弹幕对象,通过调用这个对象暴露的属性和方法,就可以进行全局的设置和添加弹幕等。例如:

var myBarrage = new CanvasBarrage(canvas, video, options);

如果我们想把弹幕透明度改成50%透明,可以:

myBarrage.opacity = 50;

就这么简单,于是新出现的弹幕都会以50%透明显示,类似的,弹幕文字大小和颜色,弹幕显示的区域范围都可以通过这样设置,例如:

myBarrage.fontSize = 20;

就是把弹幕文字颜色改成20px大小。

如果我们想动态添加弹幕,可以使用暴露的add()方法,语法如下:

myBarrage.add(obj);

其中obj的参数类型和支持属性和options-data数组中对象一模一样。例如:

myBarrage.add({
    value: 'new CanvasBarrage()',
    color: '#ff0000',
    time: 0
});

结果就是下面的效果:
发送的弹幕显示的效果

myBarrage还暴露了一个名为reset()方法,可以清除屏幕上所有的弹幕,并重新根据视频时间开始运动与显示。视频点击跳转时候的弹幕处理就是调用的此方法。

补充说明

  • 以上演示的全部交互效果和语法说明在demo页面的源代码中均有示意。
  • CanvasBarrage实例方法我已经专门挪到一个名为canvasBarrage.js中。
  • 最后,再次明确下,保留JS中的版权声明,万一回头这个JS升级了或者修复了某些问题,你还可以溯源。
  • 感谢LuLu UI对本demo提供的交互组件支持。

四、结束语

我特意看了下真实的视频网站的HTML5 video视频是如何处理弹幕效果的,例如腾讯视频,发现是基于DOM实现的(JS+DOM):

DOM实现的弹幕效果

然后B站也是基于DOM实现的,也就是一开始我所说的DOM+CSS3实现:
b站弹幕基于DOM实现

然后我陷入了深深的沉思……

思考

(本篇完)

分享到:

标签: , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想找个师兄入门前端?不妨 ×
想快速入门前端? ×


发表评论(目前16 条评论)

  1. 记得说道:

    大神请问下,整个demo跑起来了,很好用,但是当你改变canvas的大小,比如说改宽度为800,高度设置大于360,在火狐就一顿一顿了,在chrome正常,请问有解决方法吗?

  2. Jon说道:

    感谢野生字幕君、感谢红字解说、感谢指挥部

  3. adain说道:

    那就是说 DOM+CSS3 没问题? 不会卡成拖拉机? 还是因为我们的浏览器性能好

  4. 说道:

    1、B站可以选择CSS3和canvas两种弹幕渲染方式
    2、在我的机子上(i7-6700HQ, 1070), 弹幕量很大的情况下, CSS3方式比canvas流畅…

  5. 码农说道:

    有点疑惑,看了下代码,其实是往canvas里面插html,为什么会比直接外层插dom的方式性能更好?

    • 张 鑫旭说道:

      你确定仔细看了代码?canvas是无法插入html代码的。JS中出现的DOM创建是其他用的。

      • 码农说道:

        感谢回复!重新认真看了一遍,创建dom,然后删除,是否为了计算插入文字后的实际尺寸,关键是requestAnimationFrame来渲染canvas。望指教!

  6. Pandamo说道:

    谢谢张大!年底企业的活动可以用了!ie9+就支持canvas和video了,ie8的话用flash+dom弹幕实现,或者干脆不支持:P

  7. 严文彬说道:

    之前在ie8上用marquee标签实现了弹幕,不知道还有没有更好的方法?

  8. 盖大楼说道:

    收藏了,以后可能会用到

  9. 敖爽说道:

    移动端考虑这种canvas + videoDom 的模式 如果遇到video层级无限高的情况,emmmm是不是就不太合适了

  10. 五号说道:

    博主眉头一皱,发现事情并不用简单~

  11. dbflower说道:

    b站可选canvas渲染的