diff --git a/README.md b/README.md index 3db2f1058..b6826a3a3 100644 --- a/README.md +++ b/README.md @@ -6,15 +6,17 @@ > ArtPlayer is a modern HTML5 video player -## Status +## Introduction -⚠️ This project is WIP and not ready for production use yet! +> TODO... ## Demo -[Checkout the demo](https://blog.zhw-island.com/ArtPlayer/) +[Checkout the demo](https://blog.zhw-island.com/ArtPlayer/lab) -## Introduction +## Document + +[Checkout the Document](https://blog.zhw-island.com/ArtPlayer/docs) ## Install @@ -55,1041 +57,6 @@ var art = new Artplayer({ | ------------------------------------------------------------------------------------------------------------- | -------------------------- | | [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer | -## Configuration - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
parameterdescriptionexample
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
spaceToggle 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 - - - - - - - - - - - - - - - - - -
propertydescriptionexample
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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
propertydescriptionexample
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 diff --git a/docs/docs/README.md b/docs/docs/README.md index da2056b35..830ad5d74 100644 --- a/docs/docs/README.md +++ b/docs/docs/README.md @@ -1,3 +1,642 @@ -# Headline +# Getting started + +## 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' +}); +``` + +# Configuration + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
parameterdescriptionexample
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
spaceToggle 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 > An awesome project. + +# Event + +> An awesome project. + +# Issue + +> An awesome project. \ No newline at end of file