feat: add link to LLMs resource in README

Implement code changes to enhance functionality and improve performance

chore: add initial empty files for artplayer.d.ts, llm.txt, and build-llm.js

Refactor Artplayer examples for improved readability and consistency

- Updated mobile.js to enhance code formatting and structure.
- Refined mpegts.js for better readability and consistency in function usage.
- Improved multiple.subtitles.js with clearer structure and modern syntax.
- Enhanced setting.test.js for better organization and clarity in settings management.
- Streamlined thumbnail.js for consistent formatting.
- Updated vast.js for improved readability and consistency in plugin usage.
- Refined vtt.thumbnail.js for better code organization.
- Enhanced webtorrent.js for improved readability and consistency in async handling.
- Updated TypeScript definitions for various plugins to maintain consistency in export statements.
- Adjusted package.json linting script to include TypeScript files in the docs/assets/ts directory.
- Removed outdated types.test.js file to clean up the test suite.

refactor: remove outdated documentation files and update translation script

- Deleted i18n.md and option.md documentation files as they are no longer needed.
- Updated trans-docs.js to streamline the translation process and improve error handling.
- Adjusted plugin template package.json for consistency.
- Changed console.log to console.warn in various test files for better logging practices.

feat: add danmaku plugin documentation and i18n support

- Introduced comprehensive documentation for the Danmaku library, including installation, usage examples, and configuration options.
- Added language settings documentation, highlighting the need for manual language imports starting from version 5.1.0.
- Updated basic options documentation with detailed descriptions and examples for player configuration options.

Refactor documentation for clarity and consistency; update translation script to handle large Markdown chunks

refactor: improve documentation clarity and consistency across various components

- Updated property descriptions in layers.md and setting.md for better readability.
- Enhanced language and structure in index.md, danmuku.md, i18n.md, and option.md to ensure uniformity.
- Corrected minor grammatical errors and improved phrasing throughout the documentation.
- Ensured consistent formatting in tables and code snippets for better user experience.

feat: add build script for generating llm.txt and update translation source directories

Refactor build-llm.js to improve concurrency and enhance prompt clarity

- Introduced a MAX_CONCURRENT_REQUESTS constant to manage concurrent API requests.
- Added a runConcurrent function to handle task execution with a limit on concurrent requests.
- Updated the askDeepSeek function to include more informative logging.
- Enhanced prompts for summarizing documentation, TypeScript definitions, and JavaScript examples to improve clarity and maintain formatting.
- Modified the main function to fetch files concurrently and streamline the summarization process.

Increase text chunk size from 5000 to 8000 in summarizeSection function for improved processing of larger files.

fix: update lint script to include .js files in the scripts directory

packages/artplayer-vitepress/docs/en/advanced/built-in.md

@@ -1,10 +1,10 @@
 # Advanced Properties
 
-The `advanced properties` here refer to the `secondary attributes` mounted on the `instance`, which are less commonly used
+The `Advanced Properties` here refer to the `secondary properties` attached to the `instance`, which are less commonly used.
 
 ## `option`
 
-Options for the player
+The player's options.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,7 +17,7 @@ var art = new Artplayer({
 console.info(art.option);
 ```
 
-:::warning Reminder
+:::warning Note
 
 If you directly modify this `option` object, the player will not respond immediately.
 
@@ -25,7 +25,7 @@ If you directly modify this `option` object, the player will not respond immedia
 
 ## `template`
 
-Manages all of the `DOM` elements of the player
+Manages all `DOM` elements of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -38,20 +38,21 @@ var art = new Artplayer({
 console.info(art.template);
 console.info(art.template.$video);
 ```
-:::warning Warning
 
-To easily distinguish between `DOM` elements and plain objects, all `DOM` elements in the player are named starting with a `$`
+:::warning Note
 
-Here 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)
+To easily distinguish between `DOM` elements and regular objects, all `DOM` elements within the player are prefixed with `$`.
+
+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)
 
 :::
 
 ## `events`
 
