弹幕建议接口规范

当前弹幕实现方式

当前开发者实现弹幕主要有如下两种方式：

Canvas 动态绘制弹幕
CSS 动态绘制弹幕

Canvas 动态绘制弹幕

元素

每个弹幕都是一个 Canvas 渲染上下文。如：

            const ctx = canvas.getContext('2d');
            ctx.fillText('bulletchat', x, y); // 其中x表示横方向的坐标，y表示纵方向的坐标

样式

通过给弹幕赋予 Canvas 属性：字体（font）、颜色（fillStyle）、透明度（globalAlpha）等实现样式。如：

            ctx.font = '20px Arial';
            ctx.fillStyle = '#000000';

运动

每一帧都需要对所有弹幕进行重绘。每次改变之前需要先使用clearRect方法清空画布、计算弹幕在下一帧的位置、在新位置绘制弹幕。如：

            const text = 'bulletchat'
            const bulletList = [{
              text,
              color: '#ccc',
              left: canvas.offsetWidth, // 用于标识弹幕x轴坐标
              top: getRandomTop(), // 用于标识弹幕y轴坐标
              offset: getBulletOffset(), // 弹幕移动速度，由canvas实际宽度和移动时间来算出
              width: Math.ceil(ctx.measureText(text).width) // 文字像素宽度
            }]
            function drawBullets() {
              for(let index = 0, l = bulletList.length; index < l; i++) {
                let bullet = bulletList[index];
                let {left, width, top, offset, color, text} = bullet
                // 检测弹幕是否超出屏幕
                if (left + width <= 0 ) {
                  bulletList.splice(index, 1);
                  index--;
                  continue;
                }
                // 不停修改弹幕x轴坐标
                bullet.left -= bullet.offset
                ctx.fillStyle = color;
                ctx.fillText(text, left, top);

              }
              requestAnimationFrame(drawBullets);
            }

CSS 动态绘制弹幕

元素

每个弹幕都是一个 div 元素，即 <div>danmaku</div>

样式

通过给弹幕赋予 CSS 样式：字号（font-size）、颜色（color）、透明度（opacity）等实现样式。

运动

滚动及逆向滚动弹幕有水平方向的运动。以滚动弹幕（从右往左滚动方向）为例：

运行：弹幕初始状态定位在最右侧，在 transform 和 transition 两个 CSS 属性的作用下向左运动。如：

            position: absolute;
            top: 0;
            left: 980px;
            transform: translateX(0) translateY(0) translateZ(0);
            transition: transform 5s linear;

暂停：把弹幕元素的 transform 属性设为当前位置，同时把 transition 属性时间设为 0，就实现了把弹幕固定在当前位置。如：

            transform: translateX(-980px) translateY(0) translateZ(0);
            transition: transform 0s linear;

现有弹幕实现方式优缺点分析

Canvas 方式

优点

性能较好，配合WebGL可以提升应用性能，同时可以同时显示大量的弹幕文字。

缺点

不够灵活，显示文字+图像的弹幕比较麻烦；对单独某条弹幕进行暂停比较繁琐。同时在移动设备上需要考虑Canvas分辨率的问题，比如文字发虚等。

CSS 方式

优点

简单灵活，可以通过DOM绘制丰富的弹幕样式，比如图像和文字的组合。用户可以单独暂停某一个感兴趣的弹幕。

缺点

弹幕较多时会生成的大量的DOM，消耗更多的内存，容易导致页面卡顿。同时需要对弹幕展示进行特定的优化，比如在弹幕消失，需要删除对应的DOM。

建议接口与属性

本章的内容仍在媒体和娱乐兴趣组讨论，如果您有任何问题或内容更正，您可以在本文档的 GitHub 库中发一个新 issue 或发送电子邮件至 public-web-and-tv@w3.org。

样例

          <bulletchatlist area="100" >
            <bulletchat mode="scroll" >这里是弹幕内容</bulletchat>
            <bulletchat mode="bottom" >固定在底部弹幕</bulletchat>
          </bulletchatlist>

