ArtPlayer

<h2 align="center"> <p><img src="./images/logo.png" width="100" alt="logo"></p> <a href="https://artplayer.org">ArtPlayer.js</a> </h2> <p align="center"> :art: ArtPlayer.js is a modern and full featured HTML5 video player </p> <p align="center"> <a href="https://www.npmjs.com/package/artplayer"> <img src="https://img.shields.io/bundlephobia/minzip/artplayer" alt="Size"> <img src="https://img.shields.io/npm/dm/artplayer.svg?sanitize=true" alt="Downloads"> <img src="https://img.shields.io/npm/v/artplayer.svg?sanitize=true" alt="Version"> <img src="https://img.shields.io/npm/l/artplayer.svg?sanitize=true" alt="License"> <img src="https://data.jsdelivr.com/v1/package/npm/artplayer/badge?style=rounded" alt="jsdelivr"> </a> </p> <p align="center"> <span>・</span> <a href="https://artplayer.org">Online Editor</a> <span>・</span> <a href="https://artplayer.org/document">API Document</a> <span>・</span> <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku">Danmuku</a> <span>・</span> <a href="./CHANGELOG.md">Changelog</a> <span>・</span> <a href="https://artplayer.org/llms.txt">🤖LLMs</a> <span>・</span> </p> <p align="center"> <a href="https://artplayer.org"> <img src="./images/screenshot.png" alt="screenshot" width="720"> </a> </p>

Home Page

https://artplayer.org

Mobile Demo

<img src="./images/qrcode.png" width="250">

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:

bashCopy
$ npm install artplayer

Or install with yarn:

bashCopy
$ yarn add artplayer

Or install with pnpm:

bashCopy
$ pnpm add artplayer

Or install with bun:

bashCopy
$ bun add artplayer

jsCopy
import Artplayer from 'artplayer'

Or umd build also available:

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

Or from CDN:

htmlCopy
<!-- 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

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

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

Plugins

Name	Describe	State
artplayer-plugin-danmuku	Danmuku (bullet comment) system	<img src="https://img.shields.io/npm/v/artplayer-plugin-danmuku.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-danmuku.svg?sanitize=true">
artplayer-plugin-hls-control	HLS quality control	<img src="https://img.shields.io/npm/v/artplayer-plugin-hls-control.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-hls-control.svg?sanitize=true">
artplayer-plugin-dash-control	DASH quality control	<img src="https://img.shields.io/npm/v/artplayer-plugin-dash-control.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-dash-control.svg?sanitize=true">
artplayer-plugin-vtt-thumbnail	VTT thumbnail preview	<img src="https://img.shields.io/npm/v/artplayer-plugin-vtt-thumbnail.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-vtt-thumbnail.svg?sanitize=true">
artplayer-plugin-multiple-subtitles	Multiple subtitles support	<img src="https://img.shields.io/npm/v/artplayer-plugin-multiple-subtitles.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-multiple-subtitles.svg?sanitize=true">
artplayer-plugin-chromecast	Google Chromecast support	<img src="https://img.shields.io/npm/v/artplayer-plugin-chromecast.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-chromecast.svg?sanitize=true">
artplayer-plugin-vast	VAST/VPAID advertising	<img src="https://img.shields.io/npm/v/artplayer-plugin-vast.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-vast.svg?sanitize=true">
artplayer-plugin-chapter	Video chapters support	<img src="https://img.shields.io/npm/v/artplayer-plugin-chapter.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-chapter.svg?sanitize=true">
artplayer-plugin-auto-thumbnail	Auto-generated thumbnails	<img src="https://img.shields.io/npm/v/artplayer-plugin-auto-thumbnail.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-auto-thumbnail.svg?sanitize=true">
artplayer-plugin-ambilight	Ambilight effect	<img src="https://img.shields.io/npm/v/artplayer-plugin-ambilight.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-ambilight.svg?sanitize=true">
artplayer-plugin-document-pip	Document Picture-in-Picture	<img src="https://img.shields.io/npm/v/artplayer-plugin-document-pip.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-document-pip.svg?sanitize=true">
artplayer-plugin-audio-track	Independent audio track playback	<img src="https://img.shields.io/npm/v/artplayer-plugin-audio-track.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-audio-track.svg?sanitize=true">
artplayer-plugin-jassub	ASS/SSA subtitle support	<img src="https://img.shields.io/npm/v/artplayer-plugin-jassub.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-jassub.svg?sanitize=true">
artplayer-plugin-danmuku-mask	Danmuku masking (smart blocking)	<img src="https://img.shields.io/npm/v/artplayer-plugin-danmuku-mask.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-danmuku-mask.svg?sanitize=true">
artplayer-plugin-asr	Automatic Speech Recognition	<img src="https://img.shields.io/npm/v/artplayer-plugin-asr.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-asr.svg?sanitize=true">
artplayer-plugin-ads	Video advertising plugin	WIP

Libraries

Name	Describe	State
hls.js	HLS client	<img src="https://img.shields.io/npm/v/hls.js.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/hls.js.svg?sanitize=true">
dash.js	MPEG DASH player	<img src="https://img.shields.io/npm/v/dashjs.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/dashjs.svg?sanitize=true">
flv.js	HTML5 FLV Player	<img src="https://img.shields.io/npm/v/flv.js.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/flv.js.svg?sanitize=true">
mpegts.js	MPEG-TS/FLV Player	<img src="https://img.shields.io/npm/v/mpegts.js.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/mpegts.js.svg?sanitize=true">
webtorrent.js	Streaming torrent client	<img src="https://img.shields.io/npm/v/webtorrent.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/webtorrent.svg?sanitize=true">

Proxys

Name	Describe	State
Canvas	Proxy video to canvas	<img src="https://img.shields.io/npm/v/artplayer-proxy-canvas.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-proxy-canvas.svg?sanitize=true">
Mediabunny	Mediabunny proxy	<img src="https://img.shields.io/npm/v/artplayer-proxy-mediabunny.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-proxy-mediabunny.svg?sanitize=true">

Changelog

CHANGELOG.md

Contributing

CONTRIBUTING.md

Donations

We accept donations through these channels:

• Patreon
• Paypal

QQ Group

License

MIT © Harvey Zhao