Skip to content
🎨 ArtPlayer.js is a modern and full featured HTML5 video player
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 2db70b9 Aug 16, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github typofix May 9, 2019
dist build all packages Aug 15, 2019
docs fix eslint err Aug 15, 2019
images add donations Aug 16, 2019
packages change link Aug 16, 2019
scripts 简化player接口 Jun 6, 2019
test Update constructor.test.js May 7, 2019
.babelrc 修复打包错误 Apr 15, 2019
.browserslistrc build all packages Jun 6, 2019
.editorconfig add esline Nov 21, 2018
.eslintignore docs 优化 Dec 4, 2018
.eslintrc update lint Aug 13, 2019
.gitattributes init Oct 10, 2018
.gitignore init Oct 10, 2018
.prettierrc add esline Nov 21, 2018
.travis.yml add sizereport Jun 26, 2019
LICENSE Initial commit Oct 8, 2018 add donations Aug 16, 2019
lerna.json v3.1.13 Aug 15, 2019
package.json update option-validator Aug 15, 2019
sizereport.config.js add sizereport Jun 26, 2019


Build Status version license size npm Downloads PRs Welcome Codacy Badge dependencies Status

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



  • Support vtt and srt subtitles
  • Support video quality switching
  • Support for custom control, layer, contextmenu, setting
  • Support playback rate, aspect ratio, flip, window fullscreen or web fullscreen adjustment
  • Support integration with other dependencies, like: flv.js, hls.js, dash.js, shaka-player, webtorrent
  • Support chrome native picture-in-picture mode, or custom picture-in-picture mode
  • Support thumbnails and highlight in the progress bar
  • Support to maintain the original video ratio, adaptive size
  • Support rich custom event monitoring, easy to expand
  • Support for internationalization of controls
  • Support for custom plugins
  • Support local video preview
  • Support subtitle time offset
  • Support screenshot
  • And more...


Project Description Demo
artplayer-plugin-danmuku Danmuku plugin for ArtPlayer demo
artplayer-plugin-gif Gif plugin for ArtPlayer demo
artplayer-plugin-backlight Backlight plugin for ArtPlayer demo
artplayer-plugin-playlist Playlist plugin for ArtPlayer demo
artplayer-plugin-blur Blur plugin for ArtPlayer demo
artplayer-tool-thumbnail Thumbnail tool for ArtPlayer demo
artplayer-tool-github Github api tool for ArtPlayer demo
artplayer-react React Component for Artplayer demo
artplayer-vue Vue Component for Artplayer demo


Checkout the demo from Github Pages


Checkout the Document from Github Pages


Install with npm

$ npm install artplayer

Or install with yarn

$ yarn add artplayer
import Artplayer from 'artplayer';
import 'artplayer/dist/artplayer.css';

Or umd builds are also available

<link rel="stylesheet" href="path/to/artplayer.css" />
<script src="path/to/artplayer.js"></script>

Will expose the global variable to window.Artplayer.


<div class="artplayer-app"></div>
var art = new Artplayer({
    container: '.artplayer-app',
    url: 'path/to/video.mp4',


Installation dependency

$ npm install
$ npm run bootstrap

Run the developer mode and select the project you want to develop

$ npm run dev

Open web server

$ npm start


We accept donations through these channels:

QQ Group

QQ Group


MIT © Harvey Zack

You can’t perform that action at this time.