# 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
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 ```js var art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4' }); ``` #### Instance properties and methods
property / method parameter description example
art.init() Initialization instance, in general you don't need it
art.destroy() true / false Destroy instance, and whether to remove dom Demo
art.player.mountUrl() Demo
art.player.play() Demo
art.player.pause() Demo
art.player.toggle() Demo
art.player.seek() Demo
art.player.volume() Demo
art.player.currentTime() Demo
art.player.duration() Demo
art.player.switch() Demo
art.player.playbackRateState() Demo
art.player.playbackRate() Demo
art.player.playbackRateRemove() Demo
art.player.playbackRateReset() Demo
art.player.aspectRatioState() Demo
art.player.aspectRatio() Demo
art.player.aspectRatioRemove() Demo
art.player.aspectRatioReset() Demo
art.player.screenshot() Demo
art.player.fullscreenState() Demo
art.player.fullscreenEnabled() Demo
art.player.fullscreenExit() Demo
art.player.fullscreenToggle() Demo
art.player.fullscreenWebState() Demo
art.player.fullscreenWebEnabled() Demo
art.player.fullscreenWebExit() Demo
art.player.fullscreenWebToggle() Demo
art.player.pipState() Demo
art.player.pipDraggie() Demo
art.player.pipEnabled() Demo
art.player.pipExit() Demo
art.player.pipToggle() Demo
art.player.loaded() Demo
art.player.played() Demo
art.player.autoSizeState() Demo
art.player.autoSize() Demo
art.player.autoSizeRemove() Demo
art.player.flipState() Demo
art.player.flip() Demo
art.player.flipRemove() Demo
#### Class static properties and methods
property / method parameter 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](https://www.zhw-island.com/)