# 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' }); ``` Note: You need to initialize a size for the container element, like: ```css .artplayer-app { width: 400px; height: 300px; } ``` ## Configuration
parameter description
container Type: string, element
Default: .artplayer
Required: true

DOM container of the player
url Type: string
Default: ''
Required: true

Video source url
poster Type: string
Default: ''

Video poster url
title Type: string
Default: ''

Video title, will be shown in screenshot file name and pip mode
volume Type: number
Default: 0.7

Default volume, player will cache the last volume, which may be overwritten
autoplay Type: boolean
Default: false

Whether to play automatically, sometimes it doesn't necessarily succeed
More info: autoplay-policy-changes
autoSize Type: boolean
Default: false

Keep the original video aspect ratio and automatically zoom
loop Type: boolean
Default: false

Automatic loop playback
playbackRate Type: boolean
Default: false

Whether to show playback rate controller in the contextmenu
aspectRatio Type: boolean
Default: false

Whether to show aspect ratio controller in the contextmenu
screenshot Type: boolean
Default: false

Whether to show screenshot controller in the bottom
setting Type: boolean
Default: false

Whether to show setting controller in the bottom
pip Type: boolean
Default: false

Whether to show pip controller in the bottom
fullscreen Type: boolean
Default: false

Whether to show window fullscreen controller in the bottom
fullscreenWeb Type: boolean
Default: false

Whether to show web page fullscreen controller in the bottom
hotkey Type: boolean
Default: true

Whether to use hotkey
lang Type: string
Default: navigator.language.toLowerCase()

Default display language
theme Type: string
Default: #f00

Default theme color
mutex Type: boolean
Default: true

Player mutually exclusive
subtitle Type: object
Default: {}

Custom subtitle
url Type: string
Default: ''

Subtitle url, support vtt and srt format
style Type: object
Default: {}

Subtitle style
moreVideoAttr Type: object
Default:
{'controls': false,'preload': 'auto'}

More video Attributes
quality Type: array
Default: []

Custom quality, The type of quality is an object
default Type: boolean
Default: false

Whether the default quality
name Type: string
Default: ''

Quality name
url Type: string
Default: ''

Quality url
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
layers Type: array
Default: []

Custom layer, The type of layer is an object
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
contextmenu Type: array
Default: []

Custom contextmenu, The type of layer is an object
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
controls Type: array
Default: []

Custom controls, The type of controls is an object
## 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/)