Bullet Chat Settings

1. Overview

Danmaku (bullet comments) is a core interactive feature of modern video websites. It enables real-time interaction between viewers by overlaying scrolling text on the video screen. zwplayer provides a complete danmaku support solution.

2. Technical Architecture Design

The operating principle of zwplayer's danmaku support is: a playback terminal sends a string of danmaku to the danmaku server, the danmaku server then forwards it to various danmaku receiving terminals. The receiving terminal receives the danmaku and calls the relevant methods provided by the zwplayer player to append the danmaku to the internal danmaku list, and then completes the rendering process.

zwplayer's support for danmaku implements danmaku rendering and danmaku sending/setting UI, but does not implement danmaku sending. Danmaku sending is implemented by developers themselves using appropriate transmission technologies (e.g., calling websocket, various cloud service providers' messaging (IM) interfaces). This design avoids zwplayer being tied to a specific forwarding server, allowing users to freely choose their danmaku sending technical architecture.

To facilitate developers to quickly build danmaku functionality, we have also implemented a danmaku server module. For details, please see Danmaku Server Description

3. Core Implementation Steps

3.1 Danmaku Sending Function

Provide a custom function to handle danmaku sending:

sendDanmu: function(text) {
    // Implement danmaku sending logic
    if (typeof window.ws_send === 'function') {
        window.ws_send(text);
    }
}

3.2 Danmaku Receiving/Display

When receiving danmaku from the server, call the player API to display:

// After receiving danmaku data
window.mainplayer.appendDanmu(danmuObj);

4. Complete Example (WebSocket Implementation)

<body>
<div id="player-holder"></div>
<div id="dammu-controlbar"></div>
</body>
<script language="javascript">
    window.mainplayer = new ZWPlayer({ // Save object to mainplayer for appending danmaku
    url:'http://example.com/vod/test.mp4',
    playerElm:'#player-holder', // player element ID, or can be direct DOM object
    controlbar: true,
    enableDanmu: true,
    sendDanmu: function(text) { // Provide a custom function to send danmaku input from internal danmaku UI
        if (typeof window.ws_send === 'function') {
            window.ws_send(text);
        }
        }
    });
    // Create zwplayer's internal danmaku input UI in the DIV element with ID dammu-controlbar
    window.mainplayer.buildDanmuControlbar('dammu-controlbar');
    // Create a websocket for sending and receiving danmaku
    var wsChat = new WebSocket('ws://192.168.1.64:3680');
    
    wsChat.onopen = function() {
        console.log('ws client opened')
    }
    wsChat.onmessage = function(event) {
    if (event.data.length > 0) {
        var danmuObj = JSON.parse(event.data);
        if (window.mainplayer) {
            // Received danmaku forwarded from server, append danmaku to zwplayer's danmaku list
            window.mainplayer.appendDanmu(danmuObj);
        }
    }
    }
    
    // Send function implemented using websocket for sending danmaku to server
    window.ws_send = function wsChatSend(data) {
        wsChat.send(data);
    }
</script>

The above code implements an example of sending and receiving danmaku through websocket technology. First, when creating the zwplayer player instance, the sendDanmu parameter is provided, which points to a user-defined function. This custom function internally calls the websocket object to send danmaku data. Then, when creating the websocket object, the websocket's onmessage event is used to listen for danmaku messages forwarded from the server side. This message is actually an encoded json. After json decoding, the appendDanmu method of zwplayer is called to append the danmaku to the player's internal list for rendering.

5. Built-in Danmaku Control UI

zwplayer provides a fully functional danmaku input interface, including:

Danmaku text input
Emoticon selection
Danmaku settings
Danmaku on/off control

The purpose of zwplayer's built-in danmaku input UI is for inputting danmaku, emoticons, setting danmaku, and toggling danmaku. Although developers can completely implement this UI themselves, considering that implementing a danmaku input UI is not an easy task for developers, zwplayer exposes the buildDanmuControlbar function for creating the danmaku input UI. Reusing this UI can save time from "reinventing the wheel" and is recommended.

This danmaku control UI can be bound to a separate DIV from the player, and will automatically stick below the player during fullscreen playback for convenient user input.

The danmaku UI interface is as follows:

Danmaku UI interface

Click the settings shown in the red box to pop up the following settings panel

Danmaku settings

6. appendDanmu Method

Function Prototype: function appendDanmu(danmuObj, setting)

6.1 danmuObj Parameter (Danmaku Object)

Property Name	Type	Description
text	string	Required, danmaku text content
color	string	Optional, font color setting
border	string	Optional, text border style, similar to css (e.g., "1px solid #666")
outlineColor	string	Optional, outer border color, no border if not set

6.2 setting Parameter (Danmaku Settings)

setting is the setting for the current single danmaku. Although the danmuObj parameter can perform simple style settings for danmaku, this parameter allows more settings for a single danmaku. This parameter can be omitted; if omitted, the player's internal current danmaku settings are used. The setting parameter is a js object, and the related property descriptions of this object are as follows:

Property Name	Type	Description
forcedFontSizeValue	number	Forced font size, 100 is the base font size, i.e., default font size. Greater than 100 expands the font, otherwise reduces the font.
isFilterColorFont	boolean	Whether to filter colored fonts. If true, the color from danmuObj is not used.
opacityValue	number	Opacity (0-100). 100 is fully visible, 0 is transparent and invisible.
speedValue	number	Scrolling speed of danmaku text, multiple of 100 pixels. If 1, scrolls 100 pixels per second. If 0.5, scrolls 50 pixels per second.
isFilterImage	boolean	Whether danmaku filters emoticon images. If true, emoticon images inside danmaku will not be displayed.

Catalog Navigation