-Manages all `DOM` events in the player, which is essentially a proxy for `addEventListener` and `removeEventListener`. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.
+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
+- The `proxy` method is used to proxy `DOM` events.
+- The `hover` method is used to proxy custom `hover` events.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -64,7 +65,7 @@ var art = new Artplayer({
 });
 
 art.events.proxy(container, 'click', event => {
-    console.info('click', event);
+	console.info('click', event);
 });
 
 art.events.hover(container, (event) => {
@@ -73,21 +74,22 @@ art.events.hover(container, (event) => {
     console.info('mouseleave', event);
 });
 ```
-:::warning Warning
 
-If you need some `DOM` events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks
+:::warning Note
+
+If you need `DOM` events that only exist for the duration of the player's lifecycle, it is highly recommended to use these functions to avoid memory leaks.
 
 :::
 
 ## `storage`
 
-Manages the local storage of the player
+Manages the player's local storage.
 
-- The `name` attribute is used to set the cache `key`
-- The `set` method is used to set the cache
-- The `get` method is used to get the cache
-- The `del` method is used to delete the cache
-- The `clear` method is used to clear the cache
+- The `name` property is used to set the cache `key`.
+- The `set` method is used to set the cache.
+- The `get` method is used to get the cache.
+- The `del` method is used to delete the cache.
+- The `clear` method is used to clear the cache.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -104,11 +106,11 @@ art.storage.del('test');
 art.storage.clear();
 ```
 
-:::warning Warning
+:::warning Note
 
-By default, all player instances share the same `localStorage`, and the default `key` is `artplayer_settings`
+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` accordingly
+If you want different players to use different `localStorage`, you can modify `art.storage.name`.
 
 :::
 
@@ -126,7 +128,7 @@ art.storage.set('test', { foo: 'bar' });
 
 ## `icons`
 
-Manage all the `svg` icons of the player
+Manages all `svg` icons for the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -147,10 +149,10 @@ console.info(art.icons.loading);
 
 ## `i18n`
 
-Manage the player's `i18n`
+Manages the player's `i18n`.
 
-- The `get` method is used to retrieve the value of `i18n`
-- The `update` method is used to update the `i18n` object
+- The `get` method is used to get the `i18n` value.
+- The `update` method is used to update the `i18n` object.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -171,14 +173,13 @@ art.i18n.update({
 
 :::warning
 
-Using `art.i18n.update` can only update `i18n` after instantiation. If you want to update `i18n` before instantiation, please use the `i18n` from the basic options for the update.
+Using `art.i18n.update` can only update the `i18n` after instantiation. If you want to update `i18n` before instantiation, please use the basic option `i18n` to update.
 
 :::
 
-
 ## `notice`
 
-Manage the player's notices, there's only one `show` property used to display notices.
+Manages the player's notifications. It only has a `show` property for displaying notifications.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -195,19 +196,19 @@ art.on('ready', () => {
 
 :::warning
 
-To immediately hide the display of `notice`: `art.notice.show = '';`
+If you want to hide the `notice` immediately: `art.notice.show = '';`
 
 :::
 
 ## `layers`
 
-Manage the layers of the player
+Manages the player's layers.
 
-- The `add` method is used for dynamically adding layers
-- The `remove` method is used for dynamically removing layers
-- The `update` method is used for dynamically updating layers
-- The `show` property is used to set whether to display all layers or not
-- The `toggle` method is used to toggle the display 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 visible.
+- The `toggle` method is used to toggle the visibility of all layers.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -226,8 +227,8 @@ art.on('ready', () => {
 		art.layers.show = false;
 	}, 1000);
 });
-```
-:::warning `Component configuration` Please refer to the following address:
+
+:::warning For `Component Configuration`, please refer to:
 
 [/component/layers.html](/component/layers.html)
 
@@ -235,13 +236,13 @@ art.on('ready', () => {
 
 ## `controls`
 
-Manage the player's controllers
+Manages the player's controls
 
-- `add` method is used to dynamically add controllers
-- `remove` method is used to dynamically remove controllers
-- `update` method is used to dynamically update controllers
-- `show` property is used to set whether to display all controllers
-- `toggle` method is used to toggle the display of all controllers
+- The `add` method dynamically adds controls
+- The `remove` method dynamically removes controls
+- The `update` method dynamically updates controls
+- The `show` property sets whether to display all controls
+- The `toggle` method toggles the visibility of all controls
 
 <div className="run-code">▶ Run Code</div>
 
@@ -263,7 +264,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning `Component Configuration` Please refer to the following address:
+:::warning For `Component Configuration`, please refer to:
 
 [/component/controls.html](/component/controls.html)
 
@@ -271,13 +272,13 @@ art.on('ready', () => {
 
 ## `contextmenu`
 
-Manage the right-click context menu of the player
+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` attribute is used to set whether to show all menu items
-- The `toggle` method is used to switch the visibility of all menu items
+- The `add` method dynamically adds menu items
+- The `remove` method dynamically removes menu items
+- The `update` method dynamically updates menu items
+- The `show` property sets whether to display all menu items
+- The `toggle` method toggles the visibility of all menu items
 
 <div className="run-code">▶ Run Code</div>
 
@@ -293,13 +294,13 @@ art.on('ready', () => {
     });
 
     art.contextmenu.show = true;
-    setTimeout(() => {
-        art.contextmenu.show = false;
-    }, 1000);
+	setTimeout(() => {
+		art.contextmenu.show = false;
+	}, 1000);
 });
 ```
 
-:::warning `Component Configuration` Please refer to the following address:
+:::warning For `Component Configuration`, please refer to:
 
 [/component/contextmenu.html](/component/contextmenu.html)
 
@@ -307,14 +308,14 @@ art.on('ready', () => {
 
 ## `subtitle`
 
-Manage the subtitle features of the player
+Manages the player's subtitle functionality
 
-- `url` property sets and returns the current subtitle address
-- `style` method sets the style of the current subtitle
-- `switch` method sets the current subtitle address and options
-- `textTrack` Get the current subtitle track
-- `activeCues` Get the currently active subtitle list
-- `cues` Get the subtitle list
+- The `url` property sets and returns the current subtitle URL
+- The `style` method sets the current subtitle's style
+- 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 complete list of cues
 
 <div className="run-code">▶ Run Code</div>
 
@@ -334,10 +335,10 @@ art.on('ready', () => {
 
 ## `loading`
 
-Manage the loading layer of the player
+Manages the player's loading layer
 
-- `show` property is used to set whether to display the loading layer
-- The `toggle` attribute is used to toggle the display of the loading layer
+- The `show` property sets whether to display the loading layer
+- The `toggle` property toggles the visibility of the loading layer
 
 <div className="run-code">▶ Run Code</div>
 
@@ -357,10 +358,10 @@ art.on('ready', () => {
 
 ## `hotkey`
 
-Manage the hotkey functionality of the player
+Manages the player's hotkey functionality
 
-- The `add` method is used to add a hotkey
-- The `remove` method is used to remove a hotkey
+- The `add` method adds hotkeys
+- The `remove` method removes hotkeys
 
 <div className="run-code">▶ Run Code</div>
 
@@ -381,18 +382,19 @@ art.on('ready', () => {
 	}, 5000);
 });
 ```
-:::warning Warning
 
-Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).
+:::warning Note
+
+These hotkeys only take effect when the player has focus (e.g., after clicking on the player)
 
 :::
 
 ## `mask`
 
-Manage the player's mask layer
+Manages the player's mask layer
 
-- `show` property is used to set whether to display the mask layer
-- `toggle` property is used to toggle the display of the mask layer
+- The `show` property sets whether to display the mask layer
+- The `toggle` property toggles the visibility of the mask layer
 
 <div className="run-code">▶ Run Code</div>
 
@@ -404,22 +406,21 @@ var art = new Artplayer({
 
 art.on('ready', () => {
     art.mask.show = false;
-    setTimeout(() => {
-        art.mask.show = true;
-    }, 1000);
+	setTimeout(() => {
+		art.mask.show = true;
+	}, 1000);
 });
 ```
 
 ## `setting`
 
-Manage the player's settings panel
-
-- `add` method is used to dynamically add a setting item
-- `remove` method is used to dynamically remove a setting item
-- `update` method is used to dynamically update a setting item
-- `show` property is used to set whether to display all the setting items
-- `toggle` method is used to toggle whether to display all the setting items
+Manages the player's settings panel
 
+- The `add` method dynamically adds settings items
+- The `remove` method dynamically removes settings items
+- The `update` method dynamically updates settings items
+- The `show` property sets whether to display all settings items
+- The `toggle` method toggles the visibility of all settings items
 
 <div className="run-code">▶ Run Code</div>
 
@@ -442,7 +443,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning `Settings Panel` Please refer to the following link
+:::warning For `Settings Panel`, please refer to:
 
 [/component/setting.html](/component/setting.html)
 
@@ -450,7 +451,7 @@ art.on('ready', () => {
 
 ## `plugins`
 
-Manage the player's plugin features, with only one method `add` to dynamically add plugins
+Manages the player's plugin functionality, with only one method `add` for dynamically adding plugins
 
 <div className="run-code">▶ Run Code</div>
 
@@ -473,5 +474,4 @@ function myPlugin(art) {
 
 art.on('ready', () => {
     art.plugins.add(myPlugin);
-});
-```
+});

packages/artplayer-vitepress/docs/en/advanced/class.md

@@ -1,10 +1,10 @@
 # Static Properties
 
-Here, `Static Properties` refer to the `first-level properties` mounted on the `constructor`, which are very rarely used.
+Static properties here refer to first-level properties mounted on the constructor, which are rarely used.
 
 ## `instances`
 
-Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.
+Returns an array of all player instances. This property can be useful when you need to manage multiple player instances simultaneously.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -41,7 +41,7 @@ console.info(Artplayer.env);
 
 ## `build`
 
-Returns the build time of the player
+Returns the build timestamp of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -51,7 +51,7 @@ console.info(Artplayer.build);
 
 ## `config`
 
-Returns the default configuration of the video
+Returns the default configuration for videos.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -61,7 +61,7 @@ console.info(Artplayer.config);
 
 ## `utils`
 
-Returns a collection of utility functions for the player
+Returns the collection of utility functions for the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -69,7 +69,7 @@ Returns a collection of utility functions for the player
 console.info(Artplayer.utils);
 ```
 
-:::warning For the full list of utility functions, please refer to the following address:
+:::warning For all utility functions, please refer to:
 
 [artplayer/types/utils.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts)
 
@@ -77,7 +77,7 @@ console.info(Artplayer.utils);
 
 ## `scheme`
 
-Returns the validation scheme for the player options
+Returns the validation schema for player options.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -87,7 +87,7 @@ console.info(Artplayer.scheme);
 
 ## `Emitter`
 
-Returns the constructor for the event dispatcher
+Returns the constructor for the event emitter.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -97,7 +97,7 @@ console.info(Artplayer.Emitter);
 
 ## `validator`
 
-Returns the validation function for options
+Returns the validation function for options.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -107,7 +107,7 @@ console.info(Artplayer.validator);
 
 ## `kindOf`
 
-Returns the function tool for type checking
+Returns the type detection utility function.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -117,7 +117,7 @@ console.info(Artplayer.kindOf);
 
 ## `html`
 
-Returns the `html` string required for the player
+Returns the HTML string required by the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -127,10 +127,9 @@ console.info(Artplayer.html);
 
 ## `option`
 
-Returns the player's default options
+Returns the default options for the player.
 
 <div className="run-code">▶ Run Code</div>
 
 ```js
-console.info(Artplayer.option);
-```
+console.info(Artplayer.option);

packages/artplayer-vitepress/docs/en/advanced/event.md

@@ -1,8 +1,8 @@
-# Example Events
+# Instance Events
 
-Player events are divided into two types, one is the video's `native events` (prefix `video:`), the other is `custom events`
+Player events are divided into two types: `native events` from the video (prefixed with `video:`) and `custom events`.
 
-Listening to events:
+Listen for events:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,7 +17,7 @@ art.on('video:canplay', () => {
 });
 ```
 
-Listen to an event only once:
+Listen for an event only once:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -63,14 +63,15 @@ const onReady = () => {
 art.on('ready', onReady);
 ```
 
-:::warning For a full list of events, please refer to the following address:
+:::warning For all events, please refer to the following address:
 
 [artplayer/types/events.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts)
 
 :::
+
 ## `ready`
 
-Triggered when the player is able to play for the first time
+Triggered when the player is ready for the first time
 
 <div className="run-code">▶ Run Code</div>
 
@@ -87,7 +88,7 @@ art.on('ready', () => {
 
 ## `restart`
 
-Triggered when the player switches the address and is able to play
+Triggered when the player switches URL and is ready to play
 
 <div className="run-code">▶ Run Code</div>
 
@@ -105,6 +106,7 @@ art.on('restart', (url) => {
     console.info('restart', url);
 });
 ```
+
 ## `pause`
 
 Triggered when the player is paused
@@ -141,7 +143,7 @@ art.on('play', () => {
 
 ## `hotkey`
 
-Triggered when a hotkey on the player is pressed
+Triggered when a player hotkey is pressed
 
 <div className="run-code">▶ Run Code</div>
 
@@ -227,6 +229,7 @@ art.on('dblclick', (event) => {
     console.info('dblclick', event);
 });
 ```
+
 ## `click`
 
 Triggered when the player is clicked
@@ -242,11 +245,10 @@ var art = new Artplayer({
 art.on('click', (event) => {
     console.info('click', event);
 });
-```
 
 ## `error`
 
-Triggered when an error occurs while the player is loading the video
+Triggered when an error occurs while the player is loading a video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -260,9 +262,10 @@ art.on('error', (error, reconnectTime) => {
     console.info(error, reconnectTime);
 });
 ```
+
 ## `hover`
 
-Triggered when the player is hovered or unhovered by the mouse
+Triggered when the mouse pointer enters or leaves the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -279,7 +282,7 @@ art.on('hover', (state, event) => {
 
 ## `mousemove`
 
-Triggered when the mouse moves over the player
+Triggered when the mouse pointer moves over the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -293,9 +296,10 @@ art.on('mousemove', (event) => {
     console.info('mousemove', event);
 });
 ```
+
 ## `resize`
 
-Triggered when the player size changes
+Triggered when the player's dimensions change
 
 <div className="run-code">▶ Run Code</div>
 
@@ -312,7 +316,7 @@ art.on('resize', () => {
 
 ## `view`
 
-Triggered when the player appears in the viewport
+Triggered when the player enters or leaves the viewport
 
 <div className="run-code">▶ Run Code</div>
 
@@ -329,7 +333,7 @@ art.on('view', (state) => {
 
 ## `lock`
 
-On mobile, triggered when the locked state changes
+Triggered when the lock state changes on mobile devices
 
 <div className="run-code">▶ Run Code</div>
 
@@ -347,7 +351,7 @@ art.on('lock', (state) => {
 
 ## `aspectRatio`
 
-Triggered when the aspect ratio of the player changes
+Triggered when the player's aspect ratio changes
 
 <div className="run-code">▶ Run Code</div>
 
@@ -366,7 +370,7 @@ art.on('aspectRatio', (aspectRatio) => {
 
 ## `autoHeight`
 
-Triggered when the player automatically sets the height
+Triggered when the player automatically sets its height
 
 <div className="run-code">▶ Run Code</div>
 
@@ -387,7 +391,7 @@ art.on('autoHeight', (height) => {
 
 ## `autoSize`
 
-Triggered when the player automatically sets the size
+Triggered when the player automatically adjusts its size
 
 <div className="run-code">▶ Run Code</div>
 
@@ -402,9 +406,10 @@ art.on('autoSize', () => {
     console.info('autoSize');
 });
 ```
+
 ## `flip`
 
-Triggered when the player flips
+Triggered when the player's video is flipped
 
 <div className="run-code">▶ Run Code</div>
 
@@ -423,7 +428,7 @@ art.on('flip', (flip) => {
 
 ## `fullscreen`
 
-Triggered when the player goes into full screen
+Triggered when the player enters or exits fullscreen mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -441,7 +446,7 @@ art.on('fullscreen', (state) => {
 
 ## `fullscreenError`
 
-Triggered when the player goes into full screen error
+Triggered when an error occurs during fullscreen mode transition
 
 <div className="run-code">▶ Run Code</div>
 
@@ -462,7 +467,7 @@ art.on('fullscreenError', (event) => {
 
 ## `fullscreenWeb`
 
-Triggered when the player enters web fullscreen
+Triggered when the player enters or exits web page fullscreen mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -480,7 +485,7 @@ art.on('fullscreenWeb', (state) => {
 
 ## `mini`
 
-Triggered when the player enters mini mode
+Triggered when the player enters or exits mini mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -498,9 +503,10 @@ art.on('mini', (state) => {
     console.info('mini', state);
 });
 ```
+
 ## `pip`
 
-Triggered when the player enters Picture-in-Picture mode
+Triggered when the player enters or exits picture-in-picture mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -518,7 +524,7 @@ art.on('pip', (state) => {
 
 ## `screenshot`
 
-Triggered when the player takes a screenshot
+Triggered when the player captures a screenshot
 
 <div className="run-code">▶ Run Code</div>
 
@@ -533,9 +539,10 @@ art.on('screenshot', (dataUri) => {
     console.info('screenshot', dataUri);
 });
 ```
+
 ## `seek`
 
-Triggered when the player jumps in time
+Triggered when the player performs a time jump
 
 <div className="run-code">▶ Run Code</div>
 
@@ -552,7 +559,7 @@ art.on('seek', (currentTime) => {
 
 ## `subtitleOffset`
 
-Triggered when the subtitle offset occurs in the player
+Triggered when subtitle offset changes
 
 <div className="run-code">▶ Run Code</div>
 
@@ -594,7 +601,7 @@ art.on('subtitleBeforeUpdate', (cues) => {
 
 ## `subtitleAfterUpdate`
 
-Triggered when the subtitles are updated
+Triggered after subtitles are updated
 
 <div className="run-code">▶ Run Code</div>
 
@@ -614,7 +621,7 @@ art.on('subtitleAfterUpdate', (cues) => {
 
 ## `subtitleLoad`
 
-Triggered when the subtitle loads
+Triggered when subtitles are loaded
 
 <div className="run-code">▶ Run Code</div>
 
@@ -634,7 +641,7 @@ art.on('subtitleLoad', (option, cues) => {
 
 ## `info`
 
-Triggered when the information panel is shown or hidden
+Triggered when the info panel is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -648,9 +655,10 @@ art.on('info', (state) => {
     console.log(state);
 });
 ```
+
 ## `layer`
 
-Triggered when a custom layer is shown or hidden
+Triggered when custom layers are shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -667,7 +675,7 @@ art.on('layer', (state) => {
 
 ## `loading`
 
-Triggered when a loader is shown or hidden
+Triggered when the loading indicator is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -684,7 +692,7 @@ art.on('loading', (state) => {
 
 ## `mask`
 
-Triggered when a mask layer is shown or hidden
+Triggered when the mask layer is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -714,11 +722,10 @@ var art = new Artplayer({
 art.on('subtitle', (state) => {
     console.log(state);
 });
-```
 
 ## `contextmenu`
 
-Triggered when the right-click menu is shown or hidden
+Triggered when the context menu is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -735,7 +742,7 @@ art.on('contextmenu', (state) => {
 
 ## `control`
 
-Triggered when the controller is shown or hidden
+Triggered when the controls are shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -787,7 +794,7 @@ art.on('muted', (state) => {
 
 ## `keydown`
 
-Listen to the `keydown` event from `document`
+Listens for the `keydown` event from `document`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -804,11 +811,11 @@ art.on('keydown', (event) => {
 
 ## `video:canplay`
 
-The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering
+The browser can start playing the media, but estimates that there isn't enough data to play through to the end without having to stop for further buffering
 
 ## `video:canplaythrough`
 
-The browser estimates it can play the media through to the end without stopping for content buffering
+The browser estimates it can play the media through to the end without having to stop for buffering
 
 ## `video:complete`
 
@@ -820,15 +827,15 @@ Triggered when the value of the duration property changes
 
 ## `video:emptied`
 
-The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it
+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:ended`
 
-The video has stopped because the media reached the end point
+Playback has stopped because the media has reached its end point
 
 ## `video:error`
 
-An error occurred while fetching media data, or the resource type is not a supported media format
+An error occurred while fetching the media data, or the resource type is not a supported media format
 
 ## `video:loadeddata`
 
@@ -844,15 +851,15 @@ Playback has been paused
 
 ## `video:play`
 
-Playback has started
+Playback has begun
 
 ## `video:playing`
 
-Playback is ready to start following a pause or delay due to lack of data
+Playback is ready to start after having been paused or delayed due to lack of data
 
 ## `video:progress`
 
-Periodically triggered while the browser is loading resources
+Fired periodically as the browser loads the resource
 
 ## `video:ratechange`
 
@@ -860,15 +867,15 @@ The playback rate has changed
 
 ## `video:seeked`
 
-A seek (frame skipping) operation has completed
+A seek operation has completed
 
 ## `video:seeking`
 
-A seek (frame skipping) operation has started
+A seek operation has begun
 
 ## `video:stalled`
 
-The user agent is trying to fetch media data, but the data unexpectedly has not appeared
+The user agent is trying to fetch media data, but data is unexpectedly not forthcoming
 
 ## `video:suspend`
 
@@ -876,11 +883,12 @@ Media data loading has been suspended
 
 ## `video:timeupdate`
 
-The time specified by the currentTime attribute has changed
+The time indicated by the currentTime attribute has been updated
+
 ## `video:volumechange`
 
-Volume changed
+The volume has changed
 
 ## `video:waiting`
 
-Playback has stopped due to temporarily missing data
+Playback has stopped because of a temporary lack of data

packages/artplayer-vitepress/docs/en/advanced/global.md

@@ -1,10 +1,10 @@
-# Global Attributes
+# Global Properties
 
-Here, `Global Attributes` refer to the `first-level properties` mounted on the `constructor`. Property names are all in uppercase, subject to change in the future and basically not needed.
+These `global properties` 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 generally not used.
 
 ## DEBUG
 
-Whether to start `debug` mode, which can print out all built-in events of the video by default is turned off.
+Whether to enable `debug` mode, which can print all built-in video events. Default is off.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -19,7 +19,7 @@ var art = new Artplayer({
 
 ## STYLE
 
-Returns the player style text
+Returns the player's style text.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -29,7 +29,7 @@ console.log(Artplayer.STYLE);
 
 ## CONTEXTMENU
 
-Whether to enable the right-click context menu, enabled by default.
+Whether to enable the context menu. Default is on.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -41,9 +41,10 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 ```
+
 ## NOTICE_TIME
 
-The display duration of the notification message, in milliseconds, defaults to `2000`
+The display duration for notification messages, in milliseconds. Default is `2000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -58,7 +59,7 @@ var art = new Artplayer({
 
 ## SETTING_WIDTH
 
-The default width of the settings panel, in pixels, defaults to `250`
+The default width of the settings panel, in pixels. Default is `250`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -75,9 +76,10 @@ var art = new Artplayer({
     aspectRatio: true,
 });
 ```
+
 ## SETTING_ITEM_WIDTH
 
-Set the default width of the settings items in the panel, in pixels, the default is `200`.
+The default width of settings items in the settings panel, in pixels. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -97,7 +99,7 @@ var art = new Artplayer({
 
 ## SETTING_ITEM_HEIGHT
 
-Set the default height of the settings items in the panel, in pixels, the default is `35`.
+The default height of settings items in the settings panel, in pixels. Default is `35`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -117,7 +119,7 @@ var art = new Artplayer({
 
 ## RESIZE_TIME
 
-Throttle time for the `resize` event, in milliseconds, defaults to `200`
+The throttle time for `resize` events, in milliseconds. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -136,7 +138,7 @@ art.on('resize', () => {
 
 ## SCROLL_TIME
 
-Throttle time for the `scroll` event, in milliseconds, defaults to `200`
+The throttle time for `scroll` events, in milliseconds. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -152,9 +154,10 @@ art.on('scroll', () => {
     console.log('scroll');
 });
 ```
+
 ## SCROLL_GAP
 
-The boundary tolerance distance for the `view` event, in pixels, default is `50`
+The boundary tolerance distance for `view` events, in pixels. Default is `50`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -173,7 +176,7 @@ art.on('scroll', () => {
 
 ## AUTO_PLAYBACK_MAX
 
-The maximum number of records for the automatic playback feature, default is `10`
+The maximum number of records for the auto-playback feature. Default is `10`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -189,7 +192,7 @@ var art = new Artplayer({
 
 ## AUTO_PLAYBACK_MIN
 
-The minimum duration for the auto playback feature, in seconds, with a default of `5`.
+The minimum record duration for the auto-playback feature, in seconds. Default is `5`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -205,7 +208,7 @@ var art = new Artplayer({
 
 ## AUTO_PLAYBACK_TIMEOUT
 
-The delay duration for hiding the auto playback feature, in milliseconds, with a default of `3000`.
+The hide delay duration for the auto-playback feature, in milliseconds. Default is `3000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -221,7 +224,7 @@ var art = new Artplayer({
 
 ## RECONNECT_TIME_MAX
 
-The maximum number of automatic reconnection attempts when a connection error occurs, default is `5`
+The maximum number of automatic reconnection attempts when a connection error occurs. Default is `5`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -232,11 +235,10 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/404.mp4',
 });
-```
 
 ## RECONNECT_SLEEP_TIME
 
-The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is `1000`
+The delay time for automatic reconnection when a connection error occurs, in milliseconds. Default is `1000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -251,9 +253,7 @@ var art = new Artplayer({
 
 ## CONTROL_HIDE_TIME
 
-...
-
-Auto-hide delay time for the bottom control bar, measured in milliseconds, default is `3000`
+The delay time for auto-hiding the bottom control bar, in milliseconds. Default is `3000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -268,7 +268,7 @@ var art = new Artplayer({
 
 ## DBCLICK_TIME
 
-Double-click event delay time, measured in milliseconds, default is `300`
+The delay time for double-click events, in milliseconds. Default is `300`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -287,7 +287,7 @@ art.on('dblclick', () => {
 
 ## DBCLICK_FULLSCREEN
 
-On desktop, whether to switch to fullscreen on double click, default is `true`
+On desktop, whether to toggle fullscreen on double-click. Default is `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -302,7 +302,7 @@ var art = new Artplayer({
 
 ## MOBILE_DBCLICK_PLAY
 
-On mobile, whether to toggle play/pause on double click, default is `true`
+On mobile, whether to toggle play/pause on double-click. Default is `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -317,19 +317,7 @@ var art = new Artplayer({
 
 ## MOBILE_CLICK_PLAY
 
-On mobile, whether to play/pause on single click, default is `false`
-
-<div className="run-code">▶ Run Code</div>
-
-```js
-Artplayer.MOBILE_CLICK_PLAY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-```
-On mobile devices, whether a tap toggles play/pause, defaults to `false`
+On mobile, whether to toggle play/pause on single click. Default is `false`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -344,7 +332,7 @@ var art = new Artplayer({
 
 ## AUTO_ORIENTATION_TIME
 
-On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to `200`
+On mobile, the delay time for automatic screen rotation, in milliseconds. Default is `200`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -359,7 +347,8 @@ var art = new Artplayer({
 ```
 
 ## INFO_LOOP_TIME
-Info panel refresh time, unit in milliseconds, default is `1000`
+
+The refresh interval for the information panel, in milliseconds. Default is `1000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -376,7 +365,7 @@ art.info.show = true;
 
 ## FAST_FORWARD_VALUE
 
-On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is `3`
+On mobile, the speed multiplier for fast-forward during long press. Default is `3`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -392,8 +381,7 @@ var art = new Artplayer({
 
 ## FAST_FORWARD_TIME
 
-The time, in milliseconds, to fast-forward when double-tapped, default is `10`
-On mobile, the delay time of the long-press acceleration, in milliseconds, default is `1000`
+On mobile, the delay time for fast-forward during long press, in milliseconds. Default is `1000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -409,7 +397,7 @@ var art = new Artplayer({
 
 ## TOUCH_MOVE_RATIO
 
-On mobile, the ratio of the speed of sliding left and right to seek, default is `0.5`
+On mobile, the speed multiplier for progress seeking during left/right swipe. Default is `0.5`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -424,7 +412,7 @@ var art = new Artplayer({
 
 ## VOLUME_STEP
 
-The step ratio of adjusting volume with shortcuts, default is `0.1`
+The volume adjustment step for keyboard shortcuts. Default is `0.1`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -439,7 +427,7 @@ var art = new Artplayer({
 
 ## SEEK_STEP
 
-The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is `5`
+The seek adjustment step for keyboard shortcuts, in seconds. Default is `5`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -454,7 +442,7 @@ var art = new Artplayer({
 
 ## PLAYBACK_RATE
 
-The list of built-in playback speeds, by default `[0.5, 0.75, 1, 1.25, 1.5, 2]`
+The built-in playback rate options list. Default is `[0.5, 0.75, 1, 1.25, 1.5, 2]`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -474,7 +462,7 @@ art.setting.show = true;
 
 ## ASPECT_RATIO
 
-Built-in list of video aspect ratios, default is `['default', '4:3', '16:9']`
+The built-in video aspect ratio options list. Default is `['default', '4:3', '16:9']`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -490,10 +478,10 @@ var art = new Artplayer({
 
 art.contextmenu.show = true;
 art.setting.show = true;
-```
+
 ## FLIP
 
-Built-in list of video flips, defaults to `['normal', 'horizontal', 'vertical']`
+List of built-in video flip options, defaults to `['normal', 'horizontal', 'vertical']`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -513,7 +501,7 @@ art.setting.show = true;
 
 ## FULLSCREEN_WEB_IN_BODY
 
-When in web fullscreen, whether to mount the player under the `body` element, defaults to `true`
+Whether to mount the player under the `body` element during web fullscreen mode, defaults to `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -526,9 +514,10 @@ var art = new Artplayer({
     fullscreenWeb: true,
 });
 ```
+
 ## LOG_VERSION
 
-Setting whether to print the player version, the default is `true`
+Sets whether to print the player version, defaults to `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -543,7 +532,7 @@ var art = new Artplayer({
 
 ## USE_RAF
 
-Setting whether to use `requestAnimationFrame`, the default is `false`, currently mainly used for smooth progress bar effects
+Sets whether to use `requestAnimationFrame`, defaults to `false`. Currently mainly used for smooth progress bar effects
 
 <div className="run-code">▶ Run Code</div>
 
@@ -554,5 +543,4 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     miniProgressBar: true,
-});
-```
+});

packages/artplayer-vitepress/docs/en/advanced/plugin.md

@@ -1,8 +1,8 @@
 # Writing Plugins
 
-Once you know the player's `properties`, `methods`, and `events`, writing plugins is very simple.
+Once you're familiar with the player's `properties`, `methods`, and `events`, writing plugins becomes very straightforward.
 
-You can load plugin functions during instantiation.
+You can load plugin functions during instantiation:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -28,7 +28,8 @@ art.on('ready', () => {
     console.info(art.plugins.myPlugin);
 });
 ```
-You can also load plugins after instantiation:
+
+You can also load plugin functions after instantiation:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -56,7 +57,10 @@ art.on('ready', () => {
 });
 ```
 
-For example, I want to write a plugin that displays an image advertisement after the video is paused.
+For example, let's say I want to write a plugin that displays an image ad when the video is paused:
+
+<div className="run-code">▶ Run Code</div>
+
 ```js
 function adsPlugin(option) {
     return (art) => {
@@ -117,5 +121,4 @@ var art = new Artplayer({
             url: '/assets/sample/layer.png'
         })
     ],
-});
-```
+});

packages/artplayer-vitepress/docs/en/advanced/property.md

@@ -1,17 +1,16 @@
 # Instance Properties
 
-Here, `instance properties` refer to the `primary properties` mounted on the `instance`, which are quite commonly used.
+Here, `instance properties` refer to the `top-level properties` mounted on the `instance`, which are commonly used.
 
 ## `play`
 
 -   Type: `Function`
 
-Play video
+Play the video.
 
 <div className="run-code">▶ Run Code</div>
 
 ```js{8}
-
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
@@ -27,7 +26,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-Pause video
+Pause the video.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -46,11 +45,12 @@ art.on('ready', () => {
     }, 3000);
 });
 ```
+
 ## `toggle`
 
 -   Type: `Function`
 
-Toggle the play and pause state of the video
+Toggle between playing and pausing the video.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -75,7 +75,7 @@ art.on('ready', () => {
 -   Type: `Function`
 -   Parameter: `Boolean`
 
-Destroy the player. Accepts a parameter indicating whether to remove the player's `html` after destruction, which defaults to `true`
+Destroy the player. Accepts a parameter indicating whether to also remove the player's `html` after destruction. Defaults to `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -89,12 +89,13 @@ art.on('ready', () => {
     art.destroy();
 });
 ```
+
 ## `seek`
 
 -   Type: `Setter`
 -   Parameter: `Number`
 
-Jump to a specific time in the video, in seconds.
+Seek to a specific time in the video, in seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -114,7 +115,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Number`
 
-Fast forward the video time, in seconds.
+Fast forward the video by a specified number of seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -128,12 +129,13 @@ art.on('ready', () => {
     art.forward = 5;
 });
 ```
+
 ## `backward`
 
 -   Type: `Setter`
 -   Parameter: `Number`
 
-Video rewind time in seconds
+Rewind the video by a specified number of seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -157,7 +159,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-Sets and gets the video volume, which ranges from `[0, 1]`
+Set or get the video volume. Range: `[0, 1]`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -173,12 +175,13 @@ art.on('ready', () => {
     console.info(art.volume);
 });
 ```
+
 ## `url`
 
-- Type: `Setter/Getter`
-- Parameter: `String`
+-   Type: `Setter/Getter`
+-   Parameter: `String`
 
-Set and retrieve the video address
+Set or get the video URL.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -195,10 +198,10 @@ art.on('ready', () => {
 
 ## `switch`
 
-- Type: `Setter`
-- Parameter: `String`
+-   Type: `Setter`
+-   Parameter: `String`
 
-Set the video address, which is similar to `art.url`, but performs some optimization operations
+Set the video URL. Similar to `art.url` when setting, but performs some optimization operations.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -215,12 +218,13 @@ art.on('ready', () => {
     }, 3000);
 });
 ```
+
 ## `switchUrl`
 
-- Type: `Function`
-- Parameter: `String`
+-   Type: `Function`
+-   Parameter: `String`
 
-Set the video address, similar to setting `art.url`, but some optimization operations will be executed.
+Set the video URL. Similar to `art.url` when setting, but performs some optimization operations.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -238,17 +242,18 @@ art.on('ready', () => {
 });
 ```
 
-:::warning Warning
+:::warning Note
 
-`art.switch` and `art.switchUrl` have the same functionality. However, the `art.switchUrl` method will return a `Promise`. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.
+`art.switch` and `art.switchUrl` have the same functionality, but `art.switchUrl` returns a `Promise`. It `resolves` when the new URL is playable and `rejects` when the new URL fails to load.
 
 :::
+
 ## `switchQuality`
 
-- Type: `Function`
-- Parameter: `String`
+-   Type: `Function`
+-   Parameter: `String`
 
-Set video quality address, similar to `art.switchUrl`, but it will carry over the previous playback progress.
+Sets the video quality URL. Similar to `art.switchUrl`, but preserves the previous playback progress.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -268,10 +273,10 @@ art.on('ready', () => {
 
 ## `muted`
 
-- Type: `Setter/Getter`
-- Parameter: `Boolean`
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
 
-Set and get whether the video is muted.
+Sets and gets whether the video is muted.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -293,7 +298,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-Set and get the current time of the video. Setting the time is similar to `seek`, but it does not trigger additional events.
+Sets and gets the current playback time of the video. Setting the time is similar to `seek`, but it does not trigger additional events.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -309,11 +314,12 @@ art.on('ready', () => {
     console.info(art.currentTime);
 });
 ```
+
 ## `duration`
 
 -   Type: `Getter`
 
-Get the video duration
+Gets the duration of the video.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -330,7 +336,7 @@ art.on('ready', () => {
 
 :::warning Note
 
-Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be `0`
+Some videos may not have a duration, such as live streams or videos that haven't finished decoding. In these cases, the obtained duration will be `0`.
 
 :::
 
@@ -338,7 +344,7 @@ Some videos do not have a duration, such as videos that are being live streamed
 
 -   Type: `Function`
 
-Download a screenshot of the current video frame, optional parameter is the screenshot name
+Downloads a screenshot of the current video frame. An optional parameter specifies the screenshot filename.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -355,9 +361,9 @@ art.on('ready', () => {
 
 ## `getDataURL`
 
-- Type: `Function`
+-   Type: `Function`
 
-Gets the `base64` address of the screenshot of the current video frame, which returns a `Promise`.
+Gets the `base64` URL of the screenshot for the current video frame. Returns a `Promise`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -375,9 +381,9 @@ art.on('ready', async () => {
 
 ## `getBlobUrl`
 
-- Type: `Function`
+-   Type: `Function`
 
-Gets the `blob` address of the screenshot of the current video frame, which returns a `Promise`.
+Gets the `blob` URL of the screenshot for the current video frame. Returns a `Promise`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -392,12 +398,13 @@ art.on('ready', async () => {
     console.info(url);
 });
 ```
+
 ## `fullscreen`
 
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Set and get the player window fullscreen
+Sets and gets the fullscreen state of the player window.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -419,15 +426,16 @@ var art = new Artplayer({
 
 :::warning Note
 
-Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).
+Due to browser security mechanisms, the page must have prior interaction (e.g., the user has clicked on the page) before triggering window fullscreen.
 
 :::
+
 ## `fullscreenWeb`
 
-- Type: `Setter/Getter`
-- Parameter: `Boolean`
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
 
-Set and get the player web page full screen
+Sets and gets the web fullscreen state of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -449,10 +457,10 @@ art.on('ready', () => {
 
 ## `pip`
 
-- Type: `Setter/Getter`
-- Parameter: `Boolean`
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
 
-Set and get the player picture-in-picture mode
+Sets and gets the Picture-in-Picture mode of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -470,11 +478,10 @@ var art = new Artplayer({
         },
     ],
 });
-```
 
-:::warning Warning
+:::warning Note
 
-Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.
+Due to browser security mechanisms, the page must have prior user interaction (e.g., a user click) before Picture-in-Picture can be triggered.
 
 :::
 
@@ -483,7 +490,7 @@ Due to browser security mechanisms, user interaction (e.g., a user click on the
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Set and get the video poster, the poster effect is visible only before the video starts playing.
+Sets and gets the video poster. The poster is only visible before video playback starts.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -500,12 +507,13 @@ art.on('ready', () => {
     console.info(art.poster);
 });
 ```
+
 ## `mini`
 
-- Type: `Setter/Getter`
-- Parameter: `Boolean`
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
 
-Set and get the player's mini mode
+Sets and gets the player's mini mode.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -522,10 +530,10 @@ art.on('ready', () => {
 
 ## `playing`
 
-- Type: `Getter`
-- Parameter: `Boolean`
+-   Type: `Getter`
+-   Parameter: `Boolean`
 
-Get whether the video is currently playing
+Gets whether the video is currently playing.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -540,11 +548,12 @@ art.on('ready', () => {
     console.info(art.playing);
 });
 ```
+
 ## `autoSize`
 
 -   Type: `Function`
 
-Sets whether the video should auto adjust its size
+Sets whether the video should automatically adjust its size.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -563,7 +572,7 @@ art.on('ready', () => {
 
 -   Type: `Getter`
 
-Gets the size and position information of the player
+Gets the player's dimensions and coordinate information.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -577,9 +586,10 @@ art.on('ready', () => {
     console.info(JSON.stringify(art.rect));
 });
 ```
-:::warning Warning
 
-The size and coordinates are obtained via `getBoundingClientRect`
+:::warning Note
+
+The dimension and coordinate information is obtained via `getBoundingClientRect`.
 
 :::
 
@@ -588,7 +598,7 @@ The size and coordinates are obtained via `getBoundingClientRect`
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Set and get the player flip, supports `normal`, `horizontal`, `vertical`
+Sets and gets the player flip mode. Supports `normal`, `horizontal`, `vertical`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -609,7 +619,8 @@ art.on('ready', () => {
 
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
-Set and get the playback speed of the player
+
+Sets and gets the player's playback speed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -631,7 +642,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Set and get the aspect ratio of the player
+Sets and gets the player's aspect ratio.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -647,11 +658,12 @@ art.on('ready', () => {
     console.info(art.aspectRatio);
 });
 ```
+
 ## `autoHeight`
 
 -   Type: `Function`
 
-When the container has only width, this attribute can automatically calculate and set the height of the video
+When the container only has a defined width, this property can automatically calculate and set the video's height.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -670,9 +682,9 @@ art.on('resize', () => {
 });
 ```
 
-:::warning Warning
+:::warning Note
 
-When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.
+This property is useful when your container has a defined width but an unknown height, as it automatically calculates the video's height. However, you need to determine the appropriate timing to set this property.
 
 :::
 
@@ -681,7 +693,7 @@ When your container has only width but you do not know the exact height, this pr
 -   Type: `Function`
 -   Parameter: `String`
 
-Dynamically get and set the attributes of the video element
+Dynamically gets and sets attributes of the video element.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -700,10 +712,10 @@ art.on('ready', () => {
 
 ## `type`
 
-- Type: `Setter/Getter`
-- Parameter: `String`
+-   Type: `Setter/Getter`
+-   Parameter: `String`
 
-Dynamically get and set the video type
+Dynamically gets and sets the video type.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -718,13 +730,13 @@ art.on('ready', () => {
     art.type = 'm3u8';
     console.info(art.type);
 });
-```
+
 ## `theme`
 
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Dynamically get and set the player's theme color
+Dynamically gets and sets the player's theme color.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -745,7 +757,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-Activate airplay
+Initiates AirPlay.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -764,11 +776,12 @@ var art = new Artplayer({
     ],
 });
 ```
+
 ## `loaded`
 
-- Type: `Getter`
+-   Type: `Getter`
 
-The proportion of the video that is cached, ranging from `[0, 1]`, commonly used with the `video:timeupdate` event.
+The proportion of the video that has been buffered, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -785,9 +798,9 @@ art.on('video:timeupdate', () => {
 
 ## `played`
 
-- Type: `Getter`
+-   Type: `Getter`
 
-The proportion of the video that has been played, ranging from `[0, 1]`, commonly used with the `video:timeupdate` event.
+The proportion of the video that has been played, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -801,11 +814,12 @@ art.on('video:timeupdate', () => {
     console.info(art.played);
 });
 ```
+
 ## `proxy`
 
-- Type: `Function`
+-   Type: `Function`
 
-A proxy function for `DOM` events, which essentially proxies `addEventListener` and `removeEventListener`. When using `proxy` to handle events, the event will automatically be destroyed when the player is destroyed.
+A proxy function for DOM events, essentially proxying `addEventListener` and `removeEventListener`. When using `proxy` to handle events, the event will be automatically removed when the player is destroyed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -822,9 +836,9 @@ art.proxy(container, 'click', event => {
 });
 ```
 
-:::warning Tip
+:::warning Note
 
-If you need some `DOM` events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.
+If you need certain DOM events to exist only for the duration of the player's lifecycle, it is strongly recommended to use this function to avoid memory leaks.
 
 :::
 
@@ -832,7 +846,7 @@ If you need some `DOM` events to exist only during the lifespan of the player, i
 
 -   Type: `Function`
 
-DOM query function, similar to `document.querySelector`, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.
+A DOM query function, similar to `document.querySelector`, but the search is scoped to within the current player, preventing errors from duplicate class names.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -849,7 +863,7 @@ console.info(art.query('.art-video'));
 
 -   Type: `Element`
 
-A shortcut to return the `video` element of the player.
+Quickly returns the player's `video` element.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -866,7 +880,7 @@ console.info(art.video);
 
 -   Type: `Function`
 
-Dynamically getting or setting `css` variables
+Dynamically gets or sets CSS variables.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -888,7 +902,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Array`
 
-Dynamically setting the list of qualities
+Dynamically sets the list of available quality levels.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -931,7 +945,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Object`
 
-Dynamically set thumbnails
+Dynamically sets the thumbnails.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -970,5 +984,4 @@ var art = new Artplayer({
 
 art.on('ready', () => {
     art.subtitleOffset = 1;
-});
-```
+});