Vue Danmaku screenshot

Vue Danmaku

Author Avatar Theme by Hellodigua
Updated: 3 Jul 2025
676 Stars

基于 Vue 的弹幕交互组件 | A danmaku component for Vue

Categories

Overview

The vue-danmaku is an interactive Danmaku component built on Vue3 that enhances video experiences with real-time commentary and lively text interactions. This component allows developers to easily integrate rich, animated text elements that float across the screen, offering an engaging way to present user-generated comments or feedback during media playback. Its versatility and ease of use make it a valuable tool for creating dynamic and interactive content.

This component comes with a variety of customizable options and features, making it suitable for different applications, whether it’s for streaming platforms, educational videos, or any sort of media that benefits from viewer interaction. Let’s dive into the key features this component offers.

Features

  • Danmus: Supports a list of bullet comments, which can be pure text or custom objects, allowing for extensive flexibility in content presentation.

  • Channels: Allows for a customizable number of channels to display comments, ensuring that your design can accommodate various layouts and preferences.

  • Autoplay: Activates automatic playback of the Danmaku comments, providing a seamless viewing experience right from the start.

  • Looping Options: Includes features for looping comments and preventing repeated entries, giving your audience a unique experience each time.

  • Speed Control: Adjust the speed of the comments (measured in pixels per second), allowing you to tailor the flow of text to better suit your content’s pace.

  • Performance Mode: Enhances efficiency by using requestAnimationFrame for smoother animations, especially necessary when hardware acceleration is disabled.

  • Auto Resize: Automatically listens for container size changes and recalculates the placement of Danmaku, ensuring the text remains aligned and visually appealing on any screen.

  • Mirror Mode: Provides the option to mirror comments, allowing them to move from right to left, which can be an interesting feature for creative presentations.