弹幕采用全新的标签元素bulletchatlist和bulletchat，新增的弹幕标签元素不是video或者audio等元素的子元素。从“使用场景”可以看到，弹幕不仅只是和视频等媒体元素有关联，在“Web页面”或者“互动上墙”等场景下弹幕是独立作为页面的一部分存在，不依赖于视频等元素。

弹幕规范描述了弹幕绘制方式，不包括外部列表。由于弹幕不依赖于video，因此不要求有弹幕列表。在常见的点播视频弹幕场景中，往往有一个类似[[webvtt1]]这样同步视频时间轴的弹幕列表，这种情况需要由开发者根据视频时间添加bulletchat。

元素

bulletchatlist 为块元素，bulletchat 为行内元素。bulletchat 元素允许嵌套内容内容包括：文本、图片、超链接。

属性

bulletchatlist 元素

area：定义弹幕显示区域占 bulletchatlist 总高度的百分比，范围 0-100，50为半屏，100为满屏。滚动弹幕、顶部弹幕、逆向滚动显示区域从 bulletchatlist 顶部开始计算，底部弹幕显示区域从 bulletchatlist 底部开始计算。
allowOverlap：定义超出显示区域的弹幕是否允许重叠。false表示不展示超出显示区域弹幕，true则表示超出显示区域弹幕会进行重叠展示。

area示例示意图 — 图为 area = 70 时，滚动弹幕只在 0 - 70% 高度的蓝色区域显示

allowOverlap示例示意图 — 图为 allowOverlap = true; area = 70，弹幕显示区域显示不下时，显示不下的弹幕（使用绿色标识）重叠在正常弹幕上方

bulletchat 元素

mode：定义弹幕类型，可选值为scroll、top、bottom以及reverse。
scroll 为默认值，表示滚动弹幕。弹幕会从左往右进行滚动，滚动时间由CSS 属性bulletchat-duration控制。显示时间规则为：bulletchat元素的最左侧进入bulletchatlist元素显示区域到 bulletchat元素最右侧从bulletchatlist元素显示区域消失所消耗的时间。

图为两条滚动弹幕正在从右往左滚动

top 表示顶部弹幕。

图为两条顶部弹幕

bottom 表示底部弹幕。

图为两条底部弹幕

reverse 表示逆向滚动弹幕。弹幕会从右往左进行滚动，滚动时间与scroll类似。

图为三条逆向弹幕正在从左往右滚动

事件

bulletchat 元素

bulletchatstart：弹幕动画开始时触发。
bulletchatend：弹幕动画结束时触发。
bulletchatcancel：弹幕意外终止时触发，如弹幕被移除或被隐藏，或因为超出显示区域不被展示。

样式

bulletchatlist 元素

bulletchat-play-state：running | paused，定义弹幕状态为运行或暂停，可继承。
bulletchat-duration：<time>，单位为秒(s)或者毫秒(ms)，定义弹幕播放速度，可继承。
字号、颜色、边框、行高、透明度、阴影等，同现有 CSS 属性。

bulletchat 元素

bulletchat-play-state：running | paused，定义弹幕状态为运行或者暂停，可继承。
bulletchat-duration：<time>，单位为秒(s)或者毫秒(ms)，定义弹幕播放速度，可继承。
bulletchat-delay：<time>，单位为秒(s)或者毫秒(ms)，定义弹幕动画于何时开始，定义一个负值可以实现一个弹幕从中间开始运动。
字号、颜色、边框、行高、透明度、阴影等，同现有 CSS 属性。

术语

当前弹幕实现方式

Canvas 动态绘制弹幕

元素

样式

运动

CSS 动态绘制弹幕

元素

样式

运动

现有弹幕实现方式优缺点分析

Canvas 方式

优点

缺点

CSS 方式

优点

缺点

建议接口与属性

样例

元素

属性

bulletchatlist 元素

bulletchat 元素

事件

bulletchat 元素

样式

bulletchatlist 元素

bulletchat 元素