This document provides use cases and requirements for Danmaku, and propose a few Web APIs to easily enable Danmaku in the Web Browsers.

这是一份进行中的提案草稿。欢迎参加 W3C Web 中文兴趣组 关于弹幕的相关讨论。

引言

弹幕在日本被称呼为评论(コメント/comment),指代的是在视频的特定时间点以某种规律漂浮在视频上的评论或注释,可为视频观赏带来趣味性和意想不到的体验, 只有当大量评论同时出现在屏幕上时,人们才把这种状态称为“弹幕”。在中国,为了避免和原有评论的功能所冲突,改名为弹幕。

弹幕最早在日本 niconico (ニコニコ) 弹幕视频网站出现。在中国除了 bilibili、acfun 这样的弹幕视频网站外,大部分视频网站,如咪咕视频、腾讯视频、爱奇艺视频、优酷视频等都具有弹幕功能。

示例示意图
图为弹幕样例截图

弹幕的属性

弹幕具有以下四种属性:

弹幕的特性

弹幕特性有三种:

弹幕的基本模式

弹幕的基本模式有四种:

此外,弹幕还具有定制程度更高的高级模式,并不在本标准的描述范围。

弹幕的商业化运作

弹幕在中国及日本有着广泛的应用,主流的视频网站及其 app 都对弹幕有着较好的支持和应用。相关视频网站的月活可以参考如下(仅仅统计视频网站 app 月活):

数据来源:2019年最新移动APP TOP1000

术语

本文档使用了如下术语:

为什么需要弹幕?

用户体验因素分析

在直播文字互动的场景中常见的交互方式有:聊天室和弹幕两种方式。如下图示意图所示:

聊天室示例示意图
图为聊天室方式:输入文本内容后,内容列表将整体匀速的从下方向上滚动
弹幕示例示意图
图为弹幕方式:输入文本内容后,单行文本将出现在视频右侧,在独立的通道中从右到左移动

弹幕展示的优势

从下图中我们不难看出,当直播房间有海量用户时左侧聊天室的内容将会快速滚动,单条信息的驻留时间受整个聊天室的活跃度影响,用户越是活跃单条信息的停留时间越短。

示例示意图
图为聊天室单条信息的驻留时间示意图

而弹幕模式则从以下几个方面改善了海量信息的展示问题:

  • 信息密度

    从下图可以看出,与聊天室模式相比,弹幕模式有更宽的展示区域,在相同的信息以相同字号进行展示时弹幕模式有更好的阅读体验。

    示例示意图
    图为弹幕单条信息的驻留时间示意图
  • 信息更新频率

    在聊天模式中,单条信息与全体信息以同样的频率整体向上滚动无法分离,而弹幕模式每条信息都在独立的通道中移动,并不受其他信息的更新频率所影响,可以通过算法较好的保障每条信息在屏幕内的展示时长。

  • 视线移动

    在聊天模式中,用户如果关注视频内容则无法阅读文字,反之亦然。而弹幕模式通过把文字覆盖于画面之上让用户可以同时阅读文字与视频内容,无需视线在两个区域间往返移动,有更好的沉浸体验。具体如下面两图对比不难看出。

    示例示意图
    图为聊天室模式的视线移动示意图
    示例示意图
    图为弹幕模式的视线移动示意图
  • 阅读习惯

    在大多数语言中文字的阅读习惯是从左到右、从上到下,因此人们养成了横向阅读单行信息的习惯,弹幕模式下文字从右向左移动,人从左向右阅读,形成从左向右的合力,在这种模式下我们可以用较短时间理解文字的含义。如下图所示:

    示例示意图
    图为弹幕的阅读方向示意图

    在聊天室模式下人从左到右阅读,而阅读中的文字则在不停的向上移动,形成一个倾斜向上的合力,这会对快速阅读产生了障碍。如下图所示:

    示例示意图
    图为聊天室的阅读方向示意图

心理因素分析

从广泛的社会活动层面上来说,独自进行一项活动与和一群人一起进行一项活动相比,群体活动能够时刻影响人们对当前活动的评价以及对其的事后评价,一种“凝聚”的感觉会让人们对活动的评价更加积极。弹幕本质上来讲也是一种社会活动,相比传统视频,弹幕可以将视频和文字结合在一起,不仅可以更加吸引用户的注意力,同时可以可以提升用户的参与感。在不离开视频画面的前提下,通过与他人交流,还可以增加用户的社会存在感。

使用场景

