forked from w3c/danmaku
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_en.html
516 lines (491 loc) · 25.7 KB
/
index_en.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bullet Chatting Proposal</title>
<meta charset='utf-8'>
<script src='https://www.w3.org/Tools/respec/respec-w3c' async class='remove'></script>
<script class='remove'>
var respecConfig = {
specStatus: "unofficial",
edDraftURI: "https://w3c.github.io/danmaku/",
shortName: "danmaku",
editors: [{
name: "Zhihao Huang",
companyURL: "https://www.bilibili.com/",
company: "Bilibili Inc."
}, {
name: "Song Xu",
companyURL: 'http://www.migu.cn',
company: "China Mobile"
}],
authors: [{
name: "Fuqiao Xue",
companyURL: "http://www.chinaw3c.org/",
company: "W3C"
}, {
name: "Lei Zhao",
companyURL: "http://www.migu.cn",
company: "China Mobile"
}, {
name: "Zhaoqin Tan",
companyURL: "https://www.bilibili.com/",
company: "Bilibili Inc."
}, {
name: "Yajun Chen",
companyURL: 'http://www.migu.cn',
company: "China Mobile"
}],
wg: "Chinese Web Interest Group",
wgURI: "https://www.w3.org/2018/chinese-web-ig/",
charterDisclosureURI: "https://www.w3.org/2004/01/pp-impl/109611/status",
github: {
repoURL: "https://github.com/w3c/danmaku",
branch: "master"
},
};
</script>
</head>
<body>
<section id='abstract'>
<p>
This document describes use cases and requirements for Danmaku, and proposes a Web API to easily enable Danmaku in Web browsers.
</p>
</section>
<section id='sotd'>
<p>
This is still a work in progress. The proposal is being incubated in the <a href="https://w3c.github.io/chinese-ig/">W3C Web Chinese Interest Group</a>.
</p>
</section>
<section>
<h2>Introduction</h2>
<p>
Bullet Chatting is called comment (コメント/comment) in Japanese. It refers to a comment or a comment floating over the
video in certain way at a specific point of time of the video, which can bring interesting and unexpected
experiences to the users while watching the video. Only when a large amount of comments shown up on the screen at the same time,
people call this state of the player a Danmaku. In China, in order to avoid conflict with the function of the original
comment, it was renamed as Bullet Chatting.
</p>
<p>
Bullet Chatting first got popular from the Japanese video-sharing website Niconico (ニコニコ). In China, besides the video-sharing websites that feature Bullet Chatting such as Bilibili and AcFun, for most of the other video websites, such as MiGu video,
Tencent video, iQiyi video, Youku video, etc., Bullet Chatting is also provided as a function of the player.
</p>
<figure>
<img alt="Example of bullet chatting" src="images/danmaku.png" width="600">
<figcaption>
An example of bullet chatting
</figcaption>
</figure>
<section>
<h2>Bullet Chatting attributes</h2>
<p>
The Bullet Chatting has the following four attributes:
</p>
<ul>
<li>
Mode: Rolling Bullet Chatting, reverse Bullet Chatting, top Bullet Chatting, bottom Bullet Chatting.
</li>
<li>
Basic properties: body, appearance time, duration, font, font size, color, etc.
</li>
<li>
Timeline: The on-demand barcorder is a real-time insertion or custom timeline for video playback time, live
broadcasts, and other scenes.
</li>
<li>
Container: A block-level element, typically the same size as the video.
</li>
</ul>
</section>
<section>
<h2>Bullet Chatting characteristics</h2>
<p>
Bullet Chatting has three characteristics:
</p>
<ol>
<li>
Independence of space: Although it is displayed in the same element, each type of Bullet Chatting mode is in
different layers in spatial calculation, and each mode can have multiple layers, and the Bullet Chatting
occupancy in each layer does not overlap.
</li>
<li>
Deterministic of rendering: If the Bullet Chatting area and the rendered list are fixed, then the position and
order of each Bullet Chatting is fixed each time it is rendered.
</li>
<li>
Uniformity of modes: The survival time of the Bullet Chatting of each mode remains the same.
</li>
</ul>
</section>
<section>
<h2>Basic modes of the Bullet Chatting</h2>
<p>
There are four basic modes of the Bullet Chatting:
</p>
<ol>
<li>
Rolling Bullet Chatting: Scrolls the screen from the right to the left at a constant speed, showing the
top-down priority.
</li>
<li>
Reverse Barr: Scrolls the screen from the left to the right at a constant speed, showing the top-down
priority.
</li>
<li>
Top Bullet Chatting: A Bullet Chatting that is statically centered from top to bottom, with top-down
priority.
</li>
<li>
Bottom Bullet Chatting: A Bullet Chatting that is centered from the bottom up and is displayed with a
bottom-up priority.
</li>
</ol>
<p>
In addition, the Bullet Chatting has higher levels of customization and is out of scope for this document.
</p>
</section>
<section>
<h2>Commercial operation of Bullet Chatting</h2>
<p>
Bullet Chatting has a wide range of applications in China and Japan, and mainstream video sites and their apps
have good support and application for Bullet Chatting. The monthly activity of the relevant video websites can be
referred to as follows (only counting monthly active users for video-sharing websites/apps):
</p>
<ul>
<li>iQiyi: 575.1677 million monthly active users</li>
<li>Tencent Video: 467.491 million monthly active users</li>
<li>Youku: 444.829 million monthly active users</li>
<li>Mango TV: 100.267 million monthly active users</li>
<li>Bilibili animation: 80.652 million monthly active users</li>
<li>Sohu video: 36.35 million monthly active users</li>
<li>Niconico: 18.74 million monthly active users [<a
href='https://ssl4.eir-parts.net/doc/9468/ir_material_for_fiscal_ym/64532/00.pdf'>source</a>]</li>
<li>MiGu video: 15.625 million monthly active users</li>
</ul>
<p>Source: <a href='https://www.analysys.cn/article/detail/20019224'>2019 Latest Mobile App TOP1000</a></p>
</section>
</section>
<section>
<h2>Terminology</h2>
<p>
<p>
This document uses the following terms:
</p>
<ul>
<li>
<dfn>WebVTT</dfn> — A file format for marking text tracks. [[webvtt1]]
</li>
<li>
<dfn>TTML</dfn> — A type of content that represents a time-series text medium that is exchanged between
authoring systems. [[ttml1]]
</li>
</ul>
</p>
</section>
<section>
<h2>Background</h2>
<section>
<h2>Analysis from the perspective of user experience</h2>
<p>During live streaming, two popular text chatting features are often provided to encourage user interaction: Chatroom and Bullet Chatting.</p>
<figure>
<img alt="an example of chatroom" src="images/why1.png" width="600">
<figcaption>
Chatroom: with the input of text, the content list will be scrolling from the bottom to the top at a constant speed.
</figcaption>
</figure>
<figure>
<img alt="an example of Bullet Chatting" src="images/why2.png" width="600">
<figcaption>
Bullet Chatting: with the input of text, a single line of text will show up from the right side of the video, moving right-to-left in an independent path.
</figcaption>
</figure>
<section>
<h2>Advantage of displaying with Bullet Chatting</h2>
<p>We can see from the below figure that when many people are chatting in the same room during live streaming, messages will be scrolling quickly, the display time of each message is highly affected by the chatroom's activity, the more active the users are, the less time each message will be displayed.</p>
<figure>
<img alt="the display time of a single message in a chatroom" src="images/why3.png" width="600">
<figcaption>
The display time of a single message in a chatroom
</figcaption>
</figure>
<p>Bullet Chatting tries to provide a better way to display each message when many people are chatting online at the same time.</p>
<ul>
<li>
<p>Density of the Information </p>
<p>Compared to the chatroom, Bullet Chatting has a wider display area, which provides better user experience reading a message even with the same font size.</p>
<figure>
<img alt="the display time of a single message in Bullet Chatting" src="images/why4.png" width="600">
<figcaption>
a figure of the display time of a single message in Bullet Chatting
</figcaption>
</figure>
</li>
<li>
<p>Update Frequency of the Information</p>
<p>In the Chatroom display mode, each message is scrolling up at the same speed as the others, so it's very difficult to do some special handling. While in the Bullet Chatting mode, each message is moving along their own path, and rarely affected by the update frequency of all the other messages, so it's possible and encouraged to ensure a proper display time for each message by algorithms.</p>
</li>
<li>
<p>Movement of Users' Sight</p>
<p>In the Chatroom display mode, it's difficult for a user to concentrate on both the video content and the text comments. While in the Bullet Chatting mode, video content is actually covered by the text comments, the user's sight doesn't need to move back and forth across the video and the text messages, so it can provide better immersive experience.
</p>
<figure>
<img alt="Movement of Users' Sight in Chatroom" src="images/why5.png" width="600">
<figcaption>
a figure of the movement of users' sight in the Chatroom display mode
</figcaption>
</figure>
<figure>
<img alt="Movement of Users' Sight in Chatroom in Bullet Chatting" src="images/why6.png" width="600">
<figcaption>
a figure of the movement of users' sight in the Bullet Chatting display mode
</figcaption>
</figure>
</li>
<li>
<p>Reading Habit</p>
<p>In a lot of languages, text is read from left to right and from top to bottom, so many people are used to read a single-line message horizontally. In the Bullet Chatting mode, text is mostly moving right-to-left, which allows people to read from left to right, so the user can get the meaning of such message very quickly.
</p>
<figure>
<img alt="direction of reading in Bullet Chatting" src="images/why7.png" width="600">
<figcaption>
a figure of the direction of reading in the Bullet Chatting display mode
</figcaption>
</figure>
<p>While in the Chatroom display mode, even the user would like to read from left to right, the text messages are actually moving from bottom to top, which leads a mismatching bevel angle and increases the difficulty for the user to easily scan the comments.</p>
<figure>
<img alt="direction of reading in chatroom" src="images/why8.png" width="600">
<figcaption>
a figure of the direction of reading in the chatroom display mode
</figcaption>
</figure>
</li>
</ul>
</section>
</section>
<section>
<h2>Analysis of the Psychological Factors</h2>
<p>From the perspective of social psychology, compared to watching a video alone, the feeling of participating in a group activity will make the user more cheerful. Bullet Chatting, by showing the text comments and the video content together in a comfortable way, can create a sense of participation in a group activity to the user. Without leaving his sight from the video content, the user is able to read others' comments on the on-going video clip or the up-coming clip, this helps to increase everyone's social presence.
</p>
</section>
</section>
<section>
<h2>Scenarios</h2>
This section mainly describes the specific use scenarios of Bullet Chatting.
<section>
<h2>On-demand video interaction</h2>
<p>
When watching a video site to provide a video, the viewer will have some ideas or voicing points in the process
of watching the video content, and want to publish it to share with more people. At this time, a Bullet Chatting
is needed to meet this demand. Through the Bullet Chatting, the viewer's comments at the same time can be
displayed in the video area by scrolling in a fixed direction, or statically displayed at the top or bottom of
the video area, which can increase the interactive characteristics of the viewer and the video and the viewer.
Interaction between the two. The Bullet Chatting sent at the same time basically has the same theme.
</p>
<figure>
<img alt="To be translated" src="images/video-on-demand.png" width="600">
<figcaption>
To be translated
</figcaption>
</figure>
<p>
In this scenario, the Bullet Chatting data is generally offline data (not real-time), and there is also a small
amount of real-time data.
</p>
</section>
<section>
<h2>Live streaming interaction</h2>
<p>Bullet Chatting can also be a direct interaction between the anchor and the viewers in the live streaming
scene. Compared with the traditional real-time comments, the anchor can understand the
audience's needs and feedback more intuitively according to the display of the Bullet Chatting on the screen, adjust the next action and processing more conveniently, and can also interact according to the viewers' input.</p>
<figure>
<img alt="Live streaming interaction" src="images/video-live.jpeg" width="600">
<figcaption>
To be translated
</figcaption>
</figure>
<p>
In this scenario, the Bullet Chatting data is generally real-time data.
</p>
</section>
<section>
<h2>Identify video highlights</h2>
<p>
Since the Bullet Chatting will only appear at a specific point in the video, if there is a large number of
Bullet Chatting at a certain point in time, it means that the time point has bright spots and high energy. The
audience is interested in this time point event and can also be used as video management and Recommended
reference data for other functions.
</p>
</section>
<section>
<h2>Video content enhancement</h2>
<p>
In the process of video on demand or live broadcast, there are some stages, the user is not concerned with the
picture content of the video itself, but the emotions and emotions stimulated by a certain point. At this time,
the viewer can enhance the video by superimposing on the video by the Bullet Chatting. The effect at this time
is to achieve a better experience. For example, the victory of the game, the climax of the plot to render the
atmosphere, or the cover of the horror of the horror to reduce fear.
</p>
</section>
<section>
<h2>Interaction within a webpage</h2>
<p>
Sometimes in order to increase the effect of a webpage, the product operator hopes to make the relevant content
into a visual impact of the Bullet Chatting effect, so that the relevant activities can be promoted in the webpage to increase the impact of the page, attracting The attention of young people increases the income.
</p>
<p>
In this kind of scene, the Bullet Chatting is displayed separately and is not attached to the video.
</p>
</section>
<section>
<h2>Interactive wall</h2>
<p>
<i>On the wall</i> means that the netizen can display the interactive experience of the offline event or conference by
sending the content of the Bullet Chatting to display the display screen prepared offline at the venue. The
upper wall can be understood as a purely Bullet Chatting application, which is equivalent to not displaying
video on the big screen, or even displaying content. It only shows the discussion content of the event site or
the netizen for the offline event, and enhances the offline event or the meeting atmosphere. Participants have a
stronger sense of participation.
</p>
<p>
In this kind of scene, the Bullet Chatting is also displayed separately, not attached to the video.
</p>
</section>
<section>
<h2>Masking</h2>
<p>
<p>
When watching a video, there may be a large number of bullet chatting appearing on the screen at the same time, which may unexpectedly cover the video itself, and disrupt users from watching the media content. For example, when the user is learning to dance, they may not see the movement of the dancer. [To be translated part: 这种情况下，就可以借助计算机视觉和AI的能力，对视频内容进行分析，并将之前已经定义好的“视频主体内容”进行识别，生成蒙版并分发给客户端后，客户端利用CSS3的特性进行渲染从而达成弹幕不会覆盖定义的“视频主体内容”的效果，这种弹幕被称为“蒙版弹幕”，也被称为“防挡弹幕”。]
</p>
<figure>
<img alt="Masking" src="images/bulletchat-Anti-block.png" width="600">
<figcaption>
[To be translated]
</figcaption>
</figure>
</p>
</section>
<section>
<h2>Non-text bullet chatting</h2>
<p>
Bullet chatting can contain non-text content such as emoji and images, to express the viewer's thoughts and opinions more vividly.
</p>
<figure>
<img alt="Non-text bullet chatting" src="images/bulletchat-fig.jpg" width="600">
<figcaption>
Bullet chatting containing images
</figcaption>
</figure>
</section>
</section>
<section>
<h2>Recommended API</h2>
<section>
<h2>Examples</h2>
<aside class="example" title="Bullet Chatting usage">
<pre>
<bulletchatlist area="100" >
<bulletchat mode="scroll" >This is Content</bulletchat>
<bulletchat mode="bottom" >Fixed Content</bulletchat>
</bulletchatlist>
</pre>
</aside>
<p class="note">
Bullet Chatting uses new elements such as
<code>bulletchatlist</code> and <code>bulletchat</code>. These elements are not used as children of the media elements <code>audio</code> and <code>video</code>. From the Scenarios section, we can see that the usage of bullet chatting is not limited to those media elements like video. In scenes like Web page interaction or interactive wall, bullet chatting is independent to any media element.
</p>
<p class="note">
This specification describes how the bullet chatting itself is rendered, not including the external bullet chatting list. 由于弹幕不依赖于<code>video</code>，因此不要求有弹幕列表。在常见的点播视频弹幕场景中，往往有一个类似[[webvtt1]]这样同步视频时间轴的弹幕列表，
这种情况需要由开发者根据视频时间添加<code>bulletchat</code>。
</p>
</section>
<section>
<h2>Attributes</h2>
<section>
<h2>bulletchatlist element</h2>
<ul>
<li><dfn>area</dfn>: Defines the percentage of the total height of the bulletchatlist in the scroll bar and
the top Bullet Chatting display area, ranging from 0-100, 50 is half screen, 100 is full screen.</li>
<li>
<dfn>allowOverlap</dfn>: Defines whether the Bullet Chatting beyond the display area allows
overlap. <code>false</code> if the display does not show the Bullet Chatting beyond the display
area; <code>true</code> if the Bullet Chatting will be displayed overlapping the display area.
</li>
</ul>
<figure>
<img alt="Example of the area attribute" src="images/sample4.png" width="600">
<figcaption>
To be translated
</figcaption>
</figure>
<figure>
<img alt="Example of the allowOverlap attribute" src="images/sample3.png" width="600">
<figcaption>
To be translated
</figcaption>
</figure>
</section>
<section>
<h2>bulletchat element</h2>
<ul>
<li>
<code>mode</code>: Defines the type of Bullet Chatting, value is one of the folloing: <code>scroll</code>, <code>top</code>,<code>bottom</code> and <code>reverse</code>.
<p><code>scroll</code> The default value indicates the scroll Bullet Chatting. The Bullet Chatting scrolls
from left to right, and the scrolling time is controlled by the CSS
property <code>bulletchat-duration</code>. Display time rule: <code>bulletchat</code>the leftmost element
into the <code>bulletchatlist</code> element area to the display <code>bulletchat</code> element from the
rightmost <code>bulletchatlist</code> element of the display region disappears time consumed.</p>
<p><code>top</code> Indicates the top Bullet Chatting.</p>
<p><code>bottom</code> Indicates the bottom Bullet Chatting.</p>
<p><code>reverse</code> Represents a reverse scrolling Bullet Chatting. The Bullet Chatting will scroll from
right to left, and the scrolling time is <code>scroll</code> similar.</p>
</li>
</ul>
</section>
</section>
<section>
<h2>Events</h2>
<section>
<h2>bulletchat element</h2>
<ul>
<li><code>bulletchatstart</code>: Triggered when the Bullet Chatting animation starts.</li>
<li><code>bulletchatend</code>: Triggered when the Bullet Chatting animation ends.</li>
<li><code>bulletchatcancel</code>: Trigger when the Bullet Chatting is terminated unexpectedly, such as the
Bullet Chatting is removed or hidden, or because the display area is not displayed.</li>
</ul>
</section>
</section>
<section>
<h2>Style</h2>
<section>
<h2>bulletchatlist element</h2>
<ul>
<li><code>bulletchat-play-state</code>:running | paused, defines the state of the Bullet Chatting as running
or paused, and can be inherited.</li>
<li><code>bulletchat-duration</code>:<time>, in seconds (s) or milliseconds (ms), defines the speed of
the Bullet Chatting, which can be inherited.</li>
</ul>
</section>
<section>
<h2>bulletchat element</h2>
<ul>
<li><code>bulletchat-play-state</code>:running | paused, which defines the state of the Bullet Chatting as
running or paused, which can be inherited.</li>
<li><code>bulletchat-duration</code>:<time>, in seconds (s) or milliseconds (ms), defines the speed of
the Bullet Chatting, which can be inherited.</li>
<li><code>bulletchat-delay</code>:<time>, in seconds (s) or milliseconds (ms), defines when the Bullet
Chatting animation begins, defining a negative value allows a Bullet Chatting to start moving from the
middle.
</li>
<li>Font size, color, border, line height, transparency, shadow, etc., same as existing CSS attributes.</li>
</ul>
</section>
</section>
</section>
<section>
<h2>A Gap Analysis of Bullet Chatting and WebVTT</h2>
<p>[[webvtt1]] is a file format intended for marking up external text track resources, one of its typical usages is to provide captions or subtitles for video content. Bullet Chatting is also often intended for providing text descriptions of video content, so it was once considered as a subset of WebVTT, and a special format of subtitles.
<p>However, in the section of <a href="#generatedID-9">Scenarios</a>, we can see that the usage of Bullet Chatting is not limited to videos, for example, it's also widely used on <a href="#web">webpage interaction</a> and <a href="#generatedID-14">the interactive wall</a>, running independently as a part of the webpage instead of a part of the video player.</p>
<p>If Bullet Chatting is designed as a subset of [[webvtt1]], then it has to follow all the rules of [[webvtt1]], and to cue the Bullet Chatting messages as a <code>vtt</code> file in the <code>track</code> element of a <code>video</code> element. However, in the <a href="#generatedID-11">live streaming interaction</a> scenario, the Bullet Chatting messages come from comments submitted by users in real-time, it's impossible to prepare a <code>vtt</code> file which contains all the Bullet Chatting messages in advance. This real-time requirement also applies to the <a href="#generatedID-10">on-demand video interaction</a> scenario. </p>
<p>Therefore, we would like to propose a new bulletchat element instead of making it a subset of WebVTT.</p>
</section>
</body>
</html>