diff --git a/docs/docs/README.md b/docs/docs/README.md index e0aa5e929..8b1f332ec 100644 --- a/docs/docs/README.md +++ b/docs/docs/README.md @@ -37,7 +37,7 @@ var art = new Artplayer({ ## container -- Type: `String、element` +- Type: `String、Element` - Default: `#artplayer` - Required: `true` @@ -50,7 +50,7 @@ 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' + url: url + '/video/one-more-time-one-more-chance-480p.mp4', }); ``` @@ -63,6 +63,297 @@ You may need to initialize a size for the container element, like: } ``` +## url + +- Type: `String` +- Default: `` +- Required: `true` + +Video source url, Three video file formats are supported: mp4, ogg, webm + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + // url: url + '/video/one-more-time-one-more-chance-480p.ogg', + // url: url + '/video/one-more-time-one-more-chance-480p.webm', +}); +``` + +## poster + +- Type: `String` +- Default: `` + +Video poster image url + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + poster: url + '/image/one-more-time-one-more-chance-poster.jpg', +}); +``` + +## title + +- Type: `String` +- Default: `` + +Video title, will be shown in screenshot file name and pip mode + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + title: '【新海诚动画】『秒速5センチメートル』', +}); +``` + +## volume + +- Type: `Number` +- Default: `0.7` + +Default volume, player will cache the last volume, which may be overwritten + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + volume: 0.5, +}); +``` + +## autoplay + +- Type: `Boolean` +- Default: `false` + +Whether to play automatically, sometimes it doesn't necessarily succeed + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + autoplay: true, +}); +``` + +## autoSize + +- Type: `Boolean` +- Default: `false` + +Keep the original video aspect ratio and automatically zoom + +[Run Code](/) + +```js +// Zoom browser window +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + autoSize: true, +}); +``` + +## loop + +- Type: `Boolean` +- Default: `false` + +Automatic loop playback + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + loop: true, +}); +``` + +## playbackRate + +- Type: `Boolean` +- Default: `false` + +Whether to show playback rate controller in the contextmenu + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + playbackRate: true, +}); +``` + +## aspectRatio + +- Type: `Boolean` +- Default: `false` + +Whether to show aspect ratio controller in the contextmenu + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + aspectRatio: true, +}); +``` + +## screenshot + +- Type: `Boolean` +- Default: `false` + +Whether to show screenshot controller in the bottom + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + screenshot: true, +}); +``` + +## setting + +- Type: `Boolean` +- Default: `false` + +Whether to show setting controller in the bottom + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + setting: true, +}); +``` + +## pip + +- Type: `Boolean` +- Default: `false` + +Whether to show pip controller in the bottom + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + pip: true, +}); +``` + +## fullscreen + +- Type: `Boolean` +- Default: `false` + +Whether to show window fullscreen controller in the bottom + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + fullscreen: true, +}); +``` + +## fullscreenWeb + +- Type: `Boolean` +- Default: `false` + +Whether to show web page fullscreen controller in the bottom + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + fullscreenWeb: true, +}); +``` + +## mutex + +- Type: `Boolean` +- Default: `false` + +Player mutually exclusive, only one player can play at a time + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + mutex: true, +}); +``` + +## hotkey + +- Type: `Boolean` +- Default: `true` + +Whether to use hotkey + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + hotkey: true, +}); +``` + # API > TODO...