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
Permalink
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
README.md 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

README.md

ArtPlayer

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

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

Screenshot

Features

  • 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...

Ecosystem

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

Demo

Checkout the demo from Github Pages

Document

Checkout the Document from Github Pages

Install

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.

Usage

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

Contribution

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

Donations

We accept donations through these channels:

QQ Group

QQ Group

License

MIT © Harvey Zack

You can’t perform that action at this time.