diff --git a/docs/llms.manifest.json b/docs/llms.manifest.json
new file mode 100644
index 000000000..da932bee7
--- /dev/null
+++ b/docs/llms.manifest.json
@@ -0,0 +1,271 @@
+{
+ "schemaVersion": 1,
+ "generation": "offline-source-preserving",
+ "sources": [
+ {
+ "file": "packages/artplayer-vitepress/docs/en/advanced/built-in.md",
+ "sha256Lf": "5d56bce1f12b10363643edb8f655bbda1ed656b9646561c2e422ca9eb9a7b055"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/advanced/class.md",
+ "sha256Lf": "57ae1273515faa31ae28672f80a44d7b6f4aee918b59b814c638e3fd311f56ba"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/advanced/event.md",
+ "sha256Lf": "e11360c89bc91ed4f68ce9a40d335c1726ef006a23950d5d9ce4475789aecb7e"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/advanced/global.md",
+ "sha256Lf": "01380ae04fedd94dd91f5f31c51d4894c458dad3268cf38119b54a8fe73ee46c"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/advanced/plugin.md",
+ "sha256Lf": "b6defaab71f22becbc8d3141a2b2ac746c9fbe24eba31326837c2e8ce8b59057"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/advanced/property.md",
+ "sha256Lf": "041d33b8d81cbb928ea07504885ceccab4becf3476bf82120013d5f2840c31b7"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/component/contextmenu.md",
+ "sha256Lf": "df86b1d08d01288e68fa861e3f645109d6305868785a9005906c95dc86280f1f"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/component/controls.md",
+ "sha256Lf": "cd516c25f6d27c52da58e41dd98b360975f1e43b1d42b460ea3a2e21c6a3c2b2"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/component/layers.md",
+ "sha256Lf": "bd8a5d0b996159b1fb563caa9f74cce3bcf97c4bca9eea99f1cd75ceacc6a0d3"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/component/setting.md",
+ "sha256Lf": "652e85b02f9de60ff794cb3527a3e4ae514a3441cacebf340c1a82d09ce06f08"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/index.md",
+ "sha256Lf": "adec563b74e5d690f97a710bf58478d04092f0de199674152e68da817f412ee5"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/start/i18n.md",
+ "sha256Lf": "1551bf939aab1ee942d8480df891640109d18aa9adc016adf1d075bee5ef1de9"
+ },
+ {
+ "file": "packages/artplayer-vitepress/docs/en/start/option.md",
+ "sha256Lf": "72776482f31a3240462d72d56912b2e9f96583a12f36b6556abdf379ca1d3fdf"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-ads.d.ts",
+ "sha256Lf": "bf128828d5b104fc844a4f134a02162e57472d8c927a50df7b3878f4c5ed7652"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-ambilight.d.ts",
+ "sha256Lf": "9f06ccb7398053dca642ca369aa47f54cbb3e4dd4d5e252e999e59e496d8eee8"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-asr.d.ts",
+ "sha256Lf": "5096f097636c018bc05c497324c271af3fefaebccda7fa3e9cd43b63477704ad"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-audio-track.d.ts",
+ "sha256Lf": "604af2a3790eb7c583ba150c402dca0a3e458469cc74913b51fee2f3d3882541"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-auto-thumbnail.d.ts",
+ "sha256Lf": "f66bba7f633202c2ef359a989269c643b75d91594364f7ed6fb67f9898aeac03"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-chapter.d.ts",
+ "sha256Lf": "d5bd68579659afa44158c894e12372cedd6f958415ced370a65c294550aa828d"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-chromecast.d.ts",
+ "sha256Lf": "0a0b932081cac0efbcedea28dc1077484963b7f406808378704062661a4c0338"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-danmuku-mask.d.ts",
+ "sha256Lf": "06c6e938876edcc0ac2c8dcd1e1be4596b0f056685a3523d4c9836f2f2f90362"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-danmuku.d.ts",
+ "sha256Lf": "e3421bdbdfc6bea1b0b633300350fff1a745d8bc21c1430b6154a23fa3ad0415"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-dash-control.d.ts",
+ "sha256Lf": "c7e3c83f3377b615e503a270af12915dcc82fe3f2cfabdae396632855a27f73f"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-document-pip.d.ts",
+ "sha256Lf": "42faa0a6549149efd01b46c3c59246bd4dc33f2383b63b04e9f5376de29fdb8e"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-hls-control.d.ts",
+ "sha256Lf": "6a623bb6ba4cc0598a3dd1aab5ef7ca4fbae11973a787885eccba10cc7aa2c7c"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-jassub.d.ts",
+ "sha256Lf": "ce713e0a61a81bfc31087ea1a880a99398ef7c2b833e567c91e4e98f5ae6f621"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-multiple-subtitles.d.ts",
+ "sha256Lf": "edb15207df69a695311e849555cf989bfc32da20c2456731b6814de5400567bb"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-vast.d.ts",
+ "sha256Lf": "b21ed9a852b3ec3cc9b409cce08e91905e42abdc1d642acc9b412c33c83287b7"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-vtt-thumbnail.d.ts",
+ "sha256Lf": "d82c0fe08bcf9c60e2a634e9f1fd8ccc75dc8e0ddbfa8262cccaefc9604aa61b"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-proxy-canvas.d.ts",
+ "sha256Lf": "83c408e0724a598f9ff32d68d752f39e03feb69ba4f6a49ba02f9d4df898453e"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-proxy-mediabunny.d.ts",
+ "sha256Lf": "acbaa0a25f20ac15b3d79db00b3a16167f84452ab58933110f42dcb3262fbd3e"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-tool-iframe.d.ts",
+ "sha256Lf": "c06c6819146ba64bd6ee498871d9e19ab5a9e88c9cc7bed2c0c4968fa39dfed7"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-tool-thumbnail.d.ts",
+ "sha256Lf": "9b72d10a1fe964d54fcf4774770074058ea739b4f734b52b8f4adebb37fc83e6"
+ },
+ {
+ "file": "docs/assets/ts/artplayer.d.ts",
+ "sha256Lf": "652c0fdf605e87203526777a05851bd69c95c1660d5ff29eab19c00967c9a985"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-i18n.d.ts",
+ "sha256Lf": "60851e22ea50ed540f1be0f5a110077cdd5e6ab87345a675838f6c6333517405"
+ },
+ {
+ "file": "docs/assets/example/ads.js",
+ "sha256Lf": "c84a97d2b1970c323a0c2538b846312bff38513e10de271fe5f239953da88cd3"
+ },
+ {
+ "file": "docs/assets/example/ambilight.js",
+ "sha256Lf": "f97c1404886ba6474b4e14339c563fd2de50b7d50fdc4c9d59d85a3142a1ad52"
+ },
+ {
+ "file": "docs/assets/example/asr.js",
+ "sha256Lf": "bb7fd5eee3df887b7e0c72a6f42f74f0253350f9bc884f73cb9c2996f0e35724"
+ },
+ {
+ "file": "docs/assets/example/asr.local.js",
+ "sha256Lf": "32371e51ac5f55edaa146002e7e4594ec056bf198db8b1e62e6d68ec2ea48f30"
+ },
+ {
+ "file": "docs/assets/example/audio.track.js",
+ "sha256Lf": "9ed26b2ee006e1a430db68b2a1b308c4801dd3a4cc87c74e8a8f5ccf3456ac8d"
+ },
+ {
+ "file": "docs/assets/example/auto.thumbnail.js",
+ "sha256Lf": "e0f706bbbab8e2d0f3201ea6b91f1d5530c6bb65f5c1745dc8ade9acc6d66295"
+ },
+ {
+ "file": "docs/assets/example/canvas.js",
+ "sha256Lf": "95a971773e93cfb340a07eebcd49e333825f49ce0d167514ad98a188cd027799"
+ },
+ {
+ "file": "docs/assets/example/chapter.js",
+ "sha256Lf": "93f2378a1b7a105721511d34fd632ec7745b4b20c472072c410f76b25383c96b"
+ },
+ {
+ "file": "docs/assets/example/chromecast.js",
+ "sha256Lf": "edd4d232a667a3ca5bae247dca3c557431975b9ae38dc56cc590b57e327d048f"
+ },
+ {
+ "file": "docs/assets/example/danmuku.js",
+ "sha256Lf": "3f91461e2466f13ed4e72e6bd69986461192d8c6a9ca866fa347599f6958e021"
+ },
+ {
+ "file": "docs/assets/example/danmuku.mask.js",
+ "sha256Lf": "c0fe4f2d4cd60738583c4bfeebc24bc3365d8ca382e6f4ff86e1056f5a2729a8"
+ },
+ {
+ "file": "docs/assets/example/dash.control.js",
+ "sha256Lf": "edc4326f03262a222e06bb780aab05c903ee162829dec60970e738c1e260eef2"
+ },
+ {
+ "file": "docs/assets/example/dash.js",
+ "sha256Lf": "49a7837016b6f0e8ac045e6aba7bb95e1997e6fd834243b4c62d0c97a2938776"
+ },
+ {
+ "file": "docs/assets/example/document.pip.js",
+ "sha256Lf": "2600948ff0128e2e77fe08fbefa9be96543d8fcd81421534dfbfe9cb84e91fde"
+ },
+ {
+ "file": "docs/assets/example/flv.js",
+ "sha256Lf": "51e052e5423318aa25c69eae90a5181c1325edf2d0975fa169308eadb6b395eb"
+ },
+ {
+ "file": "docs/assets/example/hls.control.js",
+ "sha256Lf": "b02fd290d79999790501447fad95736642344b9b30af3ccdbe353f80c7d53a6e"
+ },
+ {
+ "file": "docs/assets/example/hls.js",
+ "sha256Lf": "7f82d60442223ced637daa896199607ca9bd52ac50dabbb47c75561f84e9ff48"
+ },
+ {
+ "file": "docs/assets/example/iframe.js",
+ "sha256Lf": "a2129e0ce772a58ae635fe1b784d65324155655cd2fc3c537ed511dffcb2be7a"
+ },
+ {
+ "file": "docs/assets/example/index.js",
+ "sha256Lf": "7fd8b85433ced107add0e0b3731ef192113435330d976166cbb63992b7625571"
+ },
+ {
+ "file": "docs/assets/example/jassub.js",
+ "sha256Lf": "4c93c554aa0a65ac19c1386bb0cfd9df6545f95b8a6f65541a0db8c072975f6d"
+ },
+ {
+ "file": "docs/assets/example/mediabunny.js",
+ "sha256Lf": "dad4cecb76b2e5ce9164a4da715793911123e8fd2bc4b93f4bcc86a7053bad7d"
+ },
+ {
+ "file": "docs/assets/example/mobile.js",
+ "sha256Lf": "c117fcd0e8b0f3da3745f5b97d2544b52aea49f28a7779704b0455f2a54d00e3"
+ },
+ {
+ "file": "docs/assets/example/mpegts.js",
+ "sha256Lf": "2e819af74536e02fdbccbf3379467dec7b1cf6f3aff7e46c370355320485a482"
+ },
+ {
+ "file": "docs/assets/example/multiple.subtitles.js",
+ "sha256Lf": "d9ccbd334d4c77f26826144870d6700e4b62f1f00b7f8f49817b3ac2583e5cc4"
+ },
+ {
+ "file": "docs/assets/example/setting.test.js",
+ "sha256Lf": "84d6489b87556df556cbf567c9e72895366e0abeba524b9bb67ef9561d1dda60"
+ },
+ {
+ "file": "docs/assets/example/thumbnail.js",
+ "sha256Lf": "e166845905f131dea0979eb77471f5531a59b93ab2dc28fef1b6791adb42fc30"
+ },
+ {
+ "file": "docs/assets/example/tool.thumbnail.js",
+ "sha256Lf": "ef830a5f499e14c09d51aa31aaa0a194ea1f910b27f14ef97c0ca8f67d529a54"
+ },
+ {
+ "file": "docs/assets/example/vast.js",
+ "sha256Lf": "ce93b48fabc2f1fd39fdaa8af3ae9f86a420c9aa65551e2e196d754070f36064"
+ },
+ {
+ "file": "docs/assets/example/vtt.thumbnail.js",
+ "sha256Lf": "05465b0da63b23626a3032a9c1f44d3e78ed501a313aaed885ac232ab720ffee"
+ },
+ {
+ "file": "docs/assets/example/webtorrent.js",
+ "sha256Lf": "11e6541fbaeb2f854b43ed4ea2bea36f411505343dc79a3f3a9ede9d856b2226"
+ },
+ {
+ "file": "docs/assets/ts/artplayer-plugin-vast.LICENSE.txt",
+ "sha256Lf": "967db6e5026a2fd3cc24d8a04e5c78859f543d0c0f6d4f9599c103e4e93c9b29"
+ }
+ ],
+ "outputSha256Lf": "2dac26861645bdf8f449eb8a3b5e197ecf0bb93e124a4f038ef3d71e6783ad08"
+}
diff --git a/docs/llms.txt b/docs/llms.txt
index 77a67f110..583223e0b 100644
--- a/docs/llms.txt
+++ b/docs/llms.txt
@@ -1,28 +1,43 @@
-
+ArtPlayer documentation source bundle
+Generated offline by yarn build:llm. Source text is preserved after LF normalization.
+These are source references, not proof that every example or documented feature has passed release review.
===== Documentation Summary =====
-Advanced Properties
+===== packages/artplayer-vitepress/docs/en/advanced/built-in.md =====
-The Advanced Properties refer to the secondary properties attached to the instance, which are less commonly used.
+# Advanced Properties
-option
+The `Advanced Properties` here refer to the `secondary properties` attached to the `instance`, which are less commonly used.
+
+## `option`
The player's options.
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.option);
+```
-Note: If you directly modify this option object, the player will not respond immediately.
+:::warning Note
-template
+If you directly modify this `option` object, the player will not respond immediately.
-Manages all DOM elements of the player.
+:::
+## `template`
+
+Manages all `DOM` elements of the player.
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -30,18 +45,26 @@ var art = new Artplayer({
console.info(art.template);
console.info(art.template.$video);
+```
-Note: To easily distinguish between DOM elements and regular objects, all DOM elements within the player are named with a $ prefix.
+:::warning Note
-This is the definition of all DOM elements: artplayer/types/template.d.ts
+To easily distinguish between `DOM` elements and regular objects, all `DOM` elements within the player are named with a `$` prefix.
-events
+This is the definition of all `DOM` elements: [artplayer/types/template.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts)
-Manages all DOM events for the player. It essentially proxies addEventListener and removeEventListener. When using the following methods to handle events, the event will be automatically destroyed when the player is destroyed.
+:::
-The proxy method is used to proxy DOM events.
-The hover method is used to proxy custom hover events.
+## `events`
+Manages all `DOM` events for the player. It essentially proxies `addEventListener` and `removeEventListener`. When using the following methods to handle events, the events will also be automatically destroyed when the player is destroyed.
+
+- The `proxy` method is used to proxy `DOM` events.
+- The `hover` method is used to proxy custom `hover` events.
+
+▶ Run Code
+
+```js
var container = document.querySelector('.artplayer-app');
var art = new Artplayer({
@@ -50,7 +73,7 @@ var art = new Artplayer({
});
art.events.proxy(container, 'click', event => {
- console.info('click', event);
+ console.info('click', event);
});
art.events.hover(container, (event) => {
@@ -58,19 +81,27 @@ art.events.hover(container, (event) => {
}, (event) => {
console.info('mouseleave', event);
});
+```
-Note: If you need DOM events that only exist during the player's lifecycle, it is strongly recommended to use these functions to avoid memory leaks.
+:::warning Note
-storage
+If you need `DOM` events that should only exist during the player's lifecycle, it is strongly recommended to use these functions to avoid memory leaks.
+
+:::
+
+## `storage`
Manages the player's local storage.
-The name property is used to set the cache key.
-The set method is used to set a cache value.
-The get method is used to get a cache value.
-The del method is used to delete a cache value.
-The clear method is used to clear all cache.
+- The `name` property is used to set the cache `key`.
+- The `set` method is used to set a cache.
+- The `get` method is used to retrieve a cache.
+- The `del` method is used to delete a cache.
+- The `clear` method is used to clear all caches.
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -81,11 +112,19 @@ const test = art.storage.get('test');
console.info(test);
art.storage.del('test');
art.storage.clear();
+```
-Note: By default, all player instances share the same localStorage, and the default key is artplayer_settings.
+:::warning Note
-If you want different players to use different localStorage, you can modify art.storage.name.
+By default, all player instances share the same `localStorage`, and the default `key` is `artplayer_settings`.
+If you want different players to use different `localStorage`, you can modify `art.storage.name`.
+
+:::
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -93,27 +132,39 @@ var art = new Artplayer({
art.storage.name = 'your-storage-key';
art.storage.set('test', { foo: 'bar' });
+```
-icons
+## `icons`
-Manages all svg icons for the player.
+Manages all `svg` icons for the player.
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.icons.loading);
+```
-This is the definition of all icons: artplayer/types/icons.d.ts
+:::warning This is the definition of all icons:
-i18n
+[artplayer/types/icons.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts)
-Manages the player's i18n.
+:::
-The get method is used to get an i18n value.
-The update method is used to update the i18n object.
+## `i18n`
+Manages the player's `i18n`.
+
+- The `get` method is used to retrieve an `i18n` value.
+- The `update` method is used to update the `i18n` object.
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -126,13 +177,21 @@ art.i18n.update({
Play: 'Your Play'
}
});
+```
-Note: Using art.i18n.update can only update the i18n after instantiation. If you want to update the i18n before instantiation, please use the i18n option in the basic options.
+:::warning
-notice
+Using `art.i18n.update` can only update the `i18n` after instantiation. If you want to update `i18n` before instantiation, please use the `i18n` option in the basic settings.
-Manages the player's notifications. It only has a show property for displaying notifications.
+:::
+## `notice`
+
+Manages the player's notifications. It only has a `show` property for displaying notifications.
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -141,19 +200,27 @@ var art = new Artplayer({
art.on('ready', () => {
art.notice.show = 'Video Ready To Play';
})
+```
-Note: If you want to hide the notice immediately: art.notice.show = '';
+:::warning
-layers
+If you want to hide the `notice` immediately: `art.notice.show = '';`
+
+:::
+
+## `layers`
Manages the player's layers.
-The add method is used to dynamically add a layer.
-The remove method is used to dynamically remove a layer.
-The update method is used to dynamically update a layer.
-The show property is used to set whether all layers are visible.
-The toggle method is used to toggle the visibility of all layers.
+- The `add` method is used to dynamically add a layer.
+- The `remove` method is used to dynamically remove a layer.
+- The `update` method is used to dynamically update a layer.
+- The `show` property is used to set whether all layers are displayed.
+- The `toggle` method is used to toggle the display of all layers.
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -164,23 +231,32 @@ art.on('ready', () => {
html: 'Some Text',
});
- setTimeout(() => {
- art.layers.show = false;
- }, 1000);
+ setTimeout(() => {
+ art.layers.show = false;
+ }, 1000);
});
+```
-Refer to the following address for Component Configuration: /component/layers.html
+:::warning For `Component Configuration`, please refer to:
-controls
+[/component/layers.html](/component/layers.html)
+
+:::
+
+## `controls`
Manages the player's controls.
-The add method is used to dynamically add a control.
-The remove method is used to dynamically remove a control.
-The update method is used to dynamically update controls.
-The show property is used to set whether to display all controls.
-The toggle method is used to toggle the display of all controls.
+- The `add` method is used to dynamically add a control.
+- The `remove` method is used to dynamically remove a control.
+- The `update` method is used to dynamically update controls
+- The `show` property is used to set whether to display all controls
+- The `toggle` method is used to toggle the display of all controls
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -192,23 +268,31 @@ art.on('ready', () => {
position: 'left',
});
- setTimeout(() => {
- art.controls.show = false;
- }, 1000);
+ setTimeout(() => {
+ art.controls.show = false;
+ }, 1000);
});
+```
-For Component Configuration, please refer to: /component/controls.html
+:::warning For `Component Configuration`, please refer to:
-contextmenu
+[/component/controls.html](/component/controls.html)
-Manages the player's context menu.
+:::
-The add method is used to dynamically add menu items.
-The remove method is used to dynamically remove menu items.
-The update method is used to dynamically update menu items.
-The show property is used to set whether to display all menu items.
-The toggle method is used to toggle the display of all menu items.
+## `contextmenu`
+Manages the player's context menu
+
+- The `add` method is used to dynamically add menu items
+- The `remove` method is used to dynamically remove menu items
+- The `update` method is used to dynamically update menu items
+- The `show` property is used to set whether to display all menu items
+- The `toggle` method is used to toggle the display of all menu items
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -220,24 +304,32 @@ art.on('ready', () => {
});
art.contextmenu.show = true;
- setTimeout(() => {
- art.contextmenu.show = false;
- }, 1000);
+ setTimeout(() => {
+ art.contextmenu.show = false;
+ }, 1000);
});
+```
-For Component Configuration, please refer to: /component/contextmenu.html
+:::warning For `Component Configuration`, please refer to:
-subtitle
+[/component/contextmenu.html](/component/contextmenu.html)
-Manages the player's subtitle functionality.
+:::
-The url property sets and returns the current subtitle URL.
-The style method sets the style of the current subtitle.
-The switch method sets the current subtitle URL and options.
-textTrack gets the current text track.
-activeCues gets the list of currently active cues.
-cues gets the overall list of cues.
+## `subtitle`
+Manages the player's subtitle functionality
+
+- The `url` property sets and returns the current subtitle URL
+- The `style` method sets the style of the current subtitle
+- The `switch` method sets the current subtitle URL and options
+- `textTrack` gets the current text track
+- `activeCues` gets the list of currently active cues
+- `cues` gets the overall list of cues
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -249,19 +341,18 @@ art.on('ready', () => {
color: 'red',
});
});
+```
-info
+## `info`
Manages the player's information panel, commonly used to view the current status of the player and video, such as version number, resolution, duration, etc.
-ArtPlayer Documentation
+- Control the panel's visibility via `art.info.show`
+- The triggered event is named `info` (see the event documentation for details)
-Info Panel
-
-Control the panel's visibility via art.info.show. The triggered event is named info (see the event documentation for details).
-
-Example code:
+▶ Run Code
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -274,13 +365,18 @@ art.on('ready', () => {
art.info.show = false;
}, 3000);
});
+```
-Loading Layer
+## `loading`
-Manages the player's loading layer. The show property is used to set whether to display the loading layer. The toggle property is used to toggle the display of the loading layer.
+Manages the player's loading layer
-Example code:
+- The `show` property is used to set whether to display the loading layer
+- The `toggle` property is used to toggle the display of the loading layer
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -288,17 +384,22 @@ var art = new Artplayer({
art.on('ready', () => {
art.loading.show = true;
- setTimeout(() => {
- art.loading.show = false;
- }, 1000);
+ setTimeout(() => {
+ art.loading.show = false;
+ }, 1000);
});
+```
-Hotkey
+## `hotkey`
-Manages the player's hotkey functionality. The add method is used to add hotkeys. The remove method is used to remove hotkeys.
+Manages the player's hotkey functionality
-Example code:
+- The `add` method is used to add hotkeys
+- The `remove` method is used to remove hotkeys
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -311,18 +412,27 @@ function hotkeyEvent(event) {
art.on('ready', () => {
art.hotkey.add(32, hotkeyEvent);
setTimeout(() => {
- art.hotkey.remove(32, hotkeyEvent);
- }, 5000);
+ art.hotkey.remove(32, hotkeyEvent);
+ }, 5000);
});
+```
-Note: These hotkeys only take effect after the player gains focus (e.g., after clicking on the player).
+:::warning Note
-Mask Layer
+These hotkeys only take effect after the player gains focus (e.g., after clicking on the player)
-Manages the player's mask layer. The show property is used to set whether to display the mask layer. The toggle property is used to toggle the display of the mask layer.
+:::
-Example code:
+## `mask`
+Manages the player's mask layer
+
+- The `show` property is used to set whether to display the mask layer
+- The `toggle` property is used to toggle the display of the mask layer
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -330,17 +440,25 @@ var art = new Artplayer({
art.on('ready', () => {
art.mask.show = false;
- setTimeout(() => {
- art.mask.show = true;
- }, 1000);
+ setTimeout(() => {
+ art.mask.show = true;
+ }, 1000);
});
+```
-Setting Panel
+## `setting`
-Manages the player's settings panel. The add method is used to dynamically add settings items. The remove method is used to dynamically remove settings items. The update method is used to dynamically update settings items. The show property is used to set whether to display all settings items. The toggle method is used to toggle the display of all settings items.
+Manages the player's settings panel
-Example code:
+- The `add` method is used to dynamically add settings items
+- The `remove` method is used to dynamically remove settings items
+- The `update` method is used to dynamically update settings items
+- The `show` property is used to set whether to display all settings items
+- The `toggle` method is used to toggle the display of all settings items
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -353,19 +471,25 @@ var art = new Artplayer({
art.on('ready', () => {
art.setting.show = true;
- setTimeout(() => {
- art.setting.show = false;
- }, 1000);
+ setTimeout(() => {
+ art.setting.show = false;
+ }, 1000);
});
+```
-For the Settings Panel, please refer to: /component/setting.html
+:::warning For `Settings Panel`, please refer to
-Plugins
+[/component/setting.html](/component/setting.html)
-Manages the player's plugin functionality, with only the add method for dynamically adding plugins.
+:::
-Example code:
+## `plugins`
+Manages the player's plugin functionality, with only one method `add` for dynamically adding plugins
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -385,17 +509,21 @@ function myPlugin(art) {
art.on('ready', () => {
art.plugins.add(myPlugin);
});
+```
-Static Properties
+===== packages/artplayer-vitepress/docs/en/advanced/class.md =====
-Static Properties refer to the top-level properties mounted on the constructor function, which are very rarely used.
+# Static Properties
-Instances
+Here, `static properties` refer to the `first-level properties` attached to the `constructor`, which are rarely used.
-Returns an array of all player instances. This property can be useful when you need to manage multiple player instances simultaneously.
+## `instances`
-Example code:
+Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.
+▶ Run Code
+
+```js
console.info([...Artplayer.instances]);
var art = new Artplayer({
@@ -404,105 +532,135 @@ var art = new Artplayer({
});
console.info([...Artplayer.instances]);
+```
-Version
+## `version`
Returns the version information of the player.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.version);
+```
-Env
+## `env`
Returns the environment variables of the player.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.env);
+```
-Build
+## `build`
-Returns the build time of the player.
+Returns the build timestamp of the player.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.build);
+```
-Config
+## `config`
Returns the default configuration for videos.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.config);
+```
-Utils
+## `utils`
Returns the collection of utility functions for the player.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.utils);
+```
-For all utility functions, please refer to the following address: artplayer/types/utils.d.ts
+:::warning For all utility functions, please refer to the following address:
-Scheme
+[artplayer/types/utils.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts)
+
+:::
+
+## `scheme`
Returns the validation schema for player options.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.scheme);
+```
-Emitter
+## `Emitter`
-Returns the constructor function for the event emitter.
+Returns the constructor of the event emitter.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.Emitter);
+```
-Validator
+## `validator`
Returns the validation function for options.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.validator);
+```
-KindOf
+## `kindOf`
-Returns the utility function for type detection.
+Returns the type detection utility function.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.kindOf);
+```
-Html
+## `html`
-Returns the html string required by the player.
+Returns the `html` string required by the player.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.html);
+```
-Option
+## `option`
-Returns the default options for the player.
+Returns the default options of the player.
-Example code:
+▶ Run Code
+```js
console.info(Artplayer.option);
+```
-Instance Events
+===== packages/artplayer-vitepress/docs/en/advanced/event.md =====
-Player events are divided into two types: native events (prefixed with video:) and custom events.
+# Instance Events
-Listen to an event:
+Player events are divided into two types: `native events` of the video (prefixed with `video:`), and `custom events`.
-Example code:
+Listening to events:
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -511,11 +669,13 @@ var art = new Artplayer({
art.on('video:canplay', () => {
console.info('video:canplay');
});
+```
-Listen to an event only once:
+Listening to an event only once:
-Example code:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -524,22 +684,26 @@ var art = new Artplayer({
art.once('video:canplay', () => {
console.info('video:canplay');
});
+```
-Manually trigger an event:
+Manually triggering an event:
-Example code:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.emit('focus');
+```
-Remove an event listener:
+Removing an event:
-Example code:
+▶ Run Code
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -551,15 +715,21 @@ const onReady = () => {
}
art.on('ready', onReady);
+```
-For a complete list of events, please refer to: artplayer/types/events.d.ts
+:::warning For a complete list of events, please refer to:
-Ready Event
+[artplayer/types/events.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts)
+
+:::
+
+## `ready`
Triggered when the player is ready for the first time.
-Example code:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -568,13 +738,15 @@ var art = new Artplayer({
art.on('ready', () => {
console.info('ready');
});
+```
-Restart Event
+## `restart`
-Triggered when the player switches URL and becomes playable.
+Triggered when the player switches URLs and becomes ready to play.
-Example code:
+▶ Run Code
+```js{10}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -587,13 +759,15 @@ art.on('ready', () => {
art.on('restart', (url) => {
console.info('restart', url);
});
+```
-Pause Event
+## `pause`
Triggered when the player is paused.
-Example code:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -602,28 +776,15 @@ var art = new Artplayer({
art.on('pause', () => {
console.info('pause');
});
+```
-ArtPlayer Event Documentation
+## `play`
-The following events are available in ArtPlayer. Each event can be bound using the `art.on()` method. The basic player setup is consistent across examples.
-
-Event: pause
-Triggered when the player pauses.
-
-Example code:
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
-});
-
-art.on('pause', () => {
- console.info('pause');
-});
-
-Event: play
Triggered when the player starts playing.
-Example code:
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -632,11 +793,15 @@ var art = new Artplayer({
art.on('play', () => {
console.info('play');
});
+```
-Event: hotkey
-Triggered when a hotkey is pressed on the player. The event object contains details about the key press.
+## `hotkey`
-Example code:
+Triggered when a player hotkey is pressed.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -645,11 +810,15 @@ var art = new Artplayer({
art.on('hotkey', (event) => {
console.info('hotkey', event);
});
+```
-Event: destroy
-Triggered when the player instance is destroyed. This example shows destroying the player in the ready event handler.
+## `destroy`
-Example code:
+Triggered when the player is destroyed.
+
+▶ Run Code
+
+```js{10}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -662,11 +831,15 @@ art.on('ready', () => {
art.on('destroy', () => {
console.info('destroy');
});
+```
-Event: focus
-Triggered when the player element gains focus.
+## `focus`
-Example code:
+Triggered when the player gains focus.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -675,11 +848,15 @@ var art = new Artplayer({
art.on('focus', (event) => {
console.info('focus', event);
});
+```
-Event: blur
-Triggered when the player element loses focus.
+## `blur`
-Example code:
+Triggered when the player loses focus.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -688,11 +865,15 @@ var art = new Artplayer({
art.on('blur', (event) => {
console.info('blur', event);
});
+```
+
+## `dblclick`
-Event: dblclick
Triggered when the player is double-clicked.
-Example code:
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -701,11 +882,15 @@ var art = new Artplayer({
art.on('dblclick', (event) => {
console.info('dblclick', event);
});
+```
+
+## `click`
-Event: click
Triggered when the player is clicked.
-Example code:
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -714,11 +899,15 @@ var art = new Artplayer({
art.on('click', (event) => {
console.info('click', event);
});
+```
-Event: error
-Triggered when an error occurs while loading the video. The callback provides the error and a reconnectTime parameter.
+## `error`
-Example code:
+Triggered when an error occurs while the player is loading a video.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/404.mp4',
@@ -728,10 +917,15 @@ art.on('error', (error, reconnectTime) => {
console.info(error, reconnectTime);
});
-Event: hover
-Triggered when the mouse enters or leaves the player area. The state parameter indicates 'enter' or 'leave'.
+```
-Example code:
+## `hover`
+
+Triggered when the mouse enters or leaves the player.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -740,11 +934,15 @@ var art = new Artplayer({
art.on('hover', (state, event) => {
console.info('hover', state, event);
});
+```
+
+## `mousemove`
-Event: mousemove
Triggered when the mouse moves over the player.
-Example code:
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -753,11 +951,15 @@ var art = new Artplayer({
art.on('mousemove', (event) => {
console.info('mousemove', event);
});
+```
-Event: resize
-Triggered when the player's container dimensions change.
+## `resize`
-Example code:
+Triggered when the player's dimensions change.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -766,11 +968,15 @@ var art = new Artplayer({
art.on('resize', () => {
console.info('resize');
});
+```
-Event: view
-Triggered when the player enters or leaves the browser viewport. The state parameter indicates the visibility.
+## `view`
-Example code:
+Triggered when the player enters the viewport.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -779,11 +985,15 @@ var art = new Artplayer({
art.on('view', (state) => {
console.info('view', state);
});
+```
-Event: lock
-Triggered when the screen lock state changes, primarily on mobile devices. Requires the lock option to be enabled.
+## `lock`
-Example code:
+Triggered when the lock state changes on mobile devices.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -793,11 +1003,15 @@ var art = new Artplayer({
art.on('lock', (state) => {
console.info('lock', state);
});
+```
-Event: aspectRatio
-Triggered when the player's aspect ratio changes. Requires the aspectRatio and setting options to be enabled.
+## `aspectRatio`
-Example code:
+Triggered when the player's aspect ratio changes.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -808,11 +1022,15 @@ var art = new Artplayer({
art.on('aspectRatio', (aspectRatio) => {
console.info('aspectRatio', aspectRatio);
});
+```
-Event: autoHeight
-Triggered when the player automatically adjusts its height, typically after calling the art.autoHeight() method.
+## `autoHeight`
-Example code:
+Triggered when the player's height is automatically set.
+
+▶ Run Code
+
+```js{10}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -825,11 +1043,15 @@ art.on('ready', () => {
art.on('autoHeight', (height) => {
console.info('autoHeight', height);
});
+```
-Event: autoSize
-Triggered when the player automatically adjusts its size. Requires the autoSize option to be enabled.
+## `autoSize`
-Example code:
+Triggered when the player's size is automatically set.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -839,11 +1061,15 @@ var art = new Artplayer({
art.on('autoSize', () => {
console.info('autoSize');
});
+```
-Event: flip
-Triggered when the video flip state changes. Requires the flip and setting options to be enabled.
+## `flip`
-Example code:
+Triggered when the player is flipped.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -854,11 +1080,15 @@ var art = new Artplayer({
art.on('flip', (flip) => {
console.info('flip', flip);
});
+```
-Event: fullscreen
-Triggered when the player enters or exits traditional window fullscreen mode. Requires the fullscreen option.
+## `fullscreen`
-Example code:
+Triggered when the player enters or exits windowed fullscreen mode.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -868,28 +1098,36 @@ var art = new Artplayer({
art.on('fullscreen', (state) => {
console.info('fullscreen', state);
});
+```
-Event: fullscreenError
-Triggered when an error occurs while attempting to enter window fullscreen mode.
+## `fullscreenError`
-Example code:
+Triggered when a windowed fullscreen error occurs.
+
+▶ Run Code
+
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
- art.fullscreen = true;
+ art.fullscreen = true;
});
art.on('fullscreenError', (event) => {
console.info('fullscreenError', event);
});
+```
-Event: fullscreenWeb
-Triggered when the player enters or exits web fullscreen mode (fullscreen within the browser). Requires the fullscreenWeb option.
+## `fullscreenWeb`
-Example code:
+Triggered when the player enters or exits web fullscreen mode.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -899,11 +1137,15 @@ var art = new Artplayer({
art.on('fullscreenWeb', (state) => {
console.info('fullscreenWeb', state);
});
+```
-Event: mini
-Triggered when the player enters or exits mini-player mode.
+## `mini`
-Example code:
+Triggered when the player enters or exits mini mode.
+
+▶ Run Code
+
+```js{10}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -916,11 +1158,15 @@ art.on('ready', () => {
art.on('mini', (state) => {
console.info('mini', state);
});
+```
-Event: pip
-Triggered when the player enters or exits picture-in-picture mode. Requires the pip option.
+## `pip`
-Example code:
+Triggered when the player enters or exits Picture-in-Picture mode.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -931,10 +1177,15 @@ art.on('pip', (state) => {
console.info('pip', state);
});
-Event: screenshot
-Triggered when a screenshot is captured. Requires the screenshot option. The callback receives the image as a Data URI.
+```
-Example code:
+## `screenshot`
+
+Triggered when the player takes a screenshot.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -944,11 +1195,15 @@ var art = new Artplayer({
art.on('screenshot', (dataUri) => {
console.info('screenshot', dataUri);
});
+```
-Event: seek
-Triggered when the playback time is sought, either by dragging the progress bar or calling a method.
+## `seek`
-Example code:
+Triggered when the player performs a time seek.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -957,11 +1212,15 @@ var art = new Artplayer({
art.on('seek', (currentTime) => {
console.info('seek', currentTime);
});
+```
-Event: subtitleOffset
-Triggered when the subtitle synchronization offset is changed. Requires the subtitleOffset option and a subtitle track.
+## `subtitleOffset`
-Example code:
+Triggered when the subtitle offset changes in the player.
+
+▶ Run Code
+
+```js{11}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -972,23 +1231,18 @@ var art = new Artplayer({
setting: true,
});
-ArtPlayer Event: subtitleOffset
-
-Triggered when the subtitle offset changes.
-
-Example usage:
-
art.on('subtitleOffset', (offset) => {
console.info('subtitleOffset', offset);
});
+```
-
-ArtPlayer Event: subtitleBeforeUpdate
+## `subtitleBeforeUpdate`
Triggered before subtitles are updated.
-Example usage:
+▶ Run Code
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1000,14 +1254,15 @@ var art = new Artplayer({
art.on('subtitleBeforeUpdate', (cues) => {
console.info('subtitleBeforeUpdate', cues);
});
+```
-
-ArtPlayer Event: subtitleAfterUpdate
+## `subtitleAfterUpdate`
Triggered after subtitles are updated.
-Example usage:
+▶ Run Code
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1019,14 +1274,15 @@ var art = new Artplayer({
art.on('subtitleAfterUpdate', (cues) => {
console.info('subtitleAfterUpdate', cues);
});
+```
-
-ArtPlayer Event: subtitleLoad
+## `subtitleLoad`
Triggered when subtitles are loaded.
-Example usage:
+▶ Run Code
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1038,14 +1294,15 @@ var art = new Artplayer({
art.on('subtitleLoad', (option, cues) => {
console.info('subtitleLoad', cues, option);
});
+```
-
-ArtPlayer Event: info
+## `info`
Triggered when the info panel is shown or hidden.
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1054,14 +1311,15 @@ var art = new Artplayer({
art.on('info', (state) => {
console.log(state);
});
+```
+## `layer`
-ArtPlayer Event: layer
+Triggered when a custom layer is shown or hidden.
-Triggered when custom layers are shown or hidden.
-
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1070,14 +1328,15 @@ var art = new Artplayer({
art.on('layer', (state) => {
console.log(state);
});
+```
-
-ArtPlayer Event: loading
+## `loading`
Triggered when the loader is shown or hidden.
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1086,14 +1345,15 @@ var art = new Artplayer({
art.on('loading', (state) => {
console.log(state);
});
+```
-
-ArtPlayer Event: mask
+## `mask`
Triggered when the mask layer is shown or hidden.
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1102,14 +1362,15 @@ var art = new Artplayer({
art.on('mask', (state) => {
console.log(state);
});
+```
-
-ArtPlayer Event: subtitle
+## `subtitle`
Triggered when the subtitle layer is shown or hidden.
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1118,14 +1379,15 @@ var art = new Artplayer({
art.on('subtitle', (state) => {
console.log(state);
});
+```
-
-ArtPlayer Event: contextmenu
+## `contextmenu`
Triggered when the context menu is shown or hidden.
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1134,14 +1396,15 @@ var art = new Artplayer({
art.on('contextmenu', (state) => {
console.log(state);
});
+```
+## `control`
-ArtPlayer Event: control
+Triggered when the control bar is shown or hidden.
-Triggered when the controls are shown or hidden.
-
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1150,14 +1413,15 @@ var art = new Artplayer({
art.on('control', (state) => {
console.log(state);
});
+```
-
-ArtPlayer Event: setting
+## `setting`
Triggered when the settings panel is shown or hidden.
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1168,13 +1432,15 @@ art.on('setting', (state) => {
console.log(state);
});
+```
-ArtPlayer Event: muted
+## `muted`
-Triggered when the mute state changes.
+Triggered when the muted state changes.
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1183,14 +1449,15 @@ var art = new Artplayer({
art.on('muted', (state) => {
console.log(state);
});
+```
+## `keydown`
-ArtPlayer Event: keydown
+Listens for the `keydown` event from the `document`.
-Listens for keydown events from the document.
-
-Example usage:
+▶ Run Code
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1199,106 +1466,160 @@ var art = new Artplayer({
art.on('keydown', (event) => {
console.log(event.code);
});
+```
+## `video:canplay`
-Video Element Events
+The browser can start playing the media, but estimates there is not enough data to play through to the end without stopping for further buffering.
-The following are standard HTML5 video events that ArtPlayer can listen to.
+## `video:canplaythrough`
-video:canplay - The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering.
+The browser estimates it can play the media through to the end without stopping for buffering.
-video:canplaythrough - The browser estimates it can play the media through to the end without stopping to buffer content.
+## `video:complete`
-video:complete - OfflineAudioContext rendering is complete.
+The OfflineAudioContext rendering is complete.
-video:durationchange - Triggered when the value of the duration property changes.
+## `video:durationchange`
-video:emptied - The media has become empty; for example, this event is sent when the media has already been loaded (or partially loaded), and the load() method is called to reload it.
+Triggered when the value of the `duration` property changes.
-video:ended - Playback has stopped because the media has reached its end point.
+## `video:emptied`
-video:error - An error occurred while fetching media data, or the resource type is not a supported media format.
+The media has become empty; for example, this event is sent when the media has already been loaded (or partially loaded), and the `load()` method is called to reload it.
-video:loadeddata - The first frame of the media has finished loading.
+## `video:ended`
-video:loadedmetadata - Metadata has been loaded.
+Playback has stopped because the media has reached its end.
-video:pause - Playback has been paused.
+## `video:error`
-video:play - Playback has begun.
+An error occurred while fetching the media data, or the resource type is not a supported media format.
-video:playing - Playback is ready to start after having been paused or delayed due to lack of data.
+## `video:loadeddata`
-video:progress - Periodically triggered while the browser is loading the resource.
+The first frame of the media has finished loading.
-video:ratechange - The playback rate has changed.
+## `video:loadedmetadata`
-video:seeked - A seek operation has completed.
+Metadata has been loaded.
-video:seeking - A seek operation has begun.
+## `video:pause`
-video:stalled - The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
+Playback has been paused.
-video:suspend - Media data loading has been suspended.
+## `video:play`
-video:timeupdate - The time indicated by the currentTime attribute has been updated.
+Playback has begun.
-video:volumechange - The volume has changed.
+## `video:playing`
-video:waiting - Playback has stopped due to temporary lack of data.
+Playback is ready to start after having been paused or delayed due to lack of data.
+## `video:progress`
-Global Properties
+Fired periodically as the browser loads the resource.
-These global properties refer to the top-level properties mounted on the constructor. The property names are all in uppercase. They are subject to change in the future and are generally not used.
+## `video:ratechange`
-DEBUG - Whether to enable debug mode, which can print all built-in events of the video. Default is off.
+The playback rate has changed.
-Example usage:
+## `video:seeked`
+A seek operation has completed.
+
+## `video:seeking`
+
+A seek operation has begun.
+
+## `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` property has changed.
+
+## `video:volumechange`
+
+The volume has changed.
+
+## `video:waiting`
+
+Playback has stopped because of a temporary lack of data.
+
+===== packages/artplayer-vitepress/docs/en/advanced/global.md =====
+
+# Global Properties
+
+The `global properties` here refer to the `top-level properties` mounted on the `constructor`. All property names are in uppercase. These are subject to change in the future and are rarely used.
+
+## DEBUG
+
+Whether to enable `debug` mode, which can print all built-in video events. Default is off.
+
+▶ Run Code
+
+```js
Artplayer.DEBUG = true;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
+## STYLE
-STYLE - Returns the player style text.
+Returns the player style text.
-Example usage:
+▶ Run Code
+```js
console.log(Artplayer.STYLE);
+```
+## CONTEXTMENU
-CONTEXTMENU - Whether to enable the context menu. Default is on.
+Whether to enable the context menu. Default is on.
-Example usage:
+▶ Run Code
+```js
Artplayer.CONTEXTMENU = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
+## NOTICE_TIME
-NOTICE_TIME - The display duration for notification messages, in milliseconds. Default is 2000.
+The display duration of notification messages, in milliseconds. Default is `2000`.
-Example usage:
+▶ Run Code
+```js
Artplayer.NOTICE_TIME = 5000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
+## SETTING_WIDTH
-SETTING_WIDTH - The default width of the settings panel, in pixels. Default is 250.
+The default width of the settings panel, in pixels. Default is `250`.
-Example usage:
+▶ Run Code
+```js
Artplayer.SETTING_WIDTH = 300;
var art = new Artplayer({
@@ -1310,12 +1631,15 @@ var art = new Artplayer({
playbackRate: true,
aspectRatio: true,
});
+```
+## SETTING_ITEM_WIDTH
-SETTING_ITEM_WIDTH - The default width of settings items in the settings panel, in pixels. Default is 200.
+The default width of a setting item in the settings panel, in pixels. Default is `200`.
-Example usage:
+▶ Run Code
+```js
Artplayer.SETTING_ITEM_WIDTH = 300;
var art = new Artplayer({
@@ -1327,31 +1651,15 @@ var art = new Artplayer({
playbackRate: true,
aspectRatio: true,
});
+```
+## SETTING_ITEM_HEIGHT
-SETTING_ITEM_HEIGHT - The default height of settings items in the settings panel, in pixels. Default is 35.
+The default height of a setting item in the settings panel, in pixels. Default is `35`.
-Example usage:
-
-Artplayer.SETTING_ITEM_HEIGHT = 300;
-
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- setting: true,
- loop: true,
- flip: true,
- playbackRate: true,
- aspectRatio: true,
-});
-
-ArtPlayer provides several static properties that allow you to customize its behavior. These can be set before creating a new player instance.
-
-SETTING_ITEM_HEIGHT
-The height of each item in the settings panel, in pixels. The default is 40.
-
-Example of setting a custom height and initializing a player with various settings enabled:
+▶ Run Code
+```js
Artplayer.SETTING_ITEM_HEIGHT = 40;
var art = new Artplayer({
@@ -1363,12 +1671,15 @@ var art = new Artplayer({
playbackRate: true,
aspectRatio: true,
});
+```
-RESIZE_TIME
-The throttle time for the resize event, in milliseconds. The default is 200.
+## RESIZE_TIME
-Example of setting a custom throttle time and listening for the resize event:
+The throttle time for the `resize` event, in milliseconds. Default is `200`.
+▶ Run Code
+
+```js
Artplayer.RESIZE_TIME = 500;
var art = new Artplayer({
@@ -1379,12 +1690,15 @@ var art = new Artplayer({
art.on('resize', () => {
console.log('resize');
});
+```
-SCROLL_TIME
-The throttle time for the scroll event, in milliseconds. The default is 200.
+## SCROLL_TIME
-Example of setting a custom throttle time and listening for the scroll event:
+The throttle time for the `scroll` event, in milliseconds. Default is `200`.
+▶ Run Code
+
+```js
Artplayer.SCROLL_TIME = 500;
var art = new Artplayer({
@@ -1395,12 +1709,15 @@ var art = new Artplayer({
art.on('scroll', () => {
console.log('scroll');
});
+```
-SCROLL_GAP
-The boundary tolerance distance for the view event, in pixels. The default is 50.
+## SCROLL_GAP
-Example of setting a custom gap and listening for the scroll event:
+The boundary tolerance distance for the `view` event, in pixels. Default is `50`.
+▶ Run Code
+
+```js
Artplayer.SCROLL_GAP = 100;
var art = new Artplayer({
@@ -1411,12 +1728,15 @@ var art = new Artplayer({
art.on('scroll', () => {
console.log('scroll');
});
+```
-AUTO_PLAYBACK_MAX
-The maximum record count for the auto-playback feature. The default is 10.
+## AUTO_PLAYBACK_MAX
-Example of setting a custom maximum and enabling auto-playback:
+The maximum record count for the auto-playback feature. Default is `10`.
+▶ Run Code
+
+```js
Artplayer.AUTO_PLAYBACK_MAX = 20;
var art = new Artplayer({
@@ -1424,12 +1744,15 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
autoPlayback: true,
});
+```
-AUTO_PLAYBACK_MIN
-The minimum record duration for the auto-playback feature, in seconds. The default is 5.
+## AUTO_PLAYBACK_MIN
-Example of setting a custom minimum duration and enabling auto-playback:
+The minimum record duration for the auto-playback feature, in seconds. Default is `5`.
+▶ Run Code
+
+```js
Artplayer.AUTO_PLAYBACK_MIN = 10;
var art = new Artplayer({
@@ -1437,12 +1760,15 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
autoPlayback: true,
});
+```
-AUTO_PLAYBACK_TIMEOUT
-The hide delay duration for the auto-playback feature, in milliseconds. The default is 3000.
+## AUTO_PLAYBACK_TIMEOUT
-Example of setting a custom timeout and enabling auto-playback:
+The hide delay duration for the auto-playback feature, in milliseconds. Default is `3000`.
+▶ Run Code
+
+```js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
var art = new Artplayer({
@@ -1450,24 +1776,30 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
autoPlayback: true,
});
+```
-RECONNECT_TIME_MAX
-The maximum number of automatic reconnection attempts when a connection error occurs. The default is 5.
+## RECONNECT_TIME_MAX
-Example of setting a custom maximum reconnection count:
+The maximum number of automatic reconnection attempts when a connection error occurs. Default is `5`.
+▶ Run Code
+
+```js
Artplayer.RECONNECT_TIME_MAX = 10;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/404.mp4',
});
+```
-RECONNECT_SLEEP_TIME
-The delay time for automatic reconnection when a connection error occurs, in milliseconds. The default is 1000.
+## RECONNECT_SLEEP_TIME
-Example of setting a custom reconnection delay:
+The delay time for automatic reconnection when a connection error occurs, in milliseconds. Default is `1000`.
+▶ Run Code
+
+```js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
var art = new Artplayer({
@@ -1475,23 +1807,30 @@ var art = new Artplayer({
url: '/assets/sample/404.mp4',
});
-CONTROL_HIDE_TIME
-The delay time in milliseconds for auto-hiding the bottom control bar. The default is 3000.
+```
-Example of setting a custom control hide delay:
+## CONTROL_HIDE_TIME
+The auto-hide delay time for the bottom control bar, in milliseconds. Default is `3000`.
+
+▶ Run Code
+
+```js
Artplayer.CONTROL_HIDE_TIME = 5000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-DBCLICK_TIME
-The delay time in milliseconds for double-click events. The default is 300.
+## DBCLICK_TIME
-Example of setting a custom double-click delay and listening for the event:
+The delay time for the double-click event, in milliseconds. Default is `300`.
+▶ Run Code
+
+```js
Artplayer.DBCLICK_TIME = 500;
var art = new Artplayer({
@@ -1502,48 +1841,60 @@ var art = new Artplayer({
art.on('dblclick', () => {
console.log('dblclick');
});
+```
-DBCLICK_FULLSCREEN
-On desktop, determines whether double-click toggles fullscreen mode. The default is true.
+## DBCLICK_FULLSCREEN
-Example of disabling double-click fullscreen:
+On desktop, whether double-click toggles fullscreen. Default is `true`.
+▶ Run Code
+
+```js
Artplayer.DBCLICK_FULLSCREEN = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-MOBILE_DBCLICK_PLAY
-On mobile devices, determines whether double-click toggles play/pause. The default is true.
+## MOBILE_DBCLICK_PLAY
-Example of disabling double-click play/pause on mobile:
+On mobile, whether double-click toggles play/pause. Default is `true`.
+▶ Run Code
+
+```js
Artplayer.MOBILE_DBCLICK_PLAY = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-MOBILE_CLICK_PLAY
-On mobile devices, determines whether single-click toggles play/pause. The default is false.
+## MOBILE_CLICK_PLAY
-Example of enabling single-click play/pause on mobile:
+On mobile, whether single-click toggles play/pause. Default is `false`.
+▶ Run Code
+
+```js
Artplayer.MOBILE_CLICK_PLAY = true;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-AUTO_ORIENTATION_TIME
-On mobile devices, the delay time in milliseconds for automatic screen rotation. The default is 200.
+## AUTO_ORIENTATION_TIME
-Example of setting a custom orientation delay and enabling auto-orientation:
+On mobile, the delay time for auto-rotation, in milliseconds. Default is `200`.
+▶ Run Code
+
+```js
Artplayer.AUTO_ORIENTATION_TIME = 500;
var art = new Artplayer({
@@ -1551,12 +1902,15 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
autoOrientation: true,
});
+```
-INFO_LOOP_TIME
-The refresh interval in milliseconds for the information panel. The default is 1000.
+## INFO_LOOP_TIME
-Example of setting a custom refresh interval and showing the info panel:
+The refresh interval for the info panel, in milliseconds. Default is `1000`.
+▶ Run Code
+
+```js
Artplayer.INFO_LOOP_TIME = 2000;
var art = new Artplayer({
@@ -1565,12 +1919,15 @@ var art = new Artplayer({
});
art.info.show = true;
+```
-FAST_FORWARD_VALUE
-On mobile devices, the speed multiplier for fast-forward during long-press. The default is 3.
+## FAST_FORWARD_VALUE
-Example of setting a custom fast-forward speed and enabling the feature:
+On mobile, the speed multiplier for long-press fast-forward. Default is `3`.
+▶ Run Code
+
+```js
Artplayer.FAST_FORWARD_VALUE = 5;
var art = new Artplayer({
@@ -1578,12 +1935,15 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
fastForward: true,
});
+```
-FAST_FORWARD_TIME
-On mobile devices, the delay time in milliseconds for activating fast-forward during long-press. The default is 1000.
+## FAST_FORWARD_TIME
-Example of setting a custom activation delay and enabling fast-forward:
+On mobile, the delay time for long-press fast-forward, in milliseconds. Default is `1000`.
+▶ Run Code
+
+```js
Artplayer.FAST_FORWARD_TIME = 2000;
var art = new Artplayer({
@@ -1591,48 +1951,60 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
fastForward: true,
});
+```
-TOUCH_MOVE_RATIO
-On mobile devices, the speed multiplier for seeking when swiping left/right. The default is 0.5.
+## TOUCH_MOVE_RATIO
-Example of setting a custom seek sensitivity:
+On mobile, the speed multiplier for left/right swipe to seek. Default is `0.5`.
+▶ Run Code
+
+```js
Artplayer.TOUCH_MOVE_RATIO = 1;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-VOLUME_STEP
-The volume adjustment step for keyboard shortcuts. The default is 0.1.
+## VOLUME_STEP
-Example of setting a custom volume step:
+The step size for volume adjustment via keyboard shortcuts. Default is `0.1`.
+▶ Run Code
+
+```js
Artplayer.VOLUME_STEP = 0.2;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-SEEK_STEP
-The seeking step in seconds for keyboard shortcuts. The default is 5.
+## SEEK_STEP
-Example of setting a custom seek step:
+The step size for seeking via keyboard shortcuts, in seconds. Default is `5`.
+▶ Run Code
+
+```js
Artplayer.SEEK_STEP = 10;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-PLAYBACK_RATE
-The built-in list of playback rates. The default is [0.5, 0.75, 1, 1.25, 1.5, 2].
+## PLAYBACK_RATE
-Example of setting a custom playback rate list and enabling the feature in settings:
+The built-in list of playback rates. Default is `[0.5, 0.75, 1, 1.25, 1.5, 2]`.
+▶ Run Code
+
+```js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
var art = new Artplayer({
@@ -1644,12 +2016,15 @@ var art = new Artplayer({
art.contextmenu.show = true;
art.setting.show = true;
+```
-ASPECT_RATIO
-The built-in list of video aspect ratios. The default is ['default', '4:3', '16:9'].
+## ASPECT_RATIO
-Example of setting a custom aspect ratio list and enabling the feature in settings:
+The built-in list of video aspect ratios. Default is `['default', '4:3', '16:9']`.
+▶ Run Code
+
+```js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
var art = new Artplayer({
@@ -1661,12 +2036,15 @@ var art = new Artplayer({
art.contextmenu.show = true;
art.setting.show = true;
+```
-FLIP
-The built-in list of video flip modes. The default is ['normal', 'horizontal', 'vertical'].
+## FLIP
-Example of setting a custom flip mode list and enabling the feature in settings:
+The built-in list of video flip options. Default is `['normal', 'horizontal', 'vertical']`.
+▶ Run Code
+
+```js
Artplayer.FLIP = ['normal', 'horizontal'];
var art = new Artplayer({
@@ -1679,26 +2057,15 @@ var art = new Artplayer({
art.contextmenu.show = true;
art.setting.show = true;
-FULLSCREEN_WEB_IN_BODY
-Determines whether to mount the player under the body element during web fullscreen mode. The default is true.
+```
-Example of setting this property:
+## FULLSCREEN_WEB_IN_BODY
-Artplayer.FULLSCREEN_WEB_IN_BODY = false;
+Whether to mount the player under the `body` element during web fullscreen mode. Default is `true`.
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
-});
-
-ArtPlayer Global Configuration
-
-FULLSCREEN_WEB_IN_BODY
-
-This setting determines whether fullscreen mode is applied to the entire web page body. By default, it is set to false.
-
-Example:
+▶ Run Code
+```js
Artplayer.FULLSCREEN_WEB_IN_BODY = false;
var art = new Artplayer({
@@ -1706,26 +2073,30 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
fullscreenWeb: true,
});
+```
-LOG_VERSION
+## LOG_VERSION
-Sets whether to print the player version in the console. The default value is true.
+Sets whether to print the player version. Default is `true`.
-Example:
+▶ Run Code
+```js
Artplayer.LOG_VERSION = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
+```
-USE_RAF
+## USE_RAF
-Sets whether to use requestAnimationFrame for smoother animations, such as the progress bar. The default value is false.
+Sets whether to use `requestAnimationFrame`. Default is `false`. Currently, it is primarily used for smooth progress bar effects.
-Example:
+▶ Run Code
+```js
Artplayer.USE_RAF = true;
var art = new Artplayer({
@@ -1733,13 +2104,17 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
miniProgressBar: true,
});
+```
-REMOVE_SRC_WHEN_DESTROY
+## REMOVE_SRC_WHEN_DESTROY
-Determines whether to remove the video's src attribute and call load() to release media resources when the player is destroyed. The default is true. Set this to false if you want to preserve the video element's state and only remove the UI.
+Whether to remove the video's `src` attribute and call `load()` to actively release media resources when destroying the player. Default is `true`.
-Example:
+Enabling this can reduce video resource usage in single-page applications or scenarios where players are frequently created/destroyed. If you wish to preserve the state of the video element and only remove the UI, you can set this to `false`.
+▶ Run Code
+
+```js
Artplayer.REMOVE_SRC_WHEN_DESTROY = false;
var art = new Artplayer({
@@ -1747,15 +2122,21 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
});
-// Only destroys the UI, does not actively clear src
+// Only destroy the UI, do not actively clear the src
art.destroy();
+```
-Writing Plugins
+===== packages/artplayer-vitepress/docs/en/advanced/plugin.md =====
-Once you are familiar with the player's properties, methods, and events, writing plugins is straightforward. You can load plugins during player instantiation or add them afterward.
+# Writing Plugins
-Loading a plugin during instantiation:
+Once you are familiar with the player's `properties`, `methods`, and `events`, writing a plugin becomes a very straightforward task.
+You can load a plugin function during instantiation.
+
+▶ Run Code
+
+```js{15}
function myPlugin(art) {
console.info(art);
return {
@@ -1776,9 +2157,13 @@ var art = new Artplayer({
art.on('ready', () => {
console.info(art.plugins.myPlugin);
});
+```
-Loading a plugin after instantiation:
+You can also load a plugin function after instantiation.
+▶ Run Code
+
+```js{17}
function myPlugin(art) {
console.info(art);
return {
@@ -1800,11 +2185,13 @@ art.plugins.add(myPlugin);
art.on('ready', () => {
console.info(art.plugins.myPlugin);
});
+```
-Example Plugin: Displaying an Image Ad on Pause
+For example, let's say I want to write a plugin that displays an image ad when the video is paused.
-This plugin shows an image ad when the video is paused and provides controls to hide or show it.
+▶ Run Code
+```js
function adsPlugin(option) {
return (art) => {
art.layers.add({
@@ -1865,18 +2252,23 @@ var art = new Artplayer({
})
],
});
+```
-Instance Properties
+===== packages/artplayer-vitepress/docs/en/advanced/property.md =====
-These are first-level properties available on the player instance.
+# Instance Properties
-play
+Here, `Instance Properties` refer to the `first-level properties` mounted on the `instance`, which are commonly used.
-Type: Function
-Plays the video.
+## `play`
-Example:
+- Type: `Function`
+Play the video.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1886,14 +2278,17 @@ var art = new Artplayer({
art.on('ready', () => {
art.play();
});
+```
-pause
+## `pause`
-Type: Function
-Pauses the video.
+- Type: `Function`
-Example:
+Pause the video.
+▶ Run Code
+
+```js{11}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1907,14 +2302,17 @@ art.on('ready', () => {
art.pause();
}, 3000);
});
+```
-toggle
+## `toggle`
-Type: Function
-Toggles between play and pause.
+- Type: `Function`
-Example:
+Toggle video play and pause.
+▶ Run Code
+
+```js{11}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1928,15 +2326,18 @@ art.on('ready', () => {
art.toggle();
}, 3000);
});
+```
-destroy
+## `destroy`
-Type: Function
-Parameter: Boolean
-Destroys the player. Accepts a boolean parameter indicating whether to remove the player's HTML from the DOM after destruction. Defaults to true.
+- Type: `Function`
+- Parameter: `Boolean`
-Example:
+Destroy the player. Accepts a parameter indicating whether to also remove the player's `html` after destruction. Defaults to `true`.
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1945,14 +2346,19 @@ var art = new Artplayer({
art.on('ready', () => {
art.destroy();
});
+```
-reset
+## `reset`
-Type: Function
-Resets the player's video element by removing the current src and calling load(). Useful for manually releasing media resources or reinitializing the video tag in single-page applications. Note: The global configuration Artplayer.REMOVE_SRC_WHEN_DESTROY also triggers similar logic when destroy() is called.
+- Type: `Function`
-Example:
+Reset the player's video element: removes the current `src` and calls `load()` once. Commonly used to manually release media resources or reinitialize the video tag in single-page applications.
+> Note: The global configuration `Artplayer.REMOVE_SRC_WHEN_DESTROY` will also automatically execute similar logic when `destroy()` is called.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1962,15 +2368,18 @@ art.on('ready', () => {
// Only reset the video, do not remove the interface
art.reset();
});
+```
-seek
+## `seek`
-Type: Setter
-Parameter: Number
-Seeks to a specific time in the video, in seconds.
+- Type: `Setter`
+- Parameter: `Number`
-Example:
+Seek to a specific time in the video, in seconds.
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1979,15 +2388,18 @@ var art = new Artplayer({
art.on('ready', () => {
art.seek = 5;
});
+```
-forward
+## `forward`
-Type: Setter
-Parameter: Number
-Fast-forwards the video by a specified number of seconds.
+- Type: `Setter`
+- Parameter: `Number`
-Example:
+Fast-forward the video time, in seconds.
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -1996,15 +2408,18 @@ var art = new Artplayer({
art.on('ready', () => {
art.forward = 5;
});
+```
-backward
+## `backward`
-Type: Setter
-Parameter: Number
-Rewinds the video by a specified number of seconds.
+- Type: `Setter`
+- Parameter: `Number`
-Example:
+Rewind the video time, in seconds.
+▶ Run Code
+
+```js{10}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2017,15 +2432,18 @@ art.on('ready', () => {
art.backward = 2;
}, 3000);
});
+```
-volume
+## `volume`
-Type: Setter/Getter
-Parameter: Number
-Sets or gets the video volume. The value must be between 0 and 1.
+- Type: `Setter/Getter`
+- Parameter: `Number`
-Example:
+Set and get the video volume, range: `[0, 1]`.
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2036,37 +2454,38 @@ art.on('ready', () => {
art.volume = 0.5;
console.info(art.volume);
});
+```
-url
+## `url`
-Type: Setter/Getter
-Parameter: String
-Sets or gets the video URL.
+- Type: `Setter/Getter`
+- Parameter: `String`
-Example:
+Set and get the video URL.
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
-ArtPlayer Documentation
-
-The following sections describe various properties and methods available on an ArtPlayer instance.
-
-Setting the video URL directly.
-
-Example:
art.on('ready', () => {
art.url = '/assets/sample/video.mp4?t=0';
});
+```
-Property: switch
-Type: Setter
-Parameter: String
-Description: Sets the video URL. Similar to `art.url` when setting, but performs some optimization operations.
+## `switch`
-Example:
+- Type: `Setter`
+- Parameter: `String`
+
+Set the video URL. Similar to `art.url` when setting, but performs some optimization operations.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2078,13 +2497,18 @@ art.on('ready', () => {
art.switch = '/assets/sample/video.mp4?t=0';
}, 3000);
});
+```
-Method: switchUrl
-Type: Function
-Parameter: String
-Description: Sets the video URL. Similar to `art.url` when setting, but performs some optimization operations.
+## `switchUrl`
-Example:
+- Type: `Function`
+- Parameter: `String`
+
+Set the video URL. Similar to `art.url` when setting, but performs some optimization operations.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2097,14 +2521,24 @@ art.on('ready', () => {
}, 3000);
});
-Note: `art.switch` and `art.switchUrl` have the same functionality, but the `art.switchUrl` method returns a `Promise`. It `resolve`s when the new URL is playable and `reject`s when the new URL fails to load.
+```
-Method: switchQuality
-Type: Function
-Parameter: String
-Description: Sets the video quality URL. Similar to `art.switchUrl`, but retains the previous playback progress.
+:::warning Note
-Example:
+`art.switch` and `art.switchUrl` have the same functionality, but the `art.switchUrl` method returns a `Promise`. It `resolve`s when the new URL is playable and `reject`s when the new URL fails to load.
+
+:::
+
+## `switchQuality`
+
+- Type: `Function`
+- Parameter: `String`
+
+Sets the video quality URL. Similar to `art.switchUrl`, but retains the previous playback progress.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2116,13 +2550,18 @@ art.on('ready', () => {
art.switchQuality('/assets/sample/video.mp4?t=0');
}, 3000);
});
+```
-Property: muted
-Type: Setter/Getter
-Parameter: Boolean
-Description: Sets and gets whether the video is muted.
+## `muted`
-Example:
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
+
+Sets or gets whether the video is muted.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2133,13 +2572,18 @@ art.on('ready', () => {
art.muted = true;
console.info(art.muted);
});
+```
-Property: currentTime
-Type: Setter/Getter
-Parameter: Number
-Description: Sets and gets the current playback time of the video. Setting the time is similar to `seek`, but it does not trigger additional events.
+## `currentTime`
-Example:
+- Type: `Setter/Getter`
+- Parameter: `Number`
+
+Sets or gets the current playback time of the video. Setting the time is similar to `seek`, but it does not trigger additional events.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2150,12 +2594,17 @@ art.on('ready', () => {
art.currentTime = 5;
console.info(art.currentTime);
});
+```
-Property: duration
-Type: Getter
-Description: Gets the duration of the video.
+## `duration`
-Example:
+- Type: `Getter`
+
+Gets the duration of the video.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2164,14 +2613,23 @@ var art = new Artplayer({
art.on('ready', () => {
console.info(art.duration);
});
+```
-Note: Some videos may not have a duration, such as live streams or videos that have not been fully decoded. In these cases, the obtained duration will be `0`.
+:::warning Note
-Method: screenshot
-Type: Function
-Description: Downloads a screenshot of the current video frame. An optional parameter specifies the screenshot filename.
+Some videos may not have a duration, such as live streams or videos that have not been fully decoded. In such cases, the obtained duration will be `0`.
-Example:
+:::
+
+## `screenshot`
+
+- Type: `Function`
+
+Downloads a screenshot of the current video frame. An optional parameter specifies the screenshot filename.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2180,12 +2638,17 @@ var art = new Artplayer({
art.on('ready', () => {
art.screenshot('your-name');
});
+```
-Method: getDataURL
-Type: Function
-Description: Gets the `base64` URL of a screenshot of the current video frame. Returns a `Promise`.
+## `getDataURL`
-Example:
+- Type: `Function`
+
+Gets the `base64` URL of a screenshot of the current video frame. Returns a `Promise`.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2193,14 +2656,19 @@ var art = new Artplayer({
art.on('ready', async () => {
const url = await art.getDataURL();
- console.info(url)
+ console.info(url)
});
+```
-Method: getBlobUrl
-Type: Function
-Description: Gets the `blob` URL of a screenshot of the current video frame. Returns a `Promise`.
+## `getBlobUrl`
-Example:
+- Type: `Function`
+
+Gets the `blob` URL of a screenshot of the current video frame. Returns a `Promise`.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2210,13 +2678,18 @@ art.on('ready', async () => {
const url = await art.getBlobUrl();
console.info(url);
});
+```
-Property: fullscreen
-Type: Setter/Getter
-Parameter: Boolean
-Description: Sets and gets the player's window fullscreen state.
+## `fullscreen`
-Example:
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
+
+Sets or gets the player's window fullscreen state.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2230,15 +2703,24 @@ var art = new Artplayer({
},
],
});
+```
-Note: Due to browser security mechanisms, the page must have prior user interaction (e.g., the user has clicked on the page) before triggering window fullscreen.
+:::warning Note
-Property: fullscreenWeb
-Type: Setter/Getter
-Parameter: Boolean
-Description: Sets and gets the player's web page fullscreen state.
+Due to browser security mechanisms, a user interaction (e.g., a click on the page) must occur before triggering window fullscreen.
-Example:
+:::
+
+## `fullscreenWeb`
+
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
+
+Sets or gets the player's web page fullscreen state.
+
+▶ Run Code
+
+```js{8,11}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2252,13 +2734,18 @@ art.on('ready', () => {
art.fullscreenWeb = false;
}, 3000);
});
+```
-Property: pip
-Type: Setter/Getter
-Parameter: Boolean
-Description: Sets and gets the player's Picture-in-Picture mode.
+## `pip`
-Example:
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
+
+Sets or gets the player's Picture-in-Picture (PIP) mode.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2272,15 +2759,24 @@ var art = new Artplayer({
},
],
});
+```
-Note: Due to browser security mechanisms, the page must have prior user interaction (e.g., the user has clicked on the page) before triggering Picture-in-Picture.
+:::warning Note
-Property: poster
-Type: Setter/Getter
-Parameter: String
-Description: Sets and gets the video poster. The poster effect is only visible before video playback starts.
+Due to browser security mechanisms, a user interaction (e.g., a click on the page) must occur before triggering Picture-in-Picture.
-Example:
+:::
+
+## `poster`
+
+- Type: `Setter/Getter`
+- Parameter: `String`
+
+Sets and gets the video poster. The poster effect is only visible before the video starts playing.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2292,13 +2788,18 @@ art.on('ready', () => {
art.poster = '/assets/sample/poster.jpg?t=0';
console.info(art.poster);
});
+```
-Property: mini
-Type: Setter/Getter
-Parameter: Boolean
-Description: Sets and gets the player's mini mode.
+## `mini`
-Example:
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
+
+Sets and gets the player's mini mode.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2307,13 +2808,18 @@ var art = new Artplayer({
art.on('ready', () => {
art.mini = true;
});
+```
-Property: playing
-Type: Getter
-Parameter: Boolean
-Description: Gets whether the video is currently playing.
+## `playing`
-Example:
+- Type: `Getter`
+- Parameter: `Boolean`
+
+Gets whether the video is currently playing.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2323,28 +2829,38 @@ var art = new Artplayer({
art.on('ready', () => {
console.info(art.playing);
});
+```
-Property: state
-Type: Setter/Getter
-Parameter: String
-Description: Gets or sets the player's current state. Supported values: `standard` (normal), `mini` (mini window), `pip` (picture-in-picture), `fullscreen` (fullscreen window), `fullscreenWeb` (webpage fullscreen).
+## `state`
-Example:
+- Type: `Setter/Getter`
+- Parameter: `String`
+
+Gets or sets the player's current state. Supported values: `standard` (normal), `mini` (mini window), `pip` (picture-in-picture), `fullscreen` (window fullscreen), `fullscreenWeb` (webpage fullscreen).
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
- console.info(art.state); // Default: standard
+ console.info(art.state); // Default is 'standard'
art.state = 'mini';
});
+```
-Method: autoSize
-Type: Function
-Description: Sets whether the video adapts its size automatically.
+## `autoSize`
-Example:
+- Type: `Function`
+
+Sets whether the video adapts its size automatically.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2353,21 +2869,17 @@ var art = new Artplayer({
art.on('ready', () => {
art.autoSize();
});
+```
-Property: rect
-Type: Getter
-Description: Gets the player's dimensions and coordinate information.
+## `rect`
-Example:
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
-});
+- Type: `Getter`
-Here is the documentation reorganized into a clean, plain text format.
+Gets the player's dimensions and coordinate information.
-First, an example of how to access the player's rect property, which contains its dimensions and coordinates. The information is obtained via getBoundingClientRect.
+▶ Run Code
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2376,9 +2888,26 @@ var art = new Artplayer({
art.on('ready', () => {
console.info(JSON.stringify(art.rect));
});
+```
-The following properties are getters that provide shortcut access to the rect object. bottom, top, left, right, x, and y correspond to the fields of the same name in a DOMRect. width and height represent the player's current visible width and height.
+:::warning Note
+The dimension and coordinate information is obtained via `getBoundingClientRect`.
+
+:::
+
+## `bottom` / `top` / `left` / `right` / `x` / `y` / `width` / `height`
+
+- Type: `Getter`
+
+These properties provide quick access to `rect`:
+
+- `bottom`, `top`, `left`, `right`, `x`, `y`: Correspond to the fields of the same name in `DOMRect`.
+- `width`, `height`: The player's current visible width and height.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2387,9 +2916,18 @@ var art = new Artplayer({
art.on('ready', () => {
console.info(art.width, art.height, art.left, art.top);
});
+```
-The flip property is both a setter and a getter. It controls the player's flip state and accepts a string parameter. Supported values are normal, horizontal, and vertical.
+## `flip`
+- Type: `Setter/Getter`
+- Parameter: `String`
+
+Sets and gets the player's flip state. Supported values: `normal`, `horizontal`, `vertical`.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2400,9 +2938,18 @@ art.on('ready', () => {
art.flip = 'horizontal';
console.info(art.flip);
});
+```
-The playbackRate property is a setter and getter for the player's playback speed. It accepts a number parameter.
+## `playbackRate`
+- Type: `Setter/Getter`
+- Parameter: `Number`
+
+Sets and gets the player's playback speed.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2413,9 +2960,18 @@ art.on('ready', () => {
art.playbackRate = 2;
console.info(art.playbackRate);
});
+```
-The aspectRatio property is a setter and getter for the player's aspect ratio. It accepts a string parameter.
+## `aspectRatio`
+- Type: `Setter/Getter`
+- Parameter: `String`
+
+Sets and gets the player's aspect ratio.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2426,9 +2982,17 @@ art.on('ready', () => {
art.aspectRatio = '16:9';
console.info(art.aspectRatio);
});
+```
-The autoHeight function is useful when your container has a defined width but an unknown height. It automatically calculates and sets the video height. You need to determine the appropriate timing to call this function.
+## `autoHeight`
+- Type: `Function`
+
+When the container only has a defined width, this property can automatically calculate and set the video's height.
+
+▶ Run Code
+
+```js{7,11}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2441,9 +3005,24 @@ art.on('ready', () => {
art.on('resize', () => {
art.autoHeight();
});
+```
-The attr function dynamically gets and sets attributes of the video element. It accepts a string parameter for the attribute name.
+:::warning Note
+This property is useful when your container has only a width but the exact height is unknown. It can automatically calculate the video height, but you need to determine the timing for setting this property.
+
+:::
+
+## `attr`
+
+- Type: `Function`
+- Parameter: `String`
+
+Dynamically get and set attributes of the video element.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2454,9 +3033,18 @@ art.on('ready', () => {
art.attr('playsInline', true);
console.info(art.attr('playsInline'));
});
+```
-The type property is a setter and getter for the video type. It accepts a string parameter.
+## `type`
+- Type: `Setter/Getter`
+- Parameter: `String`
+
+Dynamically get and set the video type.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2467,9 +3055,18 @@ art.on('ready', () => {
art.type = 'm3u8';
console.info(art.type);
});
+```
-The theme property is a setter and getter for the player's theme color. It accepts a string parameter.
+## `theme`
+- Type: `Setter/Getter`
+- Parameter: `String`
+
+Dynamically get and set the player's theme color.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2480,9 +3077,17 @@ art.on('ready', () => {
art.theme = '#000';
console.info(art.theme);
});
+```
-The airplay function initiates AirPlay.
+## `airplay`
+- Type: `Function`
+
+Initiate AirPlay.
+
+▶ Run Code
+
+```js{9}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2496,9 +3101,17 @@ var art = new Artplayer({
},
],
});
+```
-The loaded property is a getter that returns the proportion of the video that has been buffered, ranging from 0 to 1. It is often used with the video:timeupdate event.
+## `loaded`
+- Type: `Getter`
+
+The proportion of video buffered, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2507,9 +3120,17 @@ var art = new Artplayer({
art.on('video:timeupdate', () => {
console.info(art.loaded);
});
+```
-The loadedTime property is a getter that returns the amount of media that has been buffered, in seconds. It is typically used alongside loaded to display detailed buffering progress.
+## `loadedTime`
+- Type: `Getter`
+
+The buffered media duration in seconds. Typically used alongside `loaded` to display detailed buffering progress.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2518,9 +3139,17 @@ var art = new Artplayer({
art.on('video:timeupdate', () => {
console.info(art.loadedTime);
});
+```
-The played property is a getter that returns the proportion of the video that has been played, ranging from 0 to 1. It is often used with the video:timeupdate event.
+## `played`
+- Type: `Getter`
+
+The proportion of video played, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
+
+▶ Run Code
+
+```js{7}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2529,9 +3158,17 @@ var art = new Artplayer({
art.on('video:timeupdate', () => {
console.info(art.played);
});
+```
-The proxy function is a proxy for DOM events, essentially handling addEventListener and removeEventListener. When using proxy to handle events, the event listener is automatically removed when the player is destroyed. This is strongly recommended to avoid memory leaks if you need DOM events to exist only for the duration of the player's lifecycle.
+## `proxy`
+- Type: `Function`
+
+A proxy function for `DOM` events, essentially proxying `addEventListener` and `removeEventListener`. When using `proxy` to handle events, the event is automatically cleaned up when the player is destroyed.
+
+▶ Run Code
+
+```js{8-10}
var container = document.querySelector('.artplayer-app');
var art = new Artplayer({
@@ -2542,27 +3179,57 @@ var art = new Artplayer({
art.proxy(container, 'click', event => {
console.info(event);
});
+```
-The query function is a DOM query function similar to document.querySelector, but the search is scoped to the current player instance, preventing errors from duplicate class names.
+:::warning Note
+If you need certain `DOM` events to exist only for the player's lifecycle, it is strongly recommended to use this function to avoid memory leaks.
+
+:::
+
+## `query`
+
+- Type: `Function`
+
+A `DOM` query function, similar to `document.querySelector`, but the search is scoped to the current player, preventing errors with duplicate class names.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.query('.art-video'));
+```
-The video property quickly returns the player's video element.
+## `video`
+- Type: `Element`
+
+Quickly returns the player's `video` element.
+
+▶ Run Code
+
+```js{6}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.video);
+```
-The cssVar function dynamically gets or sets CSS variables.
+## `cssVar`
+- Type: `Function`
+
+Dynamically get or set `CSS` variables.
+
+▶ Run Code
+
+```js{8}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2573,9 +3240,18 @@ art.on('ready', () => {
art.cssVar('--art-theme', 'green');
console.log(art.cssVar('--art-theme'));
});
+```
-The quality property is a setter that dynamically sets the list of available quality levels. It accepts an array parameter.
+## `quality`
+- Type: `Setter`
+- Parameter: `Array`
+
+Dynamically set the quality list.
+
+▶ Run Code
+
+```js{19-29}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2608,19 +3284,21 @@ art.on('ready', () => {
}, 3000);
})
-The thumbnails property is a setter and getter for dynamically setting thumbnails. It accepts an object parameter.
+```
-Example code for thumbnails would be placed here.
+## `thumbnails`
-ArtPlayer Documentation
+- Type: `Setter/Getter`
+- Parameter: `Object`
-Thumbnails Example
+Dynamically set thumbnails.
-This example shows how to set thumbnails for a video after the player is ready.
+▶ Run Code
+```js
var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
@@ -2630,19 +3308,21 @@ art.on('ready', () => {
column: 10,
};
});
+```
-subtitleOffset
+## `subtitleOffset`
-Type: Setter/Getter
-Parameter: Number
+- Type: `Setter/Getter`
+- Parameter: `Number`
-This property allows you to dynamically set the subtitle offset in seconds.
+Dynamically set subtitle offset.
-Example of setting a subtitle offset:
+▶ Run Code
+```js
var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
},
@@ -2651,27 +3331,30 @@ var art = new Artplayer({
art.on('ready', () => {
art.subtitleOffset = 1;
});
+```
-Context Menu
+===== packages/artplayer-vitepress/docs/en/component/contextmenu.md =====
-Configuration
+# Context Menu
-The contextmenu component can be configured with the following properties:
+## Configuration
-Property Type Description
-disable Boolean Whether to disable the component
-name String Unique component name for CSS class
-index Number Component index for display priority
-html String, Element Component DOM element
-style Object Component style object
-click Function Component click event
-mounted Function Triggered after component mount
-tooltip String Component tooltip text
+| Property | Type | Description |
+| --------- | ------------------- | ------------------------------------ |
+| `disable` | `Boolean` | Whether to disable the component |
+| `name` | `String` | Unique component name for CSS class |
+| `index` | `Number` | Component index for display priority |
+| `html` | `String`, `Element` | DOM element of the component |
+| `style` | `Object` | Component style object |
+| `click` | `Function` | Component click event |
+| `mounted` | `Function` | Triggered after component mount |
+| `tooltip` | `String` | Tooltip text for the component |
-Creation
+## Creation
-You can create context menu items during player initialization.
+▶ Run Code
+```js{4-13}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2691,11 +3374,13 @@ art.contextmenu.show = true;
// Get the Element of contextmenu by name
console.info(art.contextmenu['your-menu']);
+```
-Addition
+## Addition
-You can add a context menu item after the player has been created.
+▶ Run Code
+```js{6-13}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2714,11 +3399,13 @@ art.contextmenu.show = true;
// Get the Element of contextmenu by name
console.info(art.contextmenu['your-menu']);
+```
-Removal
+## Deletion
-You can remove a context menu item by its name.
+▶ Run Code
+```js{21}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2742,11 +3429,13 @@ art.on('ready', () => {
art.contextmenu.remove('your-menu')
}, 3000);
});
+```
-Update
+## Update
-You can update the properties of an existing context menu item.
+▶ Run Code
+```js{21-24}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2773,30 +3462,33 @@ art.on('ready', () => {
})
}, 3000);
});
+```
-Controls
+===== packages/artplayer-vitepress/docs/en/component/controls.md =====
-Configuration
+# Controls
-Controls can be configured with the following properties:
+## Configuration
-Property Type Description
-disable Boolean Whether to disable the control
-name String Unique control name for CSS class identification
-index Number Control index for display priority
-html String, Element Control's DOM element
-style Object Control style object
-click Function Control click event handler
-mounted Function Triggered after control is mounted
-tooltip String Control tooltip text
-position String 'left' or 'right' - controls display position
-selector Array Array of selector list objects
-onSelect Function Function triggered when selector item is clicked
+| Property | Type | Description |
+| ---------- | ------------------- | ------------------------------------------------ |
+| `disable` | `Boolean` | Whether to disable the control |
+| `name` | `String` | Unique name of the control, used for class marking |
+| `index` | `Number` | Control index, determines display priority |
+| `html` | `String`, `Element` | DOM element of the control |
+| `style` | `Object` | Style object for the control |
+| `click` | `Function` | Click event handler for the control |
+| `mounted` | `Function` | Triggered after the control is mounted |
+| `tooltip` | `String` | Tooltip text for the control |
+| `position` | `String` | `left` or `right` - controls which side the control appears on |
+| `selector` | `Array` | Array of objects for selection list |
+| `onSelect` | `Function` | Function triggered when a selection list item is clicked |
-Creation
+## Creation
-You can define controls during the player's initialization.
+▶ Run Code
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2841,11 +3533,13 @@ var art = new Artplayer({
// Get the Element of control by name
console.info(art.controls['your-button']);
console.info(art.controls['subtitle']);
+```
-Adding
+## Adding
-You can add a new control to the player after it has been created.
+▶ Run Code
+```js{6-21}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2870,11 +3564,13 @@ art.controls.add({
// Get the Element of control by name
console.info(art.controls['button1']);
+```
-Removal
+## Removal
-You can remove a control by its name.
+▶ Run Code
+```js{21}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2898,11 +3594,13 @@ art.on('ready', () => {
art.controls.remove('button1');
}, 3000);
});
+```
-Updating
+## Updating
-You can update the properties of an existing control.
+▶ Run Code
+```js{26-40}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -2925,10 +3623,6 @@ var art = new Artplayer({
]
});
-ArtPlayer Documentation: Controls Update Example
-
-This example shows how to update a control after the player is ready. After a 3-second delay, it updates a control named 'button1', changing its position, HTML content, and adding a selector list.
-
art.on('ready', () => {
setTimeout(() => {
// Update the control by name
@@ -2949,27 +3643,30 @@ art.on('ready', () => {
});
}, 3000);
});
+```
-ArtPlayer Documentation: Layer Component
+===== packages/artplayer-vitepress/docs/en/component/layers.md =====
-Layer Configuration
+# Layers
-The following properties can be used when creating or updating a layer component.
+## Configuration
-Property Type Description
-disable Boolean Whether to disable the component
-name String Unique component name for CSS class
-index Number Component index for display priority
-html String, Element Component DOM element
-style Object Component style object
-click Function Component click event
-mounted Function Triggered after component mount
-tooltip String Component tooltip text
+| Property | Type | Description |
+| --------- | ------------------- | ------------------------------------ |
+| `disable` | `Boolean` | Whether to disable the component |
+| `name` | `String` | Unique component name for CSS class |
+| `index` | `Number` | Component index for display priority |
+| `html` | `String`, `Element` | Component DOM element |
+| `style` | `Object` | Component style object |
+| `click` | `Function` | Component click event |
+| `mounted` | `Function` | Triggered after component mount |
+| `tooltip` | `String` | Component tooltip text |
-Layer Creation
+## Creation
-This example shows how to add a layer during the initial Artplayer configuration. It creates a layer with an image, custom styling, and event handlers.
+▶ Run Code
+```js{5-22}
var img = '/assets/sample/layer.png';
var art = new Artplayer({
container: '.artplayer-app',
@@ -2996,11 +3693,13 @@ var art = new Artplayer({
// Get the Element of layer by name
console.info(art.layers['potser']);
+```
-Layer Addition
+## Addition
-This example shows how to add a layer after the Artplayer instance has been created, using the layers.add method.
+▶ Run Code
+```js{7-22}
var img = '/assets/sample/layer.png';
var art = new Artplayer({
container: '.artplayer-app',
@@ -3026,11 +3725,13 @@ art.layers.add({
// Get the Element of layer by name
console.info(art.layers['potser']);
+```
-Layer Removal
+## Removal
-This example shows how to remove a layer by its name after a delay, using the layers.remove method.
+▶ Run Code
+```js{21}
var img = '/assets/sample/layer.png';
var art = new Artplayer({
container: '.artplayer-app',
@@ -3054,11 +3755,13 @@ art.on('ready', () => {
art.layers.remove('potser');
}, 3000);
});
+```
-Layer Update
+## Update
-This example shows how to update an existing layer's properties, such as its HTML content and style, using the layers.update method.
+▶ Run Code
+```js{21-29}
var img = '/assets/sample/layer.png';
var art = new Artplayer({
container: '.artplayer-app',
@@ -3090,13 +3793,19 @@ art.on('ready', () => {
});
}, 3000);
});
+```
-ArtPlayer Documentation: Settings Panel
+===== packages/artplayer-vitepress/docs/en/component/setting.md =====
-Built-in Settings
+# Settings Panel
-To use the settings panel, set the 'setting' option to true. You can then enable specific built-in settings like flip, playbackRate, aspectRatio, and subtitleOffset.
+## Built-in
+First, you need to open the settings panel. It comes with four built-in items: `flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`.
+
+▶ Run Code
+
+```js{4}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3106,20 +3815,21 @@ var art = new Artplayer({
aspectRatio: true,
subtitleOffset: true,
});
+```
-Creating Button Settings
+## Create - Button
-A button in the settings panel can be configured with the following properties.
+| Property | Type | Description |
+| ---------- | ------------------- | -------------------- |
+| `html` | `String`, `Element` | The DOM element |
+| `icon` | `String`, `Element` | The icon element |
+| `onClick` | `Function` | The click event |
+| `width` | `Number` | The list width |
+| `tooltip` | `String` | The tooltip text |
-Property Type Description
-html String, Element Element DOM
-icon String, Element Element icon
-onClick Function Element click event
-width Number List width
-tooltip String Tooltip text
-
-This example creates a simple button setting with a custom icon and a click handler.
+▶ Run Code
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3131,26 +3841,27 @@ var art = new Artplayer({
tooltip: 'tooltip',
onClick(item, $dom, event) {
console.info(item, $dom, event);
- return 'new tooltip'
- }
+ return 'new tooltip';
+ },
},
],
});
+```
-Creating Selection List Settings
+## Create - Selection List
-A selection list in the settings panel can be configured with the following properties. The 'selector' array defines the list items.
+| Property | Type | Description |
+| ---------- | ------------------- | -------------------- |
+| `html` | `String`, `Element` | The DOM element |
+| `icon` | `String`, `Element` | The icon element |
+| `selector` | `Array` | The list of elements |
+| `onSelect` | `Function` | The click event |
+| `width` | `Number` | The list width |
+| `tooltip` | `String` | The tooltip text |
-Property Type Description
-html String, Element Element DOM
-icon String, Element Element icon
-selector Array Element list
-onSelect Function Element click event
-width Number List width
-tooltip String Tooltip text
-
-This example creates two selection lists: one for subtitles and one for video quality. Each item in the selector can have a default state, custom HTML, and a data URL.
+▶ Run Code
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3204,146 +3915,13 @@ var art = new Artplayer({
},
],
});
+```
-Creating Nested Lists
+## Create - Nested List
-The documentation mentions the ability to create nested lists within the settings panel, but a specific code example was not provided in the source text.
-
-ArtPlayer Documentation for AI Learning
-
-This documentation covers the installation, usage, and configuration of ArtPlayer, with a focus on creating and managing settings.
-
-Installation and Usage
-
-You can install ArtPlayer via several package managers or include it directly via script tag.
-
-Using npm:
-npm install artplayer
-
-Using yarn:
-yarn add artplayer
-
-Using pnpm:
-pnpm add artplayer
-
-Using a script tag in HTML:
-
-
-CDN Links
-
-You can also load ArtPlayer from a CDN.
-
-From jsdelivr.net:
-https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
-
-From unpkg.com:
-https://unpkg.com/artplayer/dist/artplayer.js
-
-Basic Usage Example
-
-Here is a basic HTML example to get started with ArtPlayer.
-
-
-
- ArtPlayer Demo
-
-
-
-
-
-
-
-
-
-
-Important Note: The player's dimensions depend entirely on the size of its container element. You must define the width and height for your container.
-
-For more detailed usage examples, you can visit the project's example directory.
-
-Vue.js Integration Example
-
-ArtPlayer can be integrated into a Vue.js application. Here is a component example.
-
-First, create a reusable Artplayer.vue component:
-
-
-
-
-
-
-
-Then, use the component in your app.vue file:
-
-
-
-
-
-
-
-Important Note: The Artplayer instance itself is not reactive. Manage its state through its own API methods.
-
-Creating Settings
-
-ArtPlayer allows you to add custom settings to its control panel. There are several types of settings you can create.
-
-Creating a Multi-Level Selector Setting
-
-This example shows how to create a setting with nested selectors.
+▶ Run Code
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3389,32 +3967,21 @@ var art = new Artplayer({
],
});
-Creating a Toggle Button Setting
+```
-A toggle button setting has a switch that can be on or off. Here are its properties.
+## Create - Toggle Button
-Property: html
-Type: String, Element
-Description: DOM element or text for the item.
+| Property | Type | Description |
+| ---------- | ------------------- | -------------------------- |
+| `html` | `String`, `Element` | DOM element for the item |
+| `icon` | `String`, `Element` | Icon for the item |
+| `switch` | `Boolean` | Default state of the button |
+| `onSwitch` | `Function` | Button toggle event |
+| `tooltip` | `String` | Tooltip text |
-Property: icon
-Type: String, Element
-Description: Icon for the item.
-
-Property: switch
-Type: Boolean
-Description: The default state of the button (true for on, false for off).
-
-Property: onSwitch
-Type: Function
-Description: The function called when the button is toggled.
-
-Property: tooltip
-Type: String
-Description: The text shown when hovering over the button.
-
-Here is an example of creating a toggle button for Picture-in-Picture (PIP) mode.
+▶ Run Code
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3435,44 +4002,30 @@ var art = new Artplayer({
},
],
});
+```
-Creating a Range Slider Setting
+## Create - Range Slider
-A range slider setting allows users to select a numeric value. Here are its properties.
+| Property | Type | Description |
+| ---------- | ------------------- | -------------------------- |
+| `html` | `String`, `Element` | DOM element for the item |
+| `icon` | `String`, `Element` | Icon for the item |
+| `range` | `Array` | Default state array |
+| `onRange` | `Function` | Event triggered on completion |
+| `onChange` | `Function` | Event triggered on change |
+| `tooltip` | `String` | Tooltip text |
-Property: html
-Type: String, Element
-Description: DOM element or text for the item.
-
-Property: icon
-Type: String, Element
-Description: Icon for the item.
-
-Property: range
-Type: Array
-Description: An array defining the slider's state: [default_value, min_value, max_value, step].
-
-Property: onRange
-Type: Function
-Description: Function triggered when the user finishes changing the slider.
-
-Property: onChange
-Type: Function
-Description: Function triggered whenever the slider value changes.
-
-Property: tooltip
-Type: String
-Description: The text shown when hovering over the slider.
-
-The range array is structured as follows:
+```js
const range = [5, 1, 10, 1];
-const value = range[0]; // The current/default value (5)
-const min = range[1]; // The minimum value (1)
-const max = range[2]; // The maximum value (10)
-const step = range[3]; // The step increment (1)
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
+```
-Here is an example of creating a playback speed slider.
+▶ Run Code
+```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3490,11 +4043,13 @@ var art = new Artplayer({
},
],
});
+```
-Adding a Setting After Initialization
+## Add
-You can add a new setting to the player after it has been created using the `add` method.
+▶ Run Code
+```js{9-14}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3509,11 +4064,13 @@ art.setting.add({
icon: '
',
range: [5, 1, 10, 1],
});
+```
-Removing a Setting
+## Remove
-You can remove a setting by its unique `name` property using the `remove` method. In this example, the setting named 'slider' is removed after a 3-second delay.
+▶ Run Code
+```js{22}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3538,11 +4095,13 @@ art.on('ready', () => {
art.setting.remove('slider');
}, 3000);
});
+```
-Updating a Setting
+## Update
-You can update the properties of an existing setting by its `name` using the `update` method. In this example, a slider setting is changed to a toggle button after 3 seconds.
+▶ Run Code
+```js{21-27}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -3572,15 +4131,172 @@ art.on('ready', () => {
});
}, 3000);
});
+```
-ArtPlayer Documentation
+===== packages/artplayer-vitepress/docs/en/index.md =====
-React.js
+# Installation and Usage
-Here is an example of using ArtPlayer in a React.js component.
+## Installation
-Artplayer.jsx:
+::: code-group
+```bash [npm]
+npm install artplayer
+```
+
+```bash [yarn]
+yarn add artplayer
+```
+
+```bash [pnpm]
+pnpm add artplayer
+```
+
+```bash [bun]
+bun add artplayer
+```
+
+```html [script]
+
+```
+
+:::
+
+## `CDN`
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer/dist/artplayer.js
+```
+
+:::
+
+## Usage
+
+::: code-group
+
+```html [index.html]
+
+
+ ArtPlayer Demo
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+::: warning Note
+
+The player's dimensions depend on the dimensions of its `container`. Therefore, your `container` must have defined dimensions.
+
+:::
+
+::: tip See more usage examples at the following link
+
+[/example](https://github.com/zhw2590582/ArtPlayer/tree/master/example)
+
+:::
+
+## `Vue.js`
+
+::: code-group
+
+```vue [Artplayer.vue]
+
+
+
+
+
+```
+
+```vue [app.vue]
+
+
+
+
+
+```
+
+:::
+
+::: warning Artplayer is not reactive:
+
+Directly modifying the `option` in `Vue.js` will not update the player.
+
+:::
+
+## `React.js`
+
+::: code-group
+
+```jsx [Artplayer.jsx]
import Artplayer from 'artplayer'
import { useEffect, useRef } from 'react'
@@ -3602,9 +4318,9 @@ export default function Player({ option, getInstance, ...rest }) {
return
}
+```
-app.jsx:
-
+```jsx [app.jsx]
import Artplayer from './Artplayer.jsx'
function App() {
@@ -3626,31 +4342,43 @@ function App() {
}
export default App
+```
-Important note: Artplayer is not reactive. Directly modifying the `option` prop in React.js will not update the player.
+:::
-TypeScript
+::: warning Artplayer is not reactive:
-TypeScript definitions are automatically imported when you import Artplayer. Here are examples for different frameworks.
+Directly modifying the `option` in `React.js` will not update the player.
-Vue.js:
+:::
+## TypeScript
+
+The `artplayer.d.ts` file is automatically imported when you import `Artplayer`.
+
+### Vue.js
+
+```vue{3}
+```
-React.js:
+### React.js
+```jsx{2}
import Artplayer from 'artplayer';
const art = useRef(null);
art.current = new Artplayer();
+```
-You can also import and use the Option type for better type safety.
+### Option
-Option:
+You can also use the type for the options.
+```ts{3}
import Artplayer, { type Option } from 'artplayer';
const option: Option = {
@@ -3661,31 +4389,41 @@ const option: Option = {
option.volume = 0.5;
const art = new Artplayer(option);
+```
-For the full TypeScript definitions, refer to the repository: packages/artplayer/types
+::: tip Full TypeScript Definitions
-JavaScript
+[packages/artplayer/types](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer/types)
-If your JavaScript files lose TypeScript type hints, you can manually import the types using JSDoc comments.
+:::
-For a variable:
+## JavaScript
+Sometimes your `js` files may lose `TypeScript` type hints. In such cases, you can manually import the types.
+
+Variable:
+
+```js{1-3}
/**
* @type {import("artplayer")}
*/
let art = null;
+```
-For a function parameter:
+Parameter:
+```js{1-3}
/**
* @param {import("artplayer")} art
*/
function getInstance(art) {
//
}
+```
-For a Vue.js component property:
+Property:
+```js{4-6}
export default {
data() {
return {
@@ -3696,9 +4434,11 @@ export default {
}
}
}
+```
-For the Option type:
+Option:
+```js{1-3}
/**
* @type {import("artplayer/types/option").Option}
*/
@@ -3711,31 +4451,52 @@ const option = {
option.volume = 0.5;
const art8 = new Artplayer(option);
+```
-Legacy Browsers
+## Legacy Browsers
-The standard production build, artplayer.js, supports the latest version of Chrome. For compatibility with older browsers, use the legacy build.
+The production build `artplayer.js` only supports the latest major version of `Chrome`: `last 1 Chrome version`.
-Import the legacy version:
+For legacy browsers, you can use the `artplayer.legacy.js` file, which is compatible down to: `IE 11`.
+```js
import Artplayer from 'artplayer/legacy'
+```
-You can also use it via a CDN:
+::: code-group
-From jsdelivr.net:
+```bash [jsdelivr.net]
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
+```
-From unpkg.com:
+```bash [unpkg.com]
https://unpkg.com/artplayer/dist/artplayer.legacy.js
+```
-The legacy build supports browsers as old as IE 11. If you need to support even older browsers, you can modify the build configuration and compile it yourself. Refer to the build script and the browserslist documentation for details.
+:::
-ECMAScript Module
+::: tip If you need to support even older browsers, modify the following configuration and build it yourself:
-Starting from version 5.2.6, ArtPlayer and its plugins provide ESM versions with the .mjs extension.
+Build configuration: [scripts/build.js](https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29)
-Example using an import map in HTML:
+Reference documentation: [browserslist](https://github.com/browserslist/browserslist#full-list)
+:::
+
+## ECMAScript Module
+
+::: tip ESM Demo:
+
+[https://artplayer.org/esm.html](https://artplayer.org/esm.html)
+
+:::
+
+Starting from version `5.2.6`, `artplayer` and all plugins also provide an `ESM` version in `mjs` format, such as:
+
+- `artplayer/dist/artplayer.mjs`
+- `artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs`
+
+```html
@@ -3772,13 +4533,13 @@ Example using an import map in HTML: