# ArtPlayer ![version](https://badgen.net/npm/v/artplayer) ![license](https://badgen.net/npm/license/artplayer) ![size](https://badgen.net/bundlephobia/minzip/artplayer) > ArtPlayer is a modern HTML5 video player ## Status ⚠️ This project is WIP and not ready for production use yet! ## Demo [Checkout the demo](https://blog.zhw-island.com/ArtPlayer/) ## Introduction ## Install ``` $ npm install --save artplayer ``` ```js import Artplayer from 'artplayer'; import 'artplayer/dist/artplayer.css'; ``` OR umd builds are also available ```html ``` Will expose the global variable to `window.Artplayer`. ## Usage ```html

``` ```js var art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4' }); ``` ## Ecosystem | Project | Description | | ------------------------------------------------------------------------------------------------------------- | -------------------------- | | [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/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 ### Instance properties and methods

property description example

destroy Type: function
Parameter: true/false

Destroy instance, and whether to remove dom Demo

player

Type: object
Player core function

`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
`volume`	Type: `number` Get and set the volume	Demo
`currentTime`	Type: `number` Get and set current time	Demo
`duration`	Type: `number` Get duration in seconds	Demo
`switch`	Type: `function` 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
`playbackRate`	Type: `function`	Demo
`playbackRateState`	Type: `boolean`	Demo
`playbackRateRemove`	Type: `function`	Demo
`playbackRateReset`	Type: `function`	Demo
`aspectRatio`	Type: `function`	Demo
`aspectRatioState`	Type: `boolean`	Demo
`aspectRatioRemove`	Type: `function`	Demo
`aspectRatioReset`	Type: `function`	Demo
`screenshot`	Type: `function`	Demo
`fullscreenState`	Type: `boolean`	Demo
`fullscreenEnabled`	Type: `function`	Demo
`fullscreenExit`	Type: `function`	Demo
`fullscreenToggle`	Type: `function`	Demo
`fullscreenWebState`	Type: `boolean`	Demo
`fullscreenWebEnabled`	Type: `function`	Demo
`fullscreenWebExit`	Type: `function`	Demo
`fullscreenWebToggle`	Type: `function`	Demo
`pipState`	Type: `boolean`	Demo
`pipDraggie`	Type: `function`	Demo
`pipEnabled`	Type: `function`	Demo
`pipExit`	Type: `function`	Demo
`pipToggle`	Type: `function`	Demo
`loaded`	Type: `number`	Demo
`played`	Type: `number`	Demo
`autoSize`	Type: `function`	Demo
`autoSizeState`	Type: `boolean`	Demo
`autoSizeRemove`	Type: `function`	Demo
`flip`	Type: `function`	Demo
`flipState`	Type: `boolean`	Demo
`flipRemove`	Type: `function`	Demo

null

### Class static properties and methods

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