🎨 ArtPlayer.js is a modern and full featured HTML5 video player
- Size -
artplayer.js
≈90kb
andartplayer.css
≈20kb
- Subtitle - Support for
.VTT
,.ASS
and.SRT
formats - Customizable -
Right Click Menu
,Business Layer
,Video Controller
andSettings Panel
- Controller -
Quality Switch
,Subtitle Switch
,Play Speed
,Aspect Ratio
,Video Flip
,Fullscreen
,Picture In Picture
,Screenshot
,Thumbnail
,Adaptive Size
,Highlight
andHotkey
... - Built-in -
Auto PIP
,Open Local Subtitles
,Open Local Video
,Mini Progress Bar
,Network Detection
andSubtitle Time Offset
- Integration - Easy to integration with other dependencies:
flv.js
,hls.js
,dash.js
,shaka-player
,webtorrent
... - Code - Vanilla
ES6
andSASS
, Highly decoupled code, clear structure, easy to track bugs and add new features - Document - Detailed interface documentation and rich code demo
- API - Rich interface and response events, easy to interface with business or custom plugin
- I18N - support for internationalization of controls
Project | Description | Demo |
---|---|---|
artplayer-plugin-danmuku | Danmuku plugin | demo |
artplayer-plugin-gif | Gif plugin | demo |
artplayer-plugin-backlight | Backlight plugin | demo |
artplayer-plugin-playlist | Playlist plugin | demo |
artplayer-tool-thumbnail | Thumbnail tool | demo |
artplayer-tool-github | Github Danmuku tool | demo |
artplayer-react | React Component | demo |
artplayer-vue | Vue Component | 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:
MIT © Harvey Zack