ArtPlayer

ArtPlayer is a modern HTML5 video player

Status

⚠️ This project is WIP and not ready for production use yet!

Demo

Checkout the demo

Introduction

Install

$ npm install --save 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'
});

Configuration

parameter	description	Example
container	Type: string, element Default: .artplayer Required: true DOM container of the player, you need to initialize a size for the container element	Demo
url	Type: string Default: '' Required: true Video source url, Three video file formats are supported: mp4, ogg, webm	Demo
poster	Type: string Default: '' Video poster image url	Demo
title	Type: string Default: '' Video title, will be shown in screenshot file name and pip mode	Demo
volume	Type: number Default: 0.7 Default volume, player will cache the last volume, which may be overwritten	Demo
autoplay	Type: boolean Default: false Whether to play automatically, sometimes it doesn't necessarily succeed More info: autoplay-policy-changes	Demo
autoSize	Type: boolean Default: false Keep the original video aspect ratio and automatically zoom	Demo
loop	Type: boolean Default: false Automatic loop playback	Demo
playbackRate	Type: boolean Default: false Whether to show playback rate controller in the contextmenu	Demo
aspectRatio	Type: boolean Default: false Whether to show aspect ratio controller in the contextmenu	Demo
screenshot	Type: boolean Default: false Whether to show screenshot controller in the bottom	Demo
setting	Type: boolean Default: false Whether to show setting controller in the bottom	Demo
pip	Type: boolean Default: false Whether to show pip controller in the bottom	Demo
fullscreen	Type: boolean Default: false Whether to show window fullscreen controller in the bottom	Demo
fullscreenWeb	Type: boolean Default: false Whether to show web page fullscreen controller in the bottom	Demo
hotkey	Type: boolean Default: true Whether to use hotkey ↑ Increase volume ↓ Decrease volume ← Seek backward → Seek forward space Toggle playback	Demo
mutex	Type: boolean Default: true Player mutually exclusive, only one player can play at a time	Demo
lang	Type: string Default: navigator.language.toLowerCase() Default display language: en, zh-cn, zh-tw	Demo
theme	Type: string Default: #f00 Default theme color	Demo
subtitle	Type: object Default: {} Custom subtitle url Type: string Default: '' Subtitle url, support vtt and srt format style Type: object Default: {} Subtitle style	Demo
thumbnails	Type: object Default: {} Custom thumbnails in the progress bar with lazy load url Type: string Default: '' Thumbnails image url number Type: number Default: 60 Thumbnails number width Type: number Default: 160 Thumbnails width height Type: number Default: 90 Thumbnails height column Type: number Default: 10 Thumbnails column	Demo
moreVideoAttr	Type: object Default: {'controls': false,'preload': 'auto'} More video Attributes, these properties will be written directly to the video element	Demo
quality	Type: array Default: [] Custom quality, The type of quality is an object default Type: boolean Default: false Whether the default quality, if not specified, the first quality will be taken name Type: string Default: '' Quality name url Type: string Default: '' Quality url	Demo
highlight	Type: array Default: [] Custom highlight, The type of highlight is an object time Type: number Default: 0 highlight seconds text Type: string Default: '' highlight text	Demo
layers	Type: array Default: [] Custom layer, The type of layer is an object or function disable Type: boolean Default: undefined Whether to disable the layer name Type: string Default: layer${id} The unique name of the layer, used for the class name index Type: number Default: ${id} The unique index of the layer, used for the priority level html Type: string, element Default: '' The dom element of the layer style Type: object Default: {} The style object of the layer click Type: function Default: undefined Click event of the layer	Demo
contextmenu	Type: array Default: [] Custom contextmenu, The type of layer is an object or function disable Type: boolean Default: undefined Whether to disable the contextmenu name Type: string Default: contextmenu${id} The unique name of the contextmenu, used for the class name index Type: number Default: ${id} The unique index of the contextmenu, used for the priority level html Type: string, element Default: '' The dom element of the contextmenu style Type: object Default: {} The style object of the contextmenu click Type: function Default: undefined Click event of the contextmenu	Demo
controls	Type: array Default: [] Custom controls, The type of controls is an object option Type: object Default: undefined Instantiated an object property disable Type: boolean Default: undefined Whether to disable the controller name Type: string Default: control${id} The unique name of the controller, used for the class name position Type: string Default: undefined The position where the controller appears: top, left, right index Type: number Default: undefined The unique index of the controller, used for the priority level	Demo

API

Example

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

Class static properties

Parameter	Description
Artplayer.version	Version Information
Artplayer.config	Configuration information
Artplayer.utils	Common utils
Artplayer.DEFAULTS	Default configuration
Artplayer.instances	Instance collection

Instance method

Listening event

Ecosystem

Project	Description
artplayer-plugin-danmu	Danmu plugin for ArtPlayer

Issue

Contributors

License

MIT © Harvey Zack