-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.html
566 lines (540 loc) · 30 KB
/
index.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
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bullet Chatting Proposal</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="./local.css" />
<script src='https://www.w3.org/Tools/respec/respec-w3c' async class='remove'></script>
<script class='remove'>
var respecConfig = {
specStatus: "CG-DRAFT",
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: "Bullet Chatting Community Group",
wgURI: "https://www.w3.org/community/bullet-chatting/",
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://www.w3.org/community/bullet-chatting/">W3C Bullet Chatting Community Group</a>.
</p>
</section>
<section>
<h2>Introduction</h2>
<p>
Bullet Chatting is called comment (コメント/comment) in Japanese. It refers to a comment or an annotation 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
Tencent video, iQiyi video, Youku video and Migu 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>
<ul>
<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: the bullet chat moves from right to left at a constant speed, stacked from top to bottom.
</li>
<li>
Reverse Bullet Chatting: the bullet chat moves from left to right at a constant speed, stacked from top to bottom. This is contrasted against Rolling Bullet Chatting.
</li>
<li>
Top Bullet Chatting: A bullet chat that is horizontally and statically centered, stacked from top to bottom.
</li>
<li>
Bottom Bullet Chatting: A bullet chat that is horizontally and statically centered, stacked from bottom to top.
</li>
</ol>
<p>
In addition, 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>
</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>
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>
</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="Screenshot of on-demand video interaction" src="images/video-on-demand.png" width="600">
<figcaption>
Example of on-demand video interaction
</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.png" width="600">
<figcaption>
Example of live streaming interaction: control the game being live streamed by sending bullet chatting commands to vote
</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 streaming, 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>
<figure>
<img alt="Example of video content enhancement" src="images/content-no-bulletchat.png" width="600">
<figcaption>
Example of video content enhancement: screenshot for the horror scene of a horror movie, without bullet chatting
</figcaption>
</figure>
<figure>
<img alt="Example of video content enhancement" src="images/content.png" width="600">
<figcaption>
Example of video content enhancement: screenshot for the horror scene of a horror movie, with bullet chatting
</figcaption>
</figure>
</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>
<figure>
<img alt="Interaction within a webpage" src="images/web_bulletchat.png" width="600">
<figcaption>
Example of interaction within a webpage: discussion on specific content in the webpage
</figcaption>
</figure>
</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>
<figure>
<img alt="Interactive wall" src="images/bulletchat-wall.png" width="600">
<figcaption>
Example of interactive wall: in an event, the audience participates in the event by sending bullet chatting to the big screen.
</figcaption>
</figure>
</section>
<section>
<h2>Masking</h2>
<p>
In this case, computer vision and AI technologies can be used to analyze the video content and identify the previously defined "main content" of the video, generate a mask and distribute it to the client side. The browser uses CSS to render the bullet chatting without covering the defined "video body content". This kind of technique is called masking.
</p>
<figure>
<img alt="Masking" src="images/bulletchat-Anti-block.png" width="600">
<figcaption>
[To be translated]
</figcaption>
</figure>
</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.png" width="600">
<figcaption>
Bullet chatting containing images and emoji
</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. Since bullet chatting does not depend on <code>video</code>, there is no requirement for a bullet chatting list with timestamps. In a common on-demand video bullet chatting scenario, there is often a list of bullet chatting similar to the time-aligned data in [[webvtt1]], which requires the developer to add <code>bulletchat</code> based on the time offset of the video.
</p>
</section>
<section>
<h2>Elements</h2>
<p>
<code>bulletchatlist</code> is a block-level element, and <code>bulletchat</code> is an inline element. The content permitted as children and descendants of the <code>bulletchat</code> element include: text, images, and hyperlinks.
</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
Bullet Chatting display area, ranging from 0-100, 50 is half screen, 100 is full screen.
The <code>scroll</code> <code>reverse</code> and <code>top</code> Bullet Chatting display
area is calculated from the top of bulletchatlist, the <code>bottom</code> Bullet Chatting
display area is calculated from the bottom of bulletchatlist</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>
When area = 70, the scroll bullet chatting only display in 0-70% height (the blue area)
</figcaption>
</figure>
<figure>
<img alt="Example of the allowOverlap attribute" src="images/sample3.png" width="600">
<figcaption>
In the case of <code>allowOverlap = true; area = 70</code>, when the display area of bullet chatting is not enough, the excess bullet chatting (in green) overlaps the normal ones
</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 a scroll bullet chat. 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>
<figure>
<img alt="Scroll bullet chatting" src="images/sample5.png" width="600">
<figcaption>
Bullet chatting scrolling from right to left
</figcaption>
</figure>
<p><code>top</code> indicates the top bullet chatting.</p>
<figure>
<img alt="Top bullet chatting" src="images/sample6.png" width="600">
<figcaption>
Top bullet chatting
</figcaption>
</figure>
<p><code>bottom</code> indicates the bottom bullet chatting.</p>
<figure>
<img alt="Bottom bullet chatting" src="images/sample7.png" width="600">
<figcaption>
Bottom bullet chatting
</figcaption>
</figure>
<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>
<figure>
<img alt="Reverse bullet chatting" src="images/sample8.png" width="600">
<figcaption>
Reverse bullet chatting scrolling from left to right
</figcaption>
</figure>
</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 <a href="#scenarios">Scenarios</a> section, we can see that the usage of Bullet Chatting is not limited to videos. For example, it's also widely used on <a href="#interaction-within-a-webpage">web page interaction</a> and <a href="#interactive-wall">interactive wall</a>, running independently as a part of the web page instead of a part of the video player.</p>
<p>If Bullet Chatting is designed as a subset of WebVTT, then it has to follow all the rules of WebVTT, 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="#live-streaming-interaction">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="#on-demand-video-interaction">on-demand video interaction</a> scenario. </p>
<p>From the perspective of usage scenarios of bullet chatting and WebVTT, the two have different ways of interaction. WebVTT is used for captions or subtitles. There's basically no special interactions. The browser only displays the textual expression of the content in a fixed time period on the video timeline. The content carried by the bullet chatting is not only the textual expression of the content in the video, but also the viewer's subjective understanding of the video content. Some bullet chatting needs to have interaction, for example, the viewer might want to look at a fast scrolling bullet chatting carefully, they can hover over it to make bullet chatting stop scrolling, or click on the bullet chatting to see more information, etc. Therefore, there is a clear difference between bullet chatting and WebVTT when used interactively.</p>
<p>In addition, the presentation of bullet chatting and the WebVTT subtitles are also very different. The subtitles of WebVTT can only be displayed in a fixed position of the video, and only one cue can be displayed at a specific time point. Bullet chatting is more flexible. It can be displayed fixedly, but is more often scrolling. The length of a WebVTT cue display is limited, but bullet chatting often has much more content than WebVTT subtitles. Therefore, for the size of the content carried, WebVTT can not meet the requirements of bullet chatting, and this is also a clear difference from WebVTT.</p>
<p>In summary, bullet chatting and WebVTT are somewhat similar in typical usage scenarios, but there is a big difference between the functions and implementation principles behind them. Therefore, when considering the standardization of the bullet chatting, it is not designed as a subset or extension of WebVTT.</p>
</section>
</body>
</html>