ArtPlayer.js

🎨 ArtPlayer.js is a modern and full featured HTML5 video player

・ Online Editor ・ API Document ・ Danmuku ・ Changelog ・ 🤖LLMs ・

Home Page

https://artplayer.org

Mobile Demo

Features

ArtPlayer.js is an easy-to-use and feature-rich HTML5 video player, and most of the player's functional controls support customization, which makes it easy to connect with your business logic. In addition, it directly supports .vtt, .ass and .srt subtitle formats. Integration with other dependencies such as flv.js, hls.js, dash.js, etc. is also very simple. The code is highly decoupled, the structure and logic are clear, and it is easy to track errors and add new features.

Install

Install with npm:

$ npm install artplayer

Or install with yarn:

$ yarn add artplayer

import Artplayer from 'artplayer'

Or umd build also available:

<script src="path/to/artplayer.js"></script>

Or from CDN:

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>

Will expose the global variable to window.Artplayer.

Usage

<div class="artplayer-app"></div>

let art = new Artplayer({
  container: '.artplayer-app',
  url: 'path/to/video.mp4',
})

Plugins

Name	Describe	State
artplayer-plugin-danmuku	Danmuku (bullet comment) system
artplayer-plugin-iframe	Control player via iframe
artplayer-plugin-hls-control	HLS quality control
artplayer-plugin-dash-control	DASH quality control
artplayer-plugin-vtt-thumbnail	VTT thumbnail preview
artplayer-plugin-multiple-subtitles	Multiple subtitles support
artplayer-plugin-chromecast	Google Chromecast support
artplayer-plugin-vast	VAST/VPAID advertising
artplayer-plugin-chapter	Video chapters support
artplayer-plugin-auto-thumbnail	Auto-generated thumbnails
artplayer-plugin-ambilight	Ambilight effect
artplayer-plugin-document-pip	Document Picture-in-Picture
artplayer-plugin-audio-track	Independent audio track playback
artplayer-plugin-jassub	ASS/SSA subtitle support
artplayer-plugin-danmuku-mask	Danmuku masking (smart blocking)
artplayer-plugin-asr	Automatic Speech Recognition
artplayer-plugin-ads	Video advertising plugin	WIP
artplayer-plugin-websr	AI video upscaling with WebGPU

Libraries

Name	Describe	State
hls.js	HLS client
dash.js	MPEG DASH player
flv.js	HTML5 FLV Player
mpegts.js	MPEG-TS/FLV Player
webtorrent.js	Streaming torrent client

Proxys

Name	Describe	State
Canvas	Proxy video to canvas
Mediabunny	Mediabunny proxy

Changelog

CHANGELOG.md

Contributing

CONTRIBUTING.md

Donations

We accept donations through these channels:

• Patreon
• Paypal

QQ Group

License

MIT © Harvey Zhao