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

Ecosystem

Project	Description
artplayer-plugin-danmu	Danmu plugin for ArtPlayer

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 callback Type: function Default: undefined Callback after mounted;	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 callback Type: function Default: undefined Callback after mounted;	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'
});

Instance properties and methods

property / method	description	example
destroy	Type: function Parameter: true/false Destroy instance, and whether to remove dom	Demo
player	Type: object Destroy instance, and whether to remove dom mountUrl Type: function A special writable method for modifying the play url before play Demo play Type: function Trigger play null pause Type: function Trigger pause null toggle Type: function Trigger play or pause null seek Type: function Custom play time in seconds Demo	null
art.player.volume	Get and set the player volume	Demo
art.player.currentTime	Get player current time	Demo
art.player.duration	Get player duration in seconds	Demo
art.player.switch()	Switch video url, use in the case of similar switching quality You can also pass a name to the url for display, like: art.player.switch(url, name)	Demo
art.player.playbackRate() art.player.playbackRateState art.player.playbackRateRemove() art.player.playbackRateReset()	Manage the playback rate, at intervals of 0.1 to 10	Demo
art.player.aspectRatio() art.player.aspectRatioState art.player.aspectRatioRemove() art.player.aspectRatioReset()		Demo
art.player.screenshot()		Demo
art.player.fullscreenState art.player.fullscreenEnabled() art.player.fullscreenExit() art.player.fullscreenToggle()		Demo
art.player.fullscreenWebState art.player.fullscreenWebEnabled() art.player.fullscreenWebExit() art.player.fullscreenWebToggle()		Demo
art.player.pipState art.player.pipDraggie art.player.pipEnabled() art.player.pipExit() art.player.pipToggle()		Demo
art.player.loaded		Demo
art.player.played		Demo
art.player.autoSize() art.player.autoSizeState art.player.autoSizeRemove()		Demo
art.player.flip() art.player.flipState art.player.flipRemove()		Demo

Class static properties and methods

property / method	description	example
Artplayer.version	Version Information
Artplayer.config	Configuration information
Artplayer.utils	Common utils
Artplayer.DEFAULTS	Default configuration
Artplayer.use()	Function to load plugin

Listening event

Issue

Contributors

License

MIT © Harvey Zack