diff --git a/docs/docs/README.md b/docs/docs/README.md index 830ad5d74..e0aa5e929 100644 --- a/docs/docs/README.md +++ b/docs/docs/README.md @@ -35,608 +35,42 @@ var art = new 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 -
+## container + +- Type: `String、element` +- Default: `#artplayer` +- Required: `true` + +DOM container of the player + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + // container: document.querySelector('.artplayer-app'), + url: url + '/video/one-more-time-one-more-chance-480p.mp4' +}); +``` + +You may need to initialize a size for the container element, like: + +```css +.artplayer-app { + width: 400px; + height: 300px; +} +``` # API -> An awesome project. +> TODO... # Event -> An awesome project. +> TODO... # Issue -> An awesome project. \ No newline at end of file +> TODO... diff --git a/docs/docs/index.html b/docs/docs/index.html index 0d62100c3..116c8647a 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -10,10 +10,12 @@
+ diff --git a/docs/docs/runCode.js b/docs/docs/runCode.js new file mode 100644 index 000000000..0db6a28be --- /dev/null +++ b/docs/docs/runCode.js @@ -0,0 +1,23 @@ +window.runCode = function(hook) { + hook.ready(function() { + Array.from(document.querySelectorAll('.markdown-section a')) + .filter(function(item) { + return item.innerHTML === 'Run Code'; + }) + .forEach(item => { + item.addEventListener('click', function(event) { + event.preventDefault(); + var codeElement = item.parentElement.nextElementSibling; + if ( + codeElement.tagName === 'PRE' && + codeElement.dataset.lang === 'js' + ) { + var code = window.encodeURIComponent(codeElement.innerText); + window.open( + 'https://blog.zhw-island.com/ArtPlayer/lab/?code=' + code + ); + } + }); + }); + }); +}; diff --git a/packages/artplayer/src/index.js b/packages/artplayer/src/index.js index 049345a26..b640d92d4 100644 --- a/packages/artplayer/src/index.js +++ b/packages/artplayer/src/index.js @@ -46,7 +46,7 @@ class Artplayer extends Emitter { static get DEFAULTS() { return { - container: '.artplayer', + container: '#artplayer', url: '', poster: '', title: '',