From bf2a9967694eb88fa3128ca20d9ab5ebbc5e86d8 Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Tue, 27 Nov 2018 19:45:46 +0800 Subject: [PATCH] docs update --- docs/docs/README.1.md | 2084 +++++++++++++++++++++++++++++++++++++++++ docs/docs/README.md | 955 +------------------ 2 files changed, 2136 insertions(+), 903 deletions(-) create mode 100644 docs/docs/README.1.md diff --git a/docs/docs/README.1.md b/docs/docs/README.1.md new file mode 100644 index 000000000..2e2a235d6 --- /dev/null +++ b/docs/docs/README.1.md @@ -0,0 +1,2084 @@ +# Getting started + +## Install + +Install with `npm` + +``` +$ npm install artplayer +``` + +Or install with `yarn` + +``` +$ yarn add 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 + +## 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; +} +``` + +## 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', +}); +``` + +## type + +- Type: `String` +- Default: `''` + +Specify the format for the `url`, use with `customType` + +[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.flv' + type: 'flv' +}); +``` + +## customType + +- Type: `Object` +- Default: `{}` + +Customize when loading third-party libraries + +[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.flv' + type: 'flv', + customType: { + flv: function(video, url, art) { + // video: The video element + // url: The video url + // art: The Artplayer instance + } + } +}); +``` + +## 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, +}); +``` + +## muted + +- Type: `Boolean` +- Default: `false` + +Whether to mute by default + +[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', + muted: true, +}); +``` + +## autoplay + +- Type: `Boolean` +- Default: `false` + +Whether to play automatically, sometimes it doesn't necessarily succeed + +More info: [autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) + +[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, it will give priority to the native picture-in-picture feature. + +More info: [picture-in-picture](https://developers.google.com/web/updates/2017/09/picture-in-picture) + +[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: `true` + +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, +}); +``` + +| Key | Description | +| ------- | --------------- | +| `↑` | Increase volume | +| `↓` | Decrease volume | +| `←` | Seek backward | +| `→` | Seek forward | +| `space` | Toggle playback | + +## lang + +- Type: `String` +- Default: `navigator.language.toLowerCase()` + +Default display language: en, zh-cn, zh-tw + +[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', + lang: 'en', +}); +``` + +## icons + +- Type: `Object` +- Default: `{}` + +Replace the default icon, The currently configurable icons are: `loading`、`playBig` + +[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', + icons: { + loading: 'Loading...', + playBig: 'PLAY', + }, +}); +``` + +## theme + +- Type: `String` +- Default: `#f00` + +Default display language: en, zh-cn, zh-tw + +[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', + theme: '#ffad00', +}); +``` + +## subtitle + +- Type: `Object` +- Default: `{}` + +Custom subtitle + +### url + +- Type: `String` +- Default: `''` + +Subtitle url, support vtt and srt format + +### style + +- Type: `Object` +- Default: `{}` + +Subtitle style + +[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', + subtitle: { + url: url + '/subtitle/one-more-time-one-more-chance.srt', + style: { + color: '#03A9F4', + }, + }, +}); +``` + +## thumbnails + +- Type: `Object` +- Default: `{}` + +Custom thumbnails in the progress bar with lazy load + +### style + +- 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 + +[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', + thumbnails: { + url: url + '/image/one-more-time-one-more-chance-thumbnails.png', + width: 190, + height: 107, + }, +}); +``` + +## moreVideoAttr + +- Type: `Object` +- Default: `{'controls': false,'preload': 'auto'}` + +More video Attributes, these properties will be written directly to the video element + +[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', + moreVideoAttr: { + 'webkit-playsinline': true, + playsinline: true, + }, +}); +``` + +## 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 + +[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', + quality: [ + { + default: true, + name: 'SD 480P', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + }, + { + name: 'HD 720P', + url: url + '/video/one-more-time-one-more-chance-720p.mp4', + }, + ], +}); +``` + +## 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 + +[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', + highlight: [ + { + time: 60, + text: 'One more chance', + }, + { + time: 120, + text: '谁でもいいはずなのに', + }, + { + time: 180, + text: '夏の想い出がまわる', + }, + { + time: 240, + text: 'こんなとこにあるはずもないのに', + }, + { + time: 300, + text: '－－终わり－－', + }, + ], +}); +``` + +## layers + +- Type: `Array` +- Default: `[]` + +Custom layer, The type of layer is an object or function + +### disable + +- Type: `Boolean` +- Default: `false` + +Whether to disable + +### name + +- Type: `String` +- Default: `layer${id}` + +The unique name , used for the class name + +### index + +- Type: `Number` +- Default: `${id}` + +The unique index, used for the priority level + +### html + +- Type: `String`、`Element` +- Default: `''` + +The dom element + +### style + +- Type: `Object` +- Default: `{}` + +The style object + +### click + +- Type: `Function` +- Default: `undefined` + +Click event + +### mounted + +- Type: `Function` +- Default: `undefined` + +Callback after mounted + +[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', + layers: [ + { + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, + }, + ], +}); +``` + +## contextmenu + +- Type: `Array` +- Default: `[]` + +Custom contextmenu, The type of layer is an object or function + +### disable + +- Type: `Boolean` +- Default: `false` + +Whether to disable + +### name + +- Type: `String` +- Default: `layer${id}` + +The unique name , used for the class name + +### index + +- Type: `Number` +- Default: `${id}` + +The unique index, used for the priority level + +### html + +- Type: `String`、`Element` +- Default: `''` + +The dom element + +### style + +- Type: `Object` +- Default: `{}` + +The style object + +### click + +- Type: `Function` +- Default: `undefined` + +Click event + +### mounted + +- Type: `Function` +- Default: `undefined` + +Callback after mounted + +[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', + contextmenu: [ + { + html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ', + click: function() { + document.querySelector('.video-wrap').classList.toggle('dark'); + this.hide(); + }, + }, + ], +}); +``` + +## controls + +- Type: `Array` +- Default: `[]` + +Custom controls, The type of controls is an object or function + +### disable + +- Type: `Boolean` +- Default: `false` + +Whether to disable + +### name + +- Type: `String` +- Default: `layer${id}` + +The unique name , used for the class name + +### index + +- Type: `Number` +- Default: `${id}` + +The unique index, used for the priority level + +### html + +- Type: `String`、`Element` +- Default: `''` + +The dom element + +### style + +- Type: `Object` +- Default: `{}` + +The style object + +### click + +- Type: `Function` +- Default: `undefined` + +Click event + +### mounted + +- Type: `Function` +- Default: `undefined` + +Callback after mounted + +### position + +- Type: `String` +- Default: `undefined` + +The position where the controller appears: top, left, right + +[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', + controls: [ + function myController(art) { + return { + name: 'myController', + position: 'right', + index: 10, + html: 'myController', + click: function() { + console.log('myController'); + }, + }; + }, + ], +}); +``` + +## plugins + +- Type: `Array` +- Default: `[]` + +Custom plugins, The type of plugin is a function + +[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', + plugins: [ + function myPlugin(art) { + return { + // This exposes plugin properties or methods for others to use. Like: + something: 'something', + doSomething: function() { + console.log('Do something here...'); + }, + }; + }, + ], +}); + +art.plugins.myPlugin.doSomething(); +``` + +# Instance properties + +## Instance + +### isFocus + +- Type: `Boolean` +- Default: `false` + +Return to focus state + +[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', +}); + +console.log(art.isFocus); +``` + +### isPlaying + +- Type: `Boolean` +- Default: `false` + +Return to play state + +[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', +}); + +console.log(art.isPlaying); +``` + +### destroy + +- Type: `Function` + +Destroy instance, will not remove dom by default + +[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', +}); + +setTimeout(function() { + art.destroy(); +}, 1000); + +// Remeve dom +// art.destroy(true); +``` + +## player + +- Type: `Object` + +### aspectRatioState + +- Type: `String` +- Default: `''` + +Return the current value of aspect ratio + +[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', +}); + +console.log(art.player.aspectRatioState); +``` + +### aspectRatio + +- Type: `Function` + +Set aspect ratio, Currently only accepts three values：`default`, `4:3`, `16:9` + +[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', +}); + +art.on('firstCanplay', () => { + art.player.aspectRatio('4:3'); +}); +``` + +### aspectRatioRemove + +- Type: `Function` + +Remove aspect ratio + +[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', +}); + +art.on('firstCanplay', () => { + art.player.aspectRatio('4:3'); + setTimeout(function() { + art.player.aspectRatioRemove(); + }, 1000); +}); +``` + +### aspectRatioReset + +- Type: `Function` + +Recalculate the aspect ratio + +### returnUrl + +- Type: `Function` + +A special editable method for return new url, useful when modifying 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', +}); + +Object.defineProperty(art.player, 'returnUrl', { + value: url => url + '?time=' + new Date().getTime(), +}); +``` + +### autoSizeState + +- Type: `Boolean` +- Default: `false` + +Return the current state of auto size + +[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', +}); + +console.log(art.player.autoSizeState); +``` + +### autoSize + +- Type: `Function` + +Return the current state of auto size + +[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', +}); + +art.on('firstCanplay', () => { + art.player.autoSize(); +}); +``` + +### autoSizeRemove + +- Type: `Function` + +Remove the auto size + +[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', +}); + +art.on('firstCanplay', () => { + art.player.autoSize(); + setTimeout(function() { + art.player.autoSizeRemove(); + }, 1000); +}); +``` + +### currentTime + +- Type: `Number` + +`Geter` and `Setter` of the current 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', +}); + +art.on('firstCanplay', () => { + console.log(art.player.currentTime); + art.player.currentTime = 5; + console.log(art.player.currentTime); +}); +``` + +### duration + +- Type: `Number` + +`Geter` of the duration + +[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', +}); + +art.on('firstCanplay', () => { + console.log(art.player.duration); +}); +``` + +### flipState + +- Type: `String` +- Default: `''` + +Return the current state of flip + +[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', +}); + +art.on('firstCanplay', () => { + console.log(art.player.flipState); +}); +``` + +### flip + +- Type: `Function` + +Set flip, Currently only accepts three values：`normal`, `horizontal`, `vertical` + +[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', +}); + +art.on('firstCanplay', () => { + art.player.flip('horizontal'); + console.log(art.player.flipState); +}); +``` + +### flipRemove + +- Type: `Function` + +Remove the flip + +[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', +}); + +art.on('firstCanplay', () => { + art.player.flip('horizontal'); + setTimeout(function() { + art.player.flipRemove(); + }, 1000); +}); +``` + +### fullscreenState + +- Type: `Boolean` +- Default: `false` + +Return the current state of fullscreen + +[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', +}); + +console.log(art.player.fullscreenState); +``` + +### fullscreenEnabled + +- Type: `Function` + +Enable fullscreen + +[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', +}); + +art.on('firstCanplay', () => { + art.player.fullscreenEnabled(); + console.log(art.player.fullscreenState); +}); +``` + +### fullscreenExit + +- Type: `Function` + +Exit fullscreen + +[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', +}); + +art.on('firstCanplay', () => { + art.player.fullscreenEnabled(); + console.log(art.player.fullscreenState); + setTimeout(function() { + art.player.fullscreenExit(); + console.log(art.player.fullscreenState); + }, 1000); +}); +``` + +### fullscreenToggle + +- Type: `Function` + +Toggle fullscreen + +[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', +}); + +art.on('firstCanplay', () => { + art.player.fullscreenToggle(); +}); +``` + +### fullscreenWebState + +- Type: `Boolean` +- Default: `false` + +Return the current state of web fullscreen + +[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', +}); + +console.log(art.player.fullscreenWebState); +``` + +### fullscreenWebEnabled + +- Type: `Function` + +Enable web fullscreen + +[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', +}); + +art.on('firstCanplay', () => { + art.player.fullscreenWebEnabled(); + console.log(art.player.fullscreenWebState); +}); +``` + +### fullscreenWebExit + +- Type: `Function` + +Exit web fullscreen + +[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', +}); + +art.on('firstCanplay', () => { + art.player.fullscreenWebEnabled(); + console.log(art.player.fullscreenWebState); + setTimeout(function() { + art.player.fullscreenWebExit(); + console.log(art.player.fullscreenWebState); + }, 1000); +}); +``` + +### fullscreenWebToggle + +- Type: `Function` + +Toggle web fullscreen + +[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', +}); + +art.on('firstCanplay', () => { + art.player.fullscreenWebToggle(); +}); +``` + +### loaded + +- Type: `Number` + +Return the proportion of the load + +```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', +}); + +art.on('video:progress', () => { + console.log(art.player.loaded); +}); +``` + +### pause + +- Type: `Function` + +Pause playback + +```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', +}); + +art.on('firstCanplay', () => { + art.player.pause(); +}); +``` + +### pipState + +- Type: `Boolean` +- Default: `false` + +Return the current state of pip + +[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', +}); + +console.log(art.player.pipState); +``` + +### pipEnabled + +- Type: `Function` + +Enable pip + +[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', +}); + +art.on('firstCanplay', () => { + art.player.pipEnabled(); + console.log(art.player.pipState); +}); +``` + +### pipExit + +- Type: `Function` + +Exit pip + +[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', +}); + +art.on('firstCanplay', () => { + art.player.pipEnabled(); + console.log(art.player.pipState); + setTimeout(function() { + art.player.pipExit(); + console.log(art.player.pipState); + }, 1000); +}); +``` + +### pipToggle + +- Type: `Function` + +Toggle pip + +[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', +}); + +art.on('firstCanplay', () => { + art.player.pipToggle(); +}); +``` + +### playbackRateState + +- Type: `String` +- Default: `''` + +Return the current state of playback rate + +[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', +}); + +console.log(art.player.playbackRateState); +``` + +### playbackRate + +- Type: `Function` + +Set playbackRate, Currently only accepts three values：0.5, 0.75, 1.0, 1.25, 1.5, 2.0 + +[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', +}); + +art.on('firstCanplay', () => { + art.player.playbackRate(1.5); + console.log(art.player.playbackRateState); +}); +``` + +### playbackRateRemove + +- Type: `Function` + +Remove the playback rate + +[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', +}); + +art.on('firstCanplay', () => { + art.player.playbackRate(1.5); + setTimeout(function() { + art.player.playbackRateRemove(); + }, 1000); +}); +``` + +### playbackRateReset + +- Type: `Function` + +Recalculate the playback rate + +### played + +- Type: `Number` + +Return the proportion of the load + +[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', +}); + +art.on('video:timeupdate', () => { + console.log(art.player.played); +}); +``` + +### screenshot + +- Type: `Function` + +Download the screenshot + +[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', +}); + +art.on('firstCanplay', () => { + art.player.currentTime = 5; + art.player.screenshot(); +}); +``` + +### seek + +- Type: `Function` + +Set the current 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', +}); + +art.on('firstCanplay', () => { + art.player.seek(5); +}); +``` + +### switchQuality + +- Type: `Function` + +Switch quality, and you can give it a name + +[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', +}); + +art.on('firstCanplay', () => { + art.player.switchQuality(url + '/video/one-more-time-one-more-chance-720p.mp4', '720P'); +}); +``` + +### toggle + +- Type: `Function` + +Toggle play and pause + +[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', +}); + +art.on('firstCanplay', () => { + art.player.toggle(); +}); +``` + +### volume + +- Type: `Number` + +Geter and Setter of the current volume + +[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', +}); + +art.on('firstCanplay', () => { + console.log(art.player.volume); + art.player.volume = 5; + console.log(art.player.volume); +}); +``` + +### muted + +- Type: `Number` + +Geter and Setter of the muted + +[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', +}); + +art.on('firstCanplay', () => { + console.log(art.player.muted); + art.player.muted = true; + console.log(art.player.muted); +}); +``` + +## storage + +- Type: `Object` + +### get + +- Type: `Function` + +Get the storage + +[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', +}); + +console.log(art.storage.get('volume')); +``` + +### set + +- Type: `Function` + +Set the storage + +[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', +}); + +art.storage.set('volume', 0.7); +``` + +## i18n + +- Type: `Object` + +### get + +- Type: `Function` + +Get the a i18n value + +[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', +}); + +console.log(art.i18n.get('Play')); +``` + +### update + +- Type: `Function` + +Update the i18n + +[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', +}); + +art.i18n.update({ + 'zh-cn': { + 'More': '更多' + } +}); + +console.log(art.i18n.get('More')); +``` + +## notice + +- Type: `Object` + +> TODO... + +## events + +- Type: `Object` + +> TODO... + +## layers + +- Type: `Object` + +> TODO... + +## controls + +- Type: `Object` + +> TODO... + +## contextmenu + +- Type: `Object` + +> TODO... + +## subtitle + +- Type: `Object` + +> TODO... + +## loading + +- Type: `Object` + +> TODO... + +## mask + +- Type: `Object` + +> TODO... + +## setting + +- Type: `Object` + +> TODO... + +## plugins + +- Type: `Object` + +> TODO... + +# Class static properties + +All properties are read only + +| propertie | Description | +| --------------------- | ------------------------- | +| `Artplayer.version` | Version Information | +| `Artplayer.env` | Environmental variable | +| `Artplayer.config` | Configuration information | +| `Artplayer.utils` | Utils function | +| `Artplayer.DEFAULTS` | Default option | +| `Artplayer.instances` | Instance collection | + +# Event + +> TODO... + +# Third-party libraries + +## flv.js + +- HomePage: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js) + +[Run Code](/lib=https://cdn.bootcss.com/flv.js/1.4.2/flv.js) + +```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.flv', + customType: { + flv: function(video, url) { + const flvPlayer = flvjs.createPlayer({ + type: 'flv', + url: url, + }); + flvPlayer.attachMediaElement(video); + flvPlayer.load(); + }, + }, +}); +``` + +## hls.js + +- HomePage: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js) + +[Run Code](/lib=https://cdn.bootcss.com/hls.js/0.10.1/hls.js) + +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8', + customType: { + m3u8: function(video, url) { + var hls = new Hls(); + hls.loadSource(url); + hls.attachMedia(video); + }, + }, +}); +``` + +## dash.js + +- HomePage: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js) + +[Run Code](/lib=https://cdn.bootcss.com/dashjs/2.9.2/dash.all.min.js) + +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd', + customType: { + mpd: function(video, url) { + var player = dashjs.MediaPlayer().create(); + player.initialize(video, url, true); + }, + }, +}); +``` + +## shaka-player + +- HomePage: [https://github.com/google/shaka-player](https://github.com/google/shaka-player) + +[Run Code](/lib=https://cdn.bootcss.com/shaka-player/2.5.0-beta/shaka-player.compiled.js) + +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd', + customType: { + mpd: function(video, url) { + shaka.polyfill.installAll(); + var player = new shaka.Player(video); + player.load(url); + }, + }, +}); +``` + +## webtorrent + +- HomePage: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent) + +[Run Code](/lib=https://cdn.bootcss.com/webtorrent/0.102.4/webtorrent.min.js) + +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: + 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4', + type: 'torrent', + customType: { + torrent: function(video, url, art) { + var client = new WebTorrent(); + art.loading.show(); + client.add(url, function(torrent) { + var file = torrent.files[0]; + file.renderTo(video, { + autoplay: true, + }); + }); + }, + }, +}); +``` diff --git a/docs/docs/README.md b/docs/docs/README.md index 2e2a235d6..c1b20ebc0 100644 --- a/docs/docs/README.md +++ b/docs/docs/README.md @@ -981,918 +981,67 @@ art.plugins.myPlugin.doSomething(); ## Instance -### isFocus - -- Type: `Boolean` -- Default: `false` - -Return to focus state - -[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', -}); - -console.log(art.isFocus); -``` - -### isPlaying - -- Type: `Boolean` -- Default: `false` - -Return to play state - -[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', -}); - -console.log(art.isPlaying); -``` - -### destroy - -- Type: `Function` - -Destroy instance, will not remove dom by default - -[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', -}); - -setTimeout(function() { - art.destroy(); -}, 1000); - -// Remeve dom -// art.destroy(true); -``` +| propertie | type | Description | +| ----------- | ---------- | ------------------------------------------------ | +| `isFocus` | `Boolean` | Return to focus state | +| `isPlaying` | `Boolean` | Return to play state | +| `destroy` | `Function` | Destroy instance, will not remove dom by default | ## player -- Type: `Object` - -### aspectRatioState - -- Type: `String` -- Default: `''` - -Return the current value of aspect ratio - -[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', -}); - -console.log(art.player.aspectRatioState); -``` - -### aspectRatio - -- Type: `Function` - -Set aspect ratio, Currently only accepts three values：`default`, `4:3`, `16:9` - -[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', -}); - -art.on('firstCanplay', () => { - art.player.aspectRatio('4:3'); -}); -``` - -### aspectRatioRemove - -- Type: `Function` - -Remove aspect ratio - -[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', -}); - -art.on('firstCanplay', () => { - art.player.aspectRatio('4:3'); - setTimeout(function() { - art.player.aspectRatioRemove(); - }, 1000); -}); -``` - -### aspectRatioReset - -- Type: `Function` - -Recalculate the aspect ratio - -### returnUrl - -- Type: `Function` - -A special editable method for return new url, useful when modifying 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', -}); - -Object.defineProperty(art.player, 'returnUrl', { - value: url => url + '?time=' + new Date().getTime(), -}); -``` - -### autoSizeState - -- Type: `Boolean` -- Default: `false` - -Return the current state of auto size - -[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', -}); - -console.log(art.player.autoSizeState); -``` - -### autoSize - -- Type: `Function` - -Return the current state of auto size - -[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', -}); - -art.on('firstCanplay', () => { - art.player.autoSize(); -}); -``` - -### autoSizeRemove - -- Type: `Function` - -Remove the auto size - -[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', -}); - -art.on('firstCanplay', () => { - art.player.autoSize(); - setTimeout(function() { - art.player.autoSizeRemove(); - }, 1000); -}); -``` - -### currentTime - -- Type: `Number` - -`Geter` and `Setter` of the current 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', -}); - -art.on('firstCanplay', () => { - console.log(art.player.currentTime); - art.player.currentTime = 5; - console.log(art.player.currentTime); -}); -``` - -### duration - -- Type: `Number` - -`Geter` of the duration - -[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', -}); - -art.on('firstCanplay', () => { - console.log(art.player.duration); -}); -``` - -### flipState - -- Type: `String` -- Default: `''` - -Return the current state of flip - -[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', -}); - -art.on('firstCanplay', () => { - console.log(art.player.flipState); -}); -``` - -### flip - -- Type: `Function` - -Set flip, Currently only accepts three values：`normal`, `horizontal`, `vertical` - -[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', -}); - -art.on('firstCanplay', () => { - art.player.flip('horizontal'); - console.log(art.player.flipState); -}); -``` - -### flipRemove - -- Type: `Function` - -Remove the flip - -[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', -}); - -art.on('firstCanplay', () => { - art.player.flip('horizontal'); - setTimeout(function() { - art.player.flipRemove(); - }, 1000); -}); -``` - -### fullscreenState - -- Type: `Boolean` -- Default: `false` - -Return the current state of fullscreen - -[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', -}); - -console.log(art.player.fullscreenState); -``` - -### fullscreenEnabled - -- Type: `Function` - -Enable fullscreen - -[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', -}); - -art.on('firstCanplay', () => { - art.player.fullscreenEnabled(); - console.log(art.player.fullscreenState); -}); -``` - -### fullscreenExit - -- Type: `Function` - -Exit fullscreen - -[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', -}); - -art.on('firstCanplay', () => { - art.player.fullscreenEnabled(); - console.log(art.player.fullscreenState); - setTimeout(function() { - art.player.fullscreenExit(); - console.log(art.player.fullscreenState); - }, 1000); -}); -``` - -### fullscreenToggle - -- Type: `Function` - -Toggle fullscreen - -[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', -}); - -art.on('firstCanplay', () => { - art.player.fullscreenToggle(); -}); -``` - -### fullscreenWebState - -- Type: `Boolean` -- Default: `false` - -Return the current state of web fullscreen - -[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', -}); - -console.log(art.player.fullscreenWebState); -``` - -### fullscreenWebEnabled - -- Type: `Function` - -Enable web fullscreen - -[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', -}); - -art.on('firstCanplay', () => { - art.player.fullscreenWebEnabled(); - console.log(art.player.fullscreenWebState); -}); -``` - -### fullscreenWebExit - -- Type: `Function` - -Exit web fullscreen - -[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', -}); - -art.on('firstCanplay', () => { - art.player.fullscreenWebEnabled(); - console.log(art.player.fullscreenWebState); - setTimeout(function() { - art.player.fullscreenWebExit(); - console.log(art.player.fullscreenWebState); - }, 1000); -}); -``` - -### fullscreenWebToggle - -- Type: `Function` - -Toggle web fullscreen - -[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', -}); - -art.on('firstCanplay', () => { - art.player.fullscreenWebToggle(); -}); -``` - -### loaded - -- Type: `Number` - -Return the proportion of the load - -```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', -}); - -art.on('video:progress', () => { - console.log(art.player.loaded); -}); -``` - -### pause - -- Type: `Function` - -Pause playback - -```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', -}); - -art.on('firstCanplay', () => { - art.player.pause(); -}); -``` - -### pipState - -- Type: `Boolean` -- Default: `false` - -Return the current state of pip - -[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', -}); - -console.log(art.player.pipState); -``` - -### pipEnabled - -- Type: `Function` - -Enable pip - -[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', -}); - -art.on('firstCanplay', () => { - art.player.pipEnabled(); - console.log(art.player.pipState); -}); -``` - -### pipExit - -- Type: `Function` - -Exit pip - -[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', -}); - -art.on('firstCanplay', () => { - art.player.pipEnabled(); - console.log(art.player.pipState); - setTimeout(function() { - art.player.pipExit(); - console.log(art.player.pipState); - }, 1000); -}); -``` - -### pipToggle - -- Type: `Function` - -Toggle pip - -[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', -}); - -art.on('firstCanplay', () => { - art.player.pipToggle(); -}); -``` - -### playbackRateState - -- Type: `String` -- Default: `''` - -Return the current state of playback rate - -[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', -}); - -console.log(art.player.playbackRateState); -``` - -### playbackRate - -- Type: `Function` - -Set playbackRate, Currently only accepts three values：0.5, 0.75, 1.0, 1.25, 1.5, 2.0 - -[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', -}); - -art.on('firstCanplay', () => { - art.player.playbackRate(1.5); - console.log(art.player.playbackRateState); -}); -``` - -### playbackRateRemove - -- Type: `Function` - -Remove the playback rate - -[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', -}); - -art.on('firstCanplay', () => { - art.player.playbackRate(1.5); - setTimeout(function() { - art.player.playbackRateRemove(); - }, 1000); -}); -``` - -### playbackRateReset - -- Type: `Function` - -Recalculate the playback rate - -### played - -- Type: `Number` - -Return the proportion of the load - -[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', -}); - -art.on('video:timeupdate', () => { - console.log(art.player.played); -}); -``` - -### screenshot - -- Type: `Function` - -Download the screenshot - -[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', -}); - -art.on('firstCanplay', () => { - art.player.currentTime = 5; - art.player.screenshot(); -}); -``` - -### seek - -- Type: `Function` - -Set the current 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', -}); - -art.on('firstCanplay', () => { - art.player.seek(5); -}); -``` - -### switchQuality - -- Type: `Function` - -Switch quality, and you can give it a name - -[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', -}); - -art.on('firstCanplay', () => { - art.player.switchQuality(url + '/video/one-more-time-one-more-chance-720p.mp4', '720P'); -}); -``` - -### toggle - -- Type: `Function` - -Toggle play and pause - -[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', -}); - -art.on('firstCanplay', () => { - art.player.toggle(); -}); -``` - -### volume - -- Type: `Number` - -Geter and Setter of the current volume - -[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', -}); - -art.on('firstCanplay', () => { - console.log(art.player.volume); - art.player.volume = 5; - console.log(art.player.volume); -}); -``` - -### muted - -- Type: `Number` - -Geter and Setter of the muted - -[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', -}); - -art.on('firstCanplay', () => { - console.log(art.player.muted); - art.player.muted = true; - console.log(art.player.muted); -}); -``` +| propertie | type | Description | +| ---------------------- | ---------- | ------------------------------------------------------------------------------------- | +| `aspectRatioState` | `String` | Return the current value of aspect ratio | +| `aspectRatio` | `Function` | Set aspect ratio, Currently only accepts three values：`default`, `4:3`, `16:9` | +| `aspectRatioRemove` | `Function` | Remove aspect ratio | +| `aspectRatioReset` | `Function` | Recalculate the aspect ratio | +| `autoSizeState` | `Boolean` | Return the current state of auto size | +| `autoSize` | `Function` | Set auto size | +| `autoSizeRemove` | `Function` | Remove the auto size | +| `currentTime` | `Number` | `Geter` and `Setter` of the current time | +| `duration` | `Number` | `Geter` of the duration | +| `flipState` | `String` | Return the current state of flip | +| `flip` | `Function` | Set flip, Currently only accepts three values：`normal`, `horizontal`, `vertical` | +| `flipRemove` | `Function` | Remove the flip | +| `fullscreenState` | `Boolean` | Return the current state of fullscreen | +| `fullscreenEnabled` | `Function` | Enable fullscreen | +| `fullscreenExit` | `Function` | Exit fullscreen | +| `fullscreenToggle` | `Function` | Toggle fullscreen | +| `fullscreenWebState` | `Boolean` | Return the current state of web fullscreen | +| `fullscreenWebEnabled` | `Function` | Enable web fullscreen | +| `fullscreenWebExit` | `Function` | Exit web fullscreen | +| `fullscreenWebToggle` | `Function` | Toggle web fullscreen | +| `loaded` | `Number` | Return the proportion of the load | +| `pause` | `Function` | Pause playback | +| `pipState` | `Boolean` | Return the current state of pip | +| `pipEnabled` | `Function` | Enable pip | +| `pipExit` | `Function` | Exit pip | +| `pipToggle` | `Function` | Toggle pip | +| `playbackRateState` | `String` | Return the current state of playback rate | +| `playbackRate` | `Function` | Set playbackRate, Currently only accepts three values：0.5, 0.75, 1.0, 1.25, 1.5, 2.0 | +| `playbackRateRemove` | `Function` | Remove the playback rate | +| `playbackRateReset` | `Function` | Recalculate the playback rate | +| `played` | `Number` | Return the proportion of the load | +| `screenshot` | `Function` | Download the screenshot | +| `seek` | `Function` | Set the current time | +| `switchQuality` | `Function` | Switch quality, and you can give it a name | +| `toggle` | `Function` | Toggle play and pause | +| `volume` | `Number` | Geter and Setter of the current volume | +| `muted` | `Boolean` | Geter and Setter of the muted | ## storage -- Type: `Object` - -### get - -- Type: `Function` - -Get the storage - -[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', -}); - -console.log(art.storage.get('volume')); -``` - -### set - -- Type: `Function` - -Set the storage - -[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', -}); - -art.storage.set('volume', 0.7); -``` +| propertie | type | Description | +| --------- | ---------- | --------------- | +| `get` | `Function` | Get the storage | +| `set` | `Function` | Set the storage | ## i18n -- Type: `Object` - -### get - -- Type: `Function` - -Get the a i18n value - -[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', -}); - -console.log(art.i18n.get('Play')); -``` - -### update - -- Type: `Function` - -Update the i18n - -[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', -}); - -art.i18n.update({ - 'zh-cn': { - 'More': '更多' - } -}); - -console.log(art.i18n.get('More')); -``` +| propertie | type | Description | +| --------- | ---------- | -------------------- | +| `get` | `Function` | Get the a i18n value | +| `update` | `Function` | Update the i18n | ## notice