# 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 app = 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
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
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
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 ## Ecosystem | Project | Description | | ------------------------------------------------------------------------------------------------------------- | -------------------------- | | [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer | ## Issue ## Contributors ## License MIT © [Harvey Zack](https://www.zhw-island.com/)