Bullet Chatting API Proposal

Current methods of implementing Bullet Chatting

Currently, Web developers mainly use Canvas or CSS to implement Bullet Chatting.

The Canvas Way

Element

Every bullet chat is a canvas rendering context. For example:

              const ctx = canvas.getContext('2d');
              ctx.fillText('bulletchat', x, y); // x is the x-axis coordinate, and y is the y-axis coordinate

Style

Style font (font), color (fillStyle), alpha (globalAlpha) and so on using the properties. For example:

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

Movement

Every bullet chat needs to be repainted in every frame. Before each change, the developer uses the clearRect method to erase the canvas, calculate the position of the bullet chat in the next frame, and draw the bullet chat in the new position. For example:

                const text = 'bulletchat'
                const bulletList = [{
                  text,
                  color: '#ccc',
                  left: canvas.offsetWidth, // x-axis coordinate
                  top: getRandomTop(), // y-axis coordinate
                  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;
                    }
                    // Modify the x-axis coordinate
                    bullet.left -= bullet.offset
                    ctx.fillStyle = color;
                    ctx.fillText(text, left, top);

                  }
                  requestAnimationFrame(drawBullets);
                }

The CSS Way

Element

Every bullet chat is a div element, i.e., <div>danmaku</div>.

Style

Style font (font), color (color), opacity (opacity) and so on using the properties.

Movement

Take Rolling Bullet Chatting as an example. The initial position of the bullet chat is in the rightmost, and it moves from right to left under the influence of the two CSS properties, transform and transition:

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

Pause: set the transform property of the bullet chatting element to the current position and set the transition duration to 0 to fix the bullet chatting at the current position. For example:

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

Advantages and disadvantages of existing implementation methods

The Canvas Way

Advantages

The performance is better when used with WebGL and a large number of bullet chatting text can be displayed at the same time.

Disadvantages

Not flexible. It is cumbersome to display bullet chat that contains both text and images, and to pause the animation of one of the moving bullet chats. Moreover, resolution issue needs to be addressed on mobile devices.

The CSS Way

Advantages

Simple and flexible. Developers can style the bullet chat through the DOM, and supports the combination of images and text. The user can pause a particular bullet chat of interest.

Disadvantages

Huge collections of DOM nodes will be generated when the there are many bullet chats. It will consume more memory and make the page unresponsive. Moreover, to manipulate the bullet chatting such as making the bullet chat disappear, the corresponding DOM node needs to be removed.

Recommended API

The content of this section is still under discussion in the Media and Entertainment Interest Group. If you find any issue, or have any correction or question, feel free to raise a GitHub issue or send an email to public-web-and-tv@w3.org.

Examples

          <bulletchatlist area="100" >
            <bulletchat mode="scroll" >This is Content</bulletchat>
            <bulletchat mode="bottom" >Fixed Content</bulletchat>
          </bulletchatlist>

Bullet Chatting uses new elements such as bulletchatlist and bulletchat. These elements are not used as children of the media elements audio and video. From the Scenarios section, we can see that the usage of bullet chatting is not limited to those media elements like video. In scenarios like Web page interaction or interactive wall, bullet chatting is independent of any media element.

This specification describes how the bullet chatting itself is rendered, not including the external bullet chatting list. Since bullet chatting does not depend on video, 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 bulletchat based on the time offset of the video.

Elements

bulletchatlist is a block-level element, and bulletchat is an inline element. The content permitted as children and descendants of the bulletchat element include: text, images, and hyperlinks.

Attributes

bulletchatlist element

area: 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 scroll reverse and top Bullet Chatting display area is calculated from the top of bulletchatlist, the bottom Bullet Chatting display area is calculated from the bottom of bulletchatlist
allowOverlap: Defines whether the Bullet Chatting beyond the display area allows overlap. false if the display does not show the Bullet Chatting beyond the display area; true if the Bullet Chatting will be displayed overlapping the display area.

Example of the area attribute — When area = 70, the scroll bullet chatting only display in 0-70% height (the blue area)

Example of the allowOverlap attribute — In the case of `allowOverlap = true; area = 70`, when the display area of bullet chatting is not enough, the excess bullet chatting (in green) overlaps the normal ones

bulletchat element

mode: Defines the type of Bullet Chatting, value is one of the folloing: scroll, top,bottom and reverse.
scroll 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 bulletchat-duration. Display time rule: bulletchatthe leftmost element into the bulletchatlist element area to the display bulletchat element from the rightmost bulletchatlist element of the display region disappears time consumed.

Bullet chatting scrolling from right to left

top indicates the top bullet chatting.

Top bullet chatting

bottom indicates the bottom bullet chatting.

Bottom bullet chatting

reverse represents a reverse scrolling bullet chatting. The bullet chatting will scroll from right to left, and the scrolling time is scroll similar.

Reverse bullet chatting scrolling from left to right

Events

bulletchat element

bulletchatstart: Triggered when the Bullet Chatting animation starts.
bulletchatend: Triggered when the Bullet Chatting animation ends.
bulletchatcancel: 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.

Style

bulletchatlist element

bulletchat-play-state: running | paused, defines the state of the Bullet Chatting as running or paused, and can be inherited.
bulletchat-duration: <time>, in seconds (s) or milliseconds (ms), defines the speed of the Bullet Chatting, which can be inherited.

bulletchat element

bulletchat-play-state: running | paused, which defines the state of the Bullet Chatting as running or paused, which can be inherited.
bulletchat-duration: <time>, in seconds (s) or milliseconds (ms), defines the speed of the Bullet Chatting, which can be inherited.
bulletchat-delay: <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.
Font size, color, border, line height, transparency, shadow, etc., same as existing CSS attributes.

Terminology

Current methods of implementing Bullet Chatting

The Canvas Way

Element

Style

Movement

The CSS Way

Element

Style

Movement

Advantages and disadvantages of existing implementation methods

The Canvas Way

Advantages

Disadvantages

The CSS Way

Advantages

Disadvantages

Recommended API

Examples

Elements

Attributes

bulletchatlist element

bulletchat element

Events

bulletchat element

Style

bulletchatlist element

bulletchat element