DPlayer — Danmaku Video Player for the Web

Introduction

DPlayer is an HTML5 video player that combines a clean modern interface with danmaku (scrolling comment overlay) functionality popular in East Asian video platforms. It supports multiple video formats, quality levels, subtitles, and real-time comment systems out of the box.

What DPlayer Does

• Plays HTML5 video with a polished, mobile-friendly control bar
• Renders danmaku comments that scroll across the video in real time
• Supports HLS and FLV streaming via optional hls.js and flv.js integration
• Provides multi-quality switching, subtitle tracks, and screenshot capture
• Connects to a backend API for persistent danmaku storage and retrieval

Architecture Overview

DPlayer creates a layered DOM structure over a video element: a canvas layer for danmaku rendering, a control bar with seek, volume, and settings, and optional subtitle overlays. The danmaku engine manages comment timing, collision avoidance, and rendering modes (scroll, top, bottom). For streaming formats, DPlayer delegates to external libraries like hls.js or flv.js that feed data into the video element via MediaSource Extensions.

Self-Hosting & Configuration

• Install via npm or include the CDN script and stylesheet
• Initialize with a container element and a video source URL
• Enable danmaku by pointing to a backend API endpoint or providing a static array
• Configure optional plugins like HLS, FLV, or MPEG-DASH for adaptive streaming
• Customize colors, hotkeys, playback speed options, and UI language

Key Features

• Built-in danmaku engine with collision detection and multiple display modes
• Thumbnail preview on the seek bar for quick visual navigation
• Screenshot button that captures the current video frame as a PNG
• Supports both on-demand and live streaming video sources
• Lightweight core with optional streaming format plugins

Comparison with Similar Tools

• Plyr — Accessible multi-source player; DPlayer adds danmaku and screenshot features
• Video.js — Plugin-rich ecosystem; DPlayer is simpler with danmaku built in
• ArtPlayer — Modern extensible player; DPlayer has wider community adoption for danmaku use cases
• XGPlayer — ByteDance player focused on performance; DPlayer prioritizes danmaku and ease of use

FAQ

Q: What is danmaku? A: Danmaku are scrolling comments overlaid on the video, a popular feature on platforms like Bilibili and Niconico.

Q: Can I use DPlayer without danmaku? A: Yes. Danmaku is optional and can be disabled entirely in the configuration.

Q: Does DPlayer support live streaming? A: Yes, via hls.js or flv.js integration for HLS and HTTP-FLV live streams respectively.

Q: How do I persist danmaku comments? A: Point the apiBackend config to a server endpoint. DPlayer includes a reference Node.js backend called DPlayer-node.

Sources

• https://github.com/DIYgod/DPlayer
• https://dplayer.diygod.dev