本节主要描述弹幕的具体使用场景。

点播视频互动

在观看视频网站提供视频时,观看者在观看视频内容过程中根据内容启发会有一些想法或者吐槽点,就想要发表出来和更多的人分享,这时就需要弹幕来满足这个需求。通过弹幕,可以把同一时间观看者的评论通过固定方向滚动的方式显示在视频区域中,或者静止的显示在视频区域的顶部或底部,这样可以增加观看者和视频的互动特性以及观看者之间的互动。在相同时刻发送的弹幕基本上也具有相同的主题。

点播视频互动案例截图
点播视频弹幕案例

此种场景,弹幕数据一般是离线数据(非实时),也存在少部分实时数据。

直播视频互动

弹幕在视频直播场景中也能够成为主播与观众直接互动的方式。比起传统的实时评论,主播能够根据屏幕上弹幕的展现更直观了解观众的需求和反馈,更方便地调整接下来的行动和处理,也能够根据用户的输入进行交互操作。

直播视频互动案例截图
直播视频弹幕案例-直播中通过发送弹幕指令投票来控制直播游戏

此种场景,弹幕数据一般是实时数据。

标识视频亮点

由于弹幕只会在视频中特定的一个时间点出现,如果某个时间点出现大量弹幕,说明该时间点具有亮点和高能,观众对此时间点事件异常感兴趣,也能够作为视频打点和推荐等功能的参考数据。

视频内容增强

在视频点播或直播过程中,存在一些阶段,用户关注的不再是视频本身的画面内容,而是某个点所激发的情绪、情感,此时观看者通过弹幕叠加在视频上能够增强视频此时的效果,达到更好的体验。比如比赛胜利、剧情高潮时用以渲染气氛、或对惊悚恐怖部分的遮盖处理以降低恐惧感等。

视频内容增强案例截图
视频内容增强弹幕案例-截图为恐怖片的恐怖场景下,弹幕的遮盖降低了恐怖的气氛

Web页面互动

有时为了增加页面的效果,产品运营人员希望把相关内容做成有视觉冲击力的弹幕效果,这样可以在Web页面中对相关活动进行宣传重点,以此来增加页面的冲击力趣味性,吸引年轻人的关注,增加收益。

此种场景,弹幕是单独展现的,不依附于视频。

Web页面弹幕案例截图
Web页面弹幕案例-关于某一个活动专题的讨论

互动上墙

上墙是指网友通过发送弹幕内容,展示在线下会场准备好的显示屏上,增加线下活动或者会议的交互体验。上墙可以理解为是纯弹幕的应用,相当于大屏上不展示视频,甚至不展示内容,只展示活动现场或者网友对于线下活动的讨论内容,增强线下活动或者会议气氛,让参会者的参与感更强。

此种场景,弹幕也是单独展现的,不依附于视频。

弹幕互动上墙案例截图
弹幕互动上墙案例-某活动现场,观众通过发送弹幕到大屏上参与活动

建议接口与属性

样例

示例示意图
图为两条滚动弹幕和一条底部弹幕

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

属性

bulletchatlist 元素

  • area:定义滚动弹幕及顶部弹幕显示区域占 bulletchatlist 总高度的百分比,范围 0-100,50为半屏,100为满屏。
  • allowOverlap:定义超出显示区域的弹幕是否允许重叠。false表示不展示超出显示区域弹幕,true则表示超出显示区域弹幕会进行重叠展示。
area示例示意图
图为 area = 70 时,滚动弹幕及顶部弹幕只在 0 - 70% 高度的蓝色区域显示
allowOverlap示例示意图
图为 allowOverlap = true; area = 70,弹幕显示区域显示不下时,显示不下的弹幕(使用绿色标识)重叠在正常弹幕上方

bulletchat 元素

  • mode:定义弹幕类型,可选值为scrolltopbottom以及reverse

    scroll 为默认值,表示滚动弹幕。弹幕会从左往右进行滚动,滚动时间由CSS 属性bulletchat-duration控制。显示时间规则为:bulletchat元素的最左侧进入bulletchatlist元素显示区域到 bulletchat元素最右侧从bulletchatlist元素显示区域消失所消耗的时间。

    scroll示例示意图
    图为两条滚动弹幕正在从右往左滚动

    top 表示顶部弹幕。

    top示例示意图
    图为两条顶部弹幕

    bottom 表示底部弹幕。

    bottom示例示意图
    图为两条底部弹幕

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

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

事件

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 属性。