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