explaingit

zhw2590582/artplayer

3,765JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

ArtPlayer.js is a customizable HTML5 video player for websites with built-in subtitle support, HLS/DASH/FLV streaming, and a plugin system for bullet comments, chapter markers, Chromecast casting, and more.

Mindmap

mindmap
  root((ArtPlayer.js))
    Core Features
      Subtitle support
      Playback controls
      Plugin system
    Streaming
      HLS support
      DASH support
      FLV support
    Plugins
      Bullet comments
      Chromecast
      Chapter markers
      Ad formats
    Tech Stack
      JavaScript
      HTML5
      npm
    Audience
      Web developers
      Video platforms
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed a fully featured video player on a website with subtitle support and custom playback controls.

USE CASE 2

Build a streaming video platform that serves HLS or DASH adaptive video with quality switching.

USE CASE 3

Add a scrolling bullet-comment overlay to a video player for interactive community viewing.

USE CASE 4

Integrate Chromecast support into a web video player with minimal extra code.

Tech stack

JavaScriptHTML5npmhls.jsdash.jsflv.js

Getting it running

Difficulty · easy Time to first run · 5min

Available via npm or CDN, no build step needed for basic use, pre-built CDN file included.

No license information was mentioned in the explanation.

In plain English

ArtPlayer.js is a JavaScript video player for websites, built on the HTML5 video element. It is designed to be added to a web page with a few lines of code and provides a complete set of playback controls, while making most of those controls customizable so developers can match them to their own interface or business logic. Out of the box it supports three subtitle formats: VTT, ASS, and SRT. It is also designed to work alongside streaming libraries like hls.js (for HLS adaptive streaming), dash.js (for DASH), and flv.js (for FLV video), which are commonly used for live video or platforms that serve multiple video quality levels. Connecting those libraries to the player is straightforward. The player has a plugin system with a growing collection of officially maintained plugins. The danmuku plugin adds a bullet-comment overlay, a style of viewer comments that scroll across the screen popularized by Japanese and Chinese video platforms. Other plugins handle HLS and DASH quality switching, video chapter markers, thumbnail previews on the progress bar, multiple simultaneous subtitle tracks, Google Chromecast casting, standard video advertising formats (VAST and VPAID), an ambilight glow effect that extends the video colors onto the surrounding page, picture-in-picture mode, independent audio track selection, and automatic speech recognition for live captions. Installation uses npm, yarn, pnpm, or bun. A pre-built file is also available from CDNs for direct inclusion in a page without a build step. An interactive online editor at artplayer.org lets you try configurations and plugins in the browser before writing any code. The API documentation is also hosted there. The project is published to npm and receives regular downloads.

Copy-paste prompts

Prompt 1
Show me the minimal HTML and JavaScript to embed ArtPlayer.js on a page and load an HLS stream using hls.js.
Prompt 2
How do I add VTT subtitle support to an ArtPlayer.js instance and let users toggle subtitles on and off?
Prompt 3
Walk me through installing the ArtPlayer danmuku plugin and enabling scrolling bullet comments on a video.
Prompt 4
How do I add chapter markers and thumbnail previews to the ArtPlayer.js progress bar?
Prompt 5
Show me how to connect dash.js to ArtPlayer.js to serve DASH adaptive video with automatic quality switching.
Open on GitHub → Explain another repo

← zhw2590582 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.