+
+```js
+console.info(Artplayer.kindOf('0'))
+console.info(Artplayer.kindOf(0))
+console.info(Artplayer.kindOf({}))
+console.info(Artplayer.kindOf([]))
+```
\ No newline at end of file
diff --git a/packages/artplayer-document/docs/en/Events.mdx b/packages/artplayer-document/docs/en/Events.mdx
new file mode 100644
index 000000000..970efc1c1
--- /dev/null
+++ b/packages/artplayer-document/docs/en/Events.mdx
@@ -0,0 +1,310 @@
+---
+title: 实例事件
+sidebar_position: 6
+slug: /events
+---
+
+播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 `video` 元素，是直接监听`video`元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 `video:`
+
+## 原生事件
+
+更多信息请阅读 [Mozilla Video Events](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events)
+
+| 事件名字 | 触发时间 |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `video:canplay` | The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. |
+| `video:canplaythrough` | The browser estimates it can play the media up to its end without stopping for content buffering. |
+| `video:complete` | The rendering of an OfflineAudioContext is terminated. |
+| `video:durationchange` | The duration attribute has been updated. |
+| `video:emptied` | The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. |
+| `video:ended` | Playback has stopped because the end of the media was reached. |
+| `video:loadeddata` | The first frame of the media has finished loading. |
+| `video:loadedmetadata` | The metadata has been loaded. |
+| `video:pause` | Playback has been paused. |
+| `video:play` | Playback has begun. |
+| `video:playing` | Playback is ready to start after having been paused or delayed due to lack of data. |
+| `video:progress` | Fired periodically as the browser loads a resource. |
+| `video:ratechange` | The playback rate has changed. |
+| `video:seeked` | A seek operation completed. |
+| `video:seeking` | A seek operation began. |
+| `video:stalled` | The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. |
+| `video:suspend` | Media data loading has been suspended. |
+| `video:timeupdate` | The time indicated by the currentTime attribute has been updated. |
+| `video:volumechange` | The volume has changed. |
+| `video:waiting` | Playback has stopped because of a temporary lack of data |
+
+## 自定义事件
+
+### ready
+
+当实例初始化完成，并视频可以被播放时触发，只会触发一个，哪怕视频地址变化了
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', (...args) => {
+ console.info(args);
+});
+```
+
+### play
+
+在视频被播放后触发
+
+
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ autoplay: true,
+ url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+ customType: {
+ m3u8: function (video, url) {
+ var hls = new Hls();
+ hls.loadSource(url);
+ hls.attachMedia(video);
+ },
+ },
+});
+```
+
+## dash.js
+
+- 主页: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ autoplay: true,
+ 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
+
+- 主页: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ autoplay: true,
+ 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
+
+- 主页: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ autoplay: true,
+ 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 = true;
+ client.add(url, function (torrent) {
+ var file = torrent.files[0];
+ file.renderTo(video, {
+ autoplay: true,
+ });
+ });
+ },
+ },
+});
+
+art.on('ready', () => {
+ art.template.$video.controls = false;
+});
+```
diff --git a/packages/artplayer-document/docs/en/Options.md b/packages/artplayer-document/docs/en/Options.md
new file mode 100644
index 000000000..6487ad03b
--- /dev/null
+++ b/packages/artplayer-document/docs/en/Options.md
@@ -0,0 +1,1028 @@
+---
+title: Basic options
+sidebar_position: 2
+slug: /options
+---
+
+## container
+
+- Type: `String、Element`
+- Default: `#artplayer`
+- Required: `Yes`
+
+The dom container mounted by the player must have a size, otherwise the player cannot display
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ // container: document.querySelector('.artplayer-app'),
+ url: '/assets/sample/video.mp4',
+});
+```
+
+You may need to initialize the size of the container element, such as:
+
+```css
+.artplayer-app {
+ width: 400px;
+ height: 300px;
+}
+```
+
+## url
+
+- Type: `String`
+- Default: `''`
+- Required: `Yes`
+
+Video source address, default support three video file formats: `.mp4`、`.ogg`、`.webm`
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+```
+
+## poster
+
+- Type: `String`
+- Default: `''`
+
+The poster of the video will only appear in a state in which the player is initialized and not played.
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ poster: '/assets/sample/poster.jpg',
+});
+```
+
+## title
+
+- Type: `String`
+- Default: `''`
+
+Video headings, currently appear in video screenshots and mini mode
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ title: '【新海诚动画】『秒速5センチメートル』',
+ screenshot: true,
+});
+```
+
+## theme
+
+- Type: `String`
+- Default: `#f00`
+
+Player theme color, currently only on the progress bar
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ theme: '#ffad00',
+});
+```
+
+## volume
+
+- Type: `Number`
+- Default: `0.7`
+
+Default volume of the player
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ volume: 0.5,
+});
+```
+
+:::tip Tip
+
+The player caches the size of the last volume, when the next initialization (such as refreshing the page) player reads the cache value
+
+:::
+
+## isLive
+
+- Type: `Boolean`
+- Default: `false`
+
+Use live mode, hide progress bar and play time
+
+
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ autoplay: true,
+ muted: true,
+});
+```
+
+:::tip Tip
+
+If you want the default to enter the page, you can automatically play the video, `muted` must be `true`, more information, please read [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
+
+:::
+
+## autoSize
+
+- Type: `Boolean`
+- Default: `false`
+
+The size of the player will populate the entire `container` size, so there is often a black edge, the option can automatically adjust the player size to hide the black side.
+
+
▶ Run Code
+
+```js
+// Zoom browser window View effect
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ autoSize: true,
+});
+```
+
+## autoMini
+
+- Type: `Boolean`
+- Default: `false`
+
+When the player scrolls outside the browser viewport, automatically enter the mini play mode
+
+
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ loop: true,
+});
+```
+
+## flip
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display a video flip function, currently appear in the `setting panel`, so you need to set up `setting` is True
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ flip: true,
+ setting: true,
+});
+```
+
+## rotate
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display a video rotation function, you need to set the `setting` and `autoSize` for `true`
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ rotate: true,
+ setting: true,
+ autoSize: true,
+});
+```
+
+## playbackRate
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether the video playback speed function is displayed, it will appear in the setting panel and contextmenu
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ playbackRate: true,
+ setting: true,
+});
+```
+
+## aspectRatio
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display video long aspect ratio, it will appear in the setting panel and contextmenu
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ aspectRatio: true,
+ setting: true,
+});
+```
+
+## screenshot
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display video screenshots in the bottom control bar
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ screenshot: true,
+ // Optional
+ moreVideoAttr: {
+ crossOrigin: 'anonymous',
+ },
+});
+```
+
+:::tip Tip
+
+Because browser security mechanisms, if video source addresses and websites are cross-domain, screenshot failed
+
+:::
+
+## setting
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display the setting panel of the switch button in the bottom control bar
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ setting: true,
+});
+```
+
+## hotkey
+
+- Type: `Boolean`
+- Default: `true`
+
+Whether to use shortcut keys
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ hotkey: true,
+});
+```
+
+| hotkey | describe |
+| ------- | ----------------------- |
+| `↑` | Increasing volume |
+| `↓` | lower the volume |
+| `←` | Fast forward 5 seconds |
+| `→` | Fast backward 5 seconds |
+| `space` | Switch play / pause |
+
+:::tip Tip
+
+This hotkey will take effect only after the player gets the focus (if you click on the player).
+
+:::
+
+## pip
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display the PIP switch button in the bottom control bar
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ pip: true,
+});
+```
+
+## mutex
+
+- Type: `Boolean`
+- Default: `true`
+
+If there are multiple players on the page at the same time, can only one player be allowed to play
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ mutex: true,
+});
+```
+
+## fullscreen
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display the full screen button of the player window in the bottom control bar
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ fullscreen: true,
+});
+```
+
+## fullscreenWeb
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to display the full screen button of the player webpage in the bottom control bar
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ fullscreenWeb: true,
+});
+```
+
+## subtitleOffset
+
+- Type: `Boolean`
+- Default: `false`
+
+Subtitle time offset, in the range `[-5s, 5s]`
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ subtitle: {
+ url: '/assets/sample/subtitle.srt',
+ },
+ setting: true,
+ subtitleOffset: true,
+});
+```
+
+## miniProgressBar
+
+- Type: `Boolean`
+- Default: `false`
+
+Mini progress bar, only appears when the player loses focus and is playing
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ miniProgressBar: true,
+});
+```
+
+## localVideo
+
+- Type: `Boolean`
+- Default: `false`
+
+To open a local video, you need to use the `art.plugins.localVideo.attach` method to mount the open video button
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ localVideo: true,
+ controls: [
+ {
+ name: 'preview',
+ position: 'right',
+ html: 'Open video',
+ mounted: ($preview) => {
+ art.plugins.localVideo.attach($preview);
+ },
+ },
+ ],
+});
+```
+
+## localSubtitle
+
+- Type: `Boolean`
+- Default: `false`
+
+To open local subtitles, you need to use the `art.plugins.localSubtitle.attach` method to mount the open subtitle button
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ localSubtitle: true,
+ controls: [
+ {
+ name: 'preview',
+ position: 'right',
+ html: 'Open subtitle',
+ mounted: ($preview) => {
+ art.plugins.localSubtitle.attach($preview);
+ },
+ },
+ ],
+});
+```
+
+## useSSR
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to use SSR mounting mode, it is useful if you want to render the HTML required by the player in advance before mounting the player
+
+You can access the HTML required by the player through Artplayer.html
+
+
▶ Run Code
+
+```js
+var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
+
+var art = new Artplayer({
+ container: $container,
+ url: '/assets/sample/video.mp4',
+ useSSR: true,
+});
+```
+
+:::tip Tip
+
+SSR is the abbreviation of Server Side Render. The content on the page is generated by server side rendering, and the browser directly displays the HTML returned by the server side.
+
+:::
+
+## layers
+
+- Type: `Array`
+- Default: `[]`
+
+Initialize a custom layers
+
+| Property | Type | Description |
+| --------- | ------------------- | ------------------------------------------------------------- |
+| `disable` | `Boolean` | Whether to disable the component |
+| `name` | `String` | The unique name of the component, used to mark the class name |
+| `index` | `Number` | Component index, priority for display |
+| `html` | `String`、`Element` | DOM element of the component |
+| `style` | `Object` | Component style object |
+| `click` | `Function` | Component click event |
+| `mounted` | `Function` | Triggered after the component is mounted |
+| `tooltip` | `String` | Prompt text of the component |
+
+
▶ Run Code
+
+```js
+var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ layers: [
+ {
+ index: 1,
+ name: 'potser',
+ disable: false,
+ html: ``,
+ style: {
+ position: 'absolute',
+ top: '20px',
+ right: '20px',
+ opacity: '.9',
+ },
+ click: function (...args) {
+ console.info('You click on the component');
+ art.layers.show = false;
+ },
+ mounted: function (...args) {
+ console.info('Component mount completion');
+ },
+ },
+ ],
+});
+```
+
+## contextmenu
+
+- Type: `Array`
+- Default: `[]`
+
+Initialize custom contextmenu
+
+| Property | Type | Description |
+| --------- | ------------------- | ------------------------------------------------------------- |
+| `disable` | `Boolean` | Whether to disable the component |
+| `name` | `String` | The unique name of the component, used to mark the class name |
+| `index` | `Number` | Component index, priority for display |
+| `html` | `String`、`Element` | DOM element of the component |
+| `style` | `Object` | Component style object |
+| `click` | `Function` | Component click event |
+| `mounted` | `Function` | Triggered after the component is mounted |
+| `tooltip` | `String` | Prompt text of the component |
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ contextmenu: [
+ {
+ html: 'Custom menu',
+ click: function () {
+ console.info('You clicked the custom menu');
+ art.contextmenu.show = false;
+ },
+ },
+ ],
+});
+
+art.on('ready', () => {
+ art.contextmenu.show = true;
+});
+```
+
+## controls
+
+- Type: `Array`
+- Default: `[]`
+
+Initialize the customized bottom control bar
+
+| Property | Type | Description |
+| ---------- | ------------------- | ------------------------------------------------------------- |
+| `disable` | `Boolean` | Whether to disable the component |
+| `name` | `String` | The unique name of the component, used to mark the class name |
+| `index` | `Number` | Component index, priority for display |
+| `html` | `String`、`Element` | DOM element of the component |
+| `style` | `Object` | Component style object |
+| `click` | `Function` | Component click event |
+| `mounted` | `Function` | Triggered after the component is mounted |
+| `tooltip` | `String` | Prompt text of the component |
+| `position` | `String` | Location at `left` or `right` |
+
+
+
+```js
+function myPlugin(art) {
+ console.info('You can access an instance of a player in the plugin');
+ return {
+ name: 'myPlugin',
+ something: 'Custom export properties',
+ doSomething: function () {
+ console.info('Custom export method');
+ },
+ };
+}
+
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ plugins: [myPlugin],
+});
+
+art.on('ready', () => {
+ console.info(art.plugins.myPlugin.something);
+ console.info(art.plugins.myPlugin.doSomething());
+});
+```
+
+## whitelist
+
+- Type: `Array`
+- Default: `[]`
+
+Because there are a variety of differences and restrictions in different mobile devices, this player is mount video by default on mobile devices. If you want to use this player on mobile devices, you need to manually open white list.
+
+The whitelist is an array type, which matches the `window.navigator.userAgent`, as long as one of the match is successful, enable the player
+
+Support `string` match, `function` match, `regular` match
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ whitelist: ['iPhone OS 11'],
+ // whitelist: ['*'],
+ // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)],
+ // whitelist: [/iPhone OS 11/gi]
+});
+```
+
+:::tip Tip
+
+If you want all types of mobile devices to enable players, set the whitelist to wildcard: `['*']`
+
+:::
+
+## thumbnails
+
+- Type: `Object`
+- Default: `{}`
+
+Set a preview map on the progress bar
+
+| Property | Type | Description |
+| -------- | -------- | -------------- |
+| `url` | `String` | Preview url |
+| `number` | `Number` | Preview number |
+| `width` | `Number` | Preview width |
+| `height` | `Number` | Preview height |
+| `column` | `Number` | Preview column |
+
+
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ subtitle: {
+ url: '/assets/sample/subtitle.srt',
+ encoding: 'utf-8',
+ bilingual: true,
+ style: {
+ color: '#03A9F4',
+ 'font-size': '30px',
+ },
+ },
+});
+```
+
+## moreVideoAttr
+
+- Type: `Object`
+- Default: `{'controls': false,'preload': 'metadata'}`
+
+More video properties, these properties will be written directly into video elements
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ moreVideoAttr: {
+ 'webkit-playsinline': true,
+ playsInline: true,
+ },
+});
+```
+
+## icons
+
+- Type: `Object`
+- Default: `{}`
+
+Used to replace the default icon, support `HTML` string
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ icons: {
+ loading: '',
+ state: '',
+ play: '',
+ pause: '',
+ volume: '',
+ volumeClose: '',
+ subtitle: '',
+ screenshot: '',
+ setting: '',
+ fullscreen: '',
+ fullscreenWeb: '',
+ pip: '',
+ },
+});
+```
+
+## type
+
+- Type: `String`
+- Default: `''`
+
+Used to specify the format of the video, you need to use the CustomType to use, please visit [Libraries](/document/libraries)
+
+The default video format is the suffix of video addresses (such as .flv,.mkv, .ts), but sometimes video address does not have the correct suffix, so it is necessary to specify
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.flv',
+ type: 'flv',
+});
+```
+
+## customType
+
+- Type: `Object`
+- Default: `{}`
+
+Match by the format of the video, hand over video decoding to third party programs, please visit [Libraries](/document/libraries)
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.flv',
+ customType: {
+ flv: function (video, url, art) {
+ // video: Video DOM element
+ // url: Video url
+ // art: Current instance
+ },
+ },
+});
+```
+
+## lang
+
+- Type: `String`
+- Default: `navigator.language.toLowerCase()`
+
+Default display language, currently support: `en`、`zh-cn`、`zh-tw`
+
+
▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ lang: 'en',
+});
+```
diff --git a/packages/artplayer-document/docs/en/Overview.md b/packages/artplayer-document/docs/en/Overview.md
index eaf2ee917..f65b2f6fb 100644
--- a/packages/artplayer-document/docs/en/Overview.md
+++ b/packages/artplayer-document/docs/en/Overview.md
@@ -1,72 +1,247 @@
---
-title: Overview
+title: Quick start
sidebar_position: 1
slug: /
---
-## Integration Guides
+## Install
-- Require confirmation from AWDA to implement to production after complete UAT for all services.
+### Install by `npm`:
-- You can use API tools to test some services during your development。
+```bash
+$ npm install artplayer
+```
-- You can check the response code or contact us when you have problems during the testing
+### Install by `yarn`:
-- All services using POST method to send request（Including Inquiry）
+```bash
+$ yarn add artplayer
+```
-- All requests and responses are JSON format. NOTE: Header Content-Type -> application/json UTF-8 encoding
+Then load the `Artplayer` module:
-- All requests require signature
+```js
+// ES6
+import Artplayer from 'artplayer';
-## Document Change Control
+// CommonJS
+const Artplayer = require('artplayer');
+```
-| Version | Date | Authors | Summary of changes |
-| ------- | ---------- | ------- | -------------------- |
-| 1.0.0 | 2019.06.03 | ZHIBO | Thumbnails image url |
+### Install by `script`:
-## API Summary
+```html
+
+
-| **Service name** | **Description** |
-| -----------------| --------------- |
-| user registration|
Provider : AWDA
User : Third party
Mandatory : YES
Description : All other services can be used only after user registration success
|
-| Authorization list inquiry|
Provider : AWDA
User : Third party
Mandatory : NO
Description : Get the authorization list and check the authorization status
|
-| Get the authorization detail page|
Provider : AWDA
User : Third party
Mandatory : NO
Description : Customer complete the authorization in the pages
-| Call back for authorization status|
Provider : AWDA
User : Third party
Mandatory : NO
Description : To receive the authorization status
|
-| Bank card inquiry|
Provider : AWDA
User : Third party
Mandatory : YES
Description : To inquiry bank card status
|
-| Get bank list|
Provider : AWDA
User : Third party
Mandatory : YES
Description : Get the bank list for bank card input
|
-| Bank card verification|
Provider : AWDA
User : Third party
Mandatory : YES
Description : Verify and submit bank card
|
-| Submit loan|
Provider : AWDA
User : Third party
Mandatory : YES
Description : Submit loan info, including (personal info, work info and emergency contact)
',
+ state: '
',
+ play: '',
+ pause: '',
+ volume: '',
+ volumeClose: '',
+ subtitle: '',
+ screenshot: '',
+ setting: '',
+ fullscreen: '',
+ fullscreenWeb: '',
+ pip: '',
+ },
+});
+```
+
+## type
+
+- Type: `String`
+- Default: `''`
+
+Used to specify the format of the video, you need to use the CustomType to use, please visit [Libraries](/document/libraries)
+
+The default video format is the suffix of video addresses (such as .flv,.mkv, .ts), but sometimes video address does not have the correct suffix, so it is necessary to specify
+
+