DanmakuPlayer

A fully functional Vue 3 Danmaku (Bullet Chat) Player component inspired by Bilibili. It features a customizable video player with built-in danmaku rendering engine, supporting rolling, top, and bottom danmaku types. It includes a complete set of controls, customizable themes, and event handling for seamless integration into your Vue 3 applications.

Features

• Vue 3 Support: Built with Vue 3 and TypeScript.
• Danmaku Engine: High-performance danmaku rendering with collision detection.
• Multiple Types: Supports Rolling (Right-to-Left), Top (Center), and Bottom (Center) danmaku.
• Customizable: Full control over theme colors, sizes, and icons.
• Interactive: Send danmaku, adjust opacity/speed/font-size in real-time.
• Events: Rich event system for media controls and danmaku interactions.

Installation

npm install cw-danmaku-player
# or
pnpm add cw-danmaku-player

Usage

<template>
  <DanmakuPlayer
    :video-url="videoUrl"
    :danmaku-list="danmakuList"
    :player-init="playerInit"
    :player-theme="playerTheme"
    @request-danmaku-list="fetchDanmaku"
    @send-danmaku="handleSendDanmaku"
  />
</template>

<script setup>
import { ref } from 'vue';
import DanmakuPlayer from 'cw-danmaku-player';

const videoUrl = 'https://your-video-url.mp4';
const danmakuList = ref([]);

// Full Configuration Example
const playerInit = {
  volume: 0.7,             // Initial volume (0-1)
  muted: false,            // Initial mute state
  danmakuEnabled: true,    // Enable danmaku by default
  danmakuPlaceholder: "Send a friendly comment..." // Input placeholder
};

// Full Theme Example
const playerTheme = {
  primaryColor: '#00a1d6',          // Main theme color
  timeColor: '#fff',                // Time text color
  playIconColor: '#fff',            // Play/Pause icon color
  volumeIconColor: '#fff',          // Volume icon color
  settingsIconColor: '#fff',        // Settings icon color
  speedIconColor: '#fff',           // Speed icon color
  listIconColor: '#fff',            // List icon color
  fullIconColor: '#fff',            // Fullscreen icon color
  danmakuSwitchColor: '#00a1d6',    // Danmaku switch active color
  sendButtonColor: '#00a1d6',       // Send button background
  sendButtonHoverColor: '#00b5e5',  // Send button hover background
  sendButtonTextColor: '#fff',      // Send button text color
  activeColor: '#00a1d6',           // Active element color (sliders)
  
  // Custom Preset Colors for Sending Danmaku
  danmakuColors: [
    '#FE0302', '#FF7204', '#FFAA02', '#FFD302', '#FFFF00', 
    '#A0EE00', '#00CD00', '#019899', '#4266BE', '#89D5FF', 
    '#CC0273', '#222222', '#9B9B9B', '#FFFFFF'
  ]
};

const fetchDanmaku = () => {
  // Simulate fetching data
  console.log('Fetching danmaku list...');
  setTimeout(() => {
    danmakuList.value = [
      { text: 'Hello World!', time_position: 1, type: 0, color: '#fff' },
      { text: 'Awesome video!', time_position: 3, type: 0, color: '#ff0000' },
      { text: 'Top Comment', time_position: 5, type: 1, color: '#00ff00' }
    ];
  }, 500);
};

const handleSendDanmaku = (danmaku) => {
  console.log('User sent danmaku:', danmaku);
  // Add to local list or send to server
  // Note: The component automatically displays the sent danmaku locally
  // You might want to save it to your backend here
  danmakuList.value.push(danmaku); 
};
</script>

API

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | videoUrl | string | Required | The URL of the video source. | | danmakuList | DanmakuItem[] | [] | List of danmaku comments. | | autoplay | boolean | false | Whether to autoplay the video. | | poster | string | "" | URL of the video poster image. | | playerInit | PlayerInit | {} | Initial configuration for the player state. | | playerTheme | PlayerTheme | {} | Custom theme colors and icon visibility. |

DanmakuItem Interface

interface DanmakuItem {
  text: string;           // Content
  time_position: number;  // Time in seconds
  type?: 0 | 1 | 2;       // 0: Scroll (default), 1: Top, 2: Bottom
  color?: string;         // Text color (hex)
  opacity?: number;       // Opacity (0-100)
  font_size?: number;     // Font size (default 25)
}

PlayerInit Interface

interface PlayerInit {
  volume?: number;              // Initial volume (0.0 - 1.0)
  muted?: boolean;              // Initial muted state
  danmakuEnabled?: boolean;     // Whether danmaku is enabled by default
  danmakuPlaceholder?: string;  // Placeholder text for the input box
}

PlayerTheme Interface

interface PlayerTheme {
  // Colors
  primaryColor?: string;        // Primary brand color
  timeColor?: string;           // Time display color
  playIconColor?: string;       // Play/Pause icon color
  volumeIconColor?: string;     // Volume icon color
  settingsIconColor?: string;   // Settings icon color
  speedIconColor?: string;      // Speed control icon color
  listIconColor?: string;       // List toggle icon color
  fullIconColor?: string;       // Fullscreen icon color
  danmakuSwitchColor?: string;  // Danmaku switch active color
  sendButtonColor?: string;     // Send button background color
  sendButtonHoverColor?: string;// Send button hover background color
  sendButtonTextColor?: string; // Send button text color
  activeColor?: string;         // Active slider color (progress/volume)
  
  // Other
  danmakuColors?: string[];     // Array of hex colors for the user color picker
}

Events

| Name | Payload | Description | | --- | --- | --- | | play | - | Triggered when video starts playing. | | pause | - | Triggered when video is paused. | | ended | - | Triggered when video playback ends. | | timeupdate | currentTime: number | Triggered when playback time updates. | | fullscreen | isFullScreen: boolean | Triggered on fullscreen toggle. | | send-danmaku | danmaku: DanmakuItem | Triggered when user sends a danmaku. | | request-danmaku-list | - | Triggered when danmaku is enabled or list is opened (if list is empty). | | update:danmaku-enabled | enabled: boolean | Triggered when danmaku switch is toggled. |