ArtPlayer

ArtPlayer is a modern HTML5 video player

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

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

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',
});