fix(docs): update language and formatting in documentation; remove danmuku plugin file

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

@@ -41,7 +41,7 @@ console.info(art.template.$video);
 
 :::warning Note
 
-To easily distinguish between `DOM` elements and regular objects, all `DOM` elements within the player are prefixed with `$`.
+To easily distinguish between `DOM` elements and regular objects, all `DOM` elements within the player are named with a `$` prefix.
 
 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)
 
@@ -77,7 +77,7 @@ art.events.hover(container, (event) => {
 
 :::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.
+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.
 
 :::
 
@@ -86,10 +86,10 @@ If you need `DOM` events that only exist for the duration of the player's lifecy
 Manages the player's local storage.
 
 - 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.
+- 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.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -151,7 +151,7 @@ console.info(art.icons.loading);
 
 Manages the player's `i18n`.
 
-- The `get` method is used to get the `i18n` value.
+- The `get` method is used to get an `i18n` value.
 - The `update` method is used to update the `i18n` object.
 
 <div className="run-code">▶ Run Code</div>
@@ -173,7 +173,7 @@ art.i18n.update({
 
 :::warning
 
-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.
+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.
 
 :::
 
@@ -229,7 +229,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning For `Component Configuration`, please refer to:
+:::warning Refer to the following address for `Component Configuration`:
 
 [/component/layers.html](/component/layers.html)
 
@@ -237,13 +237,14 @@ art.on('ready', () => {
 
 ## `controls`
 
-Manages the player's controls
+Manages the player's controls.
 
-- 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
+- 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
 
 <div className="run-code">▶ Run Code</div>
 
@@ -275,11 +276,11 @@ art.on('ready', () => {
 
 Manages the player's context menu
 
-- 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
+- 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
 
 <div className="run-code">▶ Run Code</div>
 
@@ -312,11 +313,11 @@ art.on('ready', () => {
 Manages the player's subtitle functionality
 
 - The `url` property sets and returns the current subtitle URL
-- The `style` method sets the current subtitle's style
+- 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 complete list of cues
+- `cues` gets the overall list of cues
 
 <div className="run-code">▶ Run Code</div>
 
@@ -334,12 +335,36 @@ art.on('ready', () => {
 });
 ```
 
+## `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.
+
+- Control the panel's visibility via `art.info.show`
+- The triggered event is named `info` (see the event documentation for details)
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.info.show = true;
+
+    setTimeout(() => {
+        art.info.show = false;
+    }, 3000);
+});
+```
+
 ## `loading`
 
 Manages the player's loading layer
 
-- The `show` property sets whether to display the loading layer
-- The `toggle` property toggles the visibility of the 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
 
 <div className="run-code">▶ Run Code</div>
 
@@ -361,8 +386,8 @@ art.on('ready', () => {
 
 Manages the player's hotkey functionality
 
-- The `add` method adds hotkeys
-- The `remove` method removes hotkeys
+- The `add` method is used to add hotkeys
+- The `remove` method is used to remove hotkeys
 
 <div className="run-code">▶ Run Code</div>
 
@@ -386,7 +411,7 @@ art.on('ready', () => {
 
 :::warning Note
 
-These hotkeys only take effect when the player has focus (e.g., after clicking on the player)
+These hotkeys only take effect after the player gains focus (e.g., after clicking on the player)
 
 :::
 
@@ -394,8 +419,8 @@ These hotkeys only take effect when the player has focus (e.g., after clicking o
 
 Manages the player's mask layer
 
-- The `show` property sets whether to display the mask layer
-- The `toggle` property toggles the visibility of the 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
 
 <div className="run-code">▶ Run Code</div>
 
@@ -417,11 +442,11 @@ art.on('ready', () => {
 
 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
+- 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
 
 <div className="run-code">▶ Run Code</div>
 
@@ -444,7 +469,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning For `Settings Panel`, please refer to:
+:::warning For the `Settings Panel`, please refer to:
 
 [/component/setting.html](/component/setting.html)
 
@@ -452,7 +477,7 @@ art.on('ready', () => {
 
 ## `plugins`
 
-Manages the player's plugin functionality, with only one method `add` for dynamically adding plugins
+Manages the player's plugin functionality, with only the `add` method for dynamically adding plugins
 
 <div className="run-code">▶ Run Code</div>
 

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

@@ -1,6 +1,6 @@
 # Static Properties
 
-Static properties here refer to first-level properties mounted on the constructor, which are rarely used.
+Here, `Static Properties` refer to the `top-level properties` mounted on the `constructor function`, which are very rarely used.
 
 ## `instances`
 
@@ -41,7 +41,7 @@ console.info(Artplayer.env);
 
 ## `build`
 
-Returns the build timestamp of the player.
+Returns the build time of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -69,7 +69,7 @@ Returns the collection of utility functions for the player.
 console.info(Artplayer.utils);
 ```
 
-:::warning For all utility functions, please refer to:
+:::warning For all utility functions, please refer to the following address:
 
 [artplayer/types/utils.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts)
 
@@ -87,7 +87,7 @@ console.info(Artplayer.scheme);
 
 ## `Emitter`
 
-Returns the constructor for the event emitter.
+Returns the constructor function for the event emitter.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -107,7 +107,7 @@ console.info(Artplayer.validator);
 
 ## `kindOf`
 
-Returns the type detection utility function.
+Returns the utility function for type detection.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -117,7 +117,7 @@ console.info(Artplayer.kindOf);
 
 ## `html`
 
-Returns the HTML string required by the player.
+Returns the `html` string required by the player.
 
 <div className="run-code">▶ Run Code</div>
 

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

@@ -1,8 +1,8 @@
 # Instance Events
 
-Player events are divided into two types: `native events` from the video (prefixed with `video:`) and `custom events`.
+Player events are divided into two types: `native events` (prefixed with `video:`) and `custom events`.
 
-Listen for events:
+Listen to an event:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,7 +17,7 @@ art.on('video:canplay', () => {
 });
 ```
 
-Listen for an event only once:
+Listen to an event only once:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -45,7 +45,7 @@ var art = new Artplayer({
 art.emit('focus');
 ```
 
-Remove an event:
+Remove an event listener:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -63,7 +63,7 @@ const onReady = () => {
 art.on('ready', onReady);
 ```
 
-:::warning For all events, please refer to the following address:
+:::warning For a complete list of events, please refer to:
 
 [artplayer/types/events.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts)
 
@@ -88,7 +88,7 @@ art.on('ready', () => {
 
 ## `restart`
 
-Triggered when the player switches URL and is ready to play
+Triggered when the player switches URL and becomes playable
 
 <div className="run-code">▶ Run Code</div>
 
@@ -143,7 +143,7 @@ art.on('play', () => {
 
 ## `hotkey`
 
-Triggered when a player hotkey is pressed
+Triggered when a hotkey is pressed on the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -249,7 +249,7 @@ art.on('click', (event) => {
 
 ## `error`
 
-Triggered when an error occurs while the player is loading a video
+Triggered when an error occurs while loading the video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -262,11 +262,10 @@ var art = new Artplayer({
 art.on('error', (error, reconnectTime) => {
     console.info(error, reconnectTime);
 });
-```
 
 ## `hover`
 
-Triggered when the mouse pointer enters or leaves the player
+Triggered when the mouse enters or leaves the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -283,7 +282,7 @@ art.on('hover', (state, event) => {
 
 ## `mousemove`
 
-Triggered when the mouse pointer moves over the player
+Triggered when the mouse moves over the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -371,7 +370,7 @@ art.on('aspectRatio', (aspectRatio) => {
 
 ## `autoHeight`
 
-Triggered when the player automatically sets its height
+Triggered when the player automatically adjusts its height
 
 <div className="run-code">▶ Run Code</div>
 
@@ -410,7 +409,7 @@ art.on('autoSize', () => {
 
 ## `flip`
 
-Triggered when the player's video is flipped
+Triggered when the player is flipped
 
 <div className="run-code">▶ Run Code</div>
 
@@ -429,7 +428,7 @@ art.on('flip', (flip) => {
 
 ## `fullscreen`
 
-Triggered when the player enters or exits fullscreen mode
+Triggered when the player enters or exits window fullscreen mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -447,7 +446,7 @@ art.on('fullscreen', (state) => {
 
 ## `fullscreenError`
 
-Triggered when an error occurs during fullscreen mode transition
+Triggered when a window fullscreen error occurs
 
 <div className="run-code">▶ Run Code</div>
 
@@ -468,7 +467,7 @@ art.on('fullscreenError', (event) => {
 
 ## `fullscreenWeb`
 
-Triggered when the player enters or exits web page fullscreen mode
+Triggered when the player enters or exits web fullscreen mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -521,7 +520,6 @@ var art = new Artplayer({
 art.on('pip', (state) => {
     console.info('pip', state);
 });
-```
 
 ## `screenshot`
 
@@ -543,7 +541,7 @@ art.on('screenshot', (dataUri) => {
 
 ## `seek`
 
-Triggered when the player performs a time jump
+Triggered when the player performs a time seek
 
 <div className="run-code">▶ Run Code</div>
 
@@ -560,7 +558,7 @@ art.on('seek', (currentTime) => {
 
 ## `subtitleOffset`
 
-Triggered when subtitle offset changes
+Triggered when subtitle offset changes in the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -676,7 +674,7 @@ art.on('layer', (state) => {
 
 ## `loading`
 
-Triggered when the loading indicator is shown or hidden
+Triggered when the loader is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -775,11 +773,10 @@ var art = new Artplayer({
 art.on('setting', (state) => {
     console.log(state);
 });
-```
 
 ## `muted`
 
-Triggered when the muted state changes
+Triggered when the mute state changes
 
 <div className="run-code">▶ Run Code</div>
 
@@ -796,7 +793,7 @@ art.on('muted', (state) => {
 
 ## `keydown`
 
-Listens for the `keydown` event from `document`
+Listens for `keydown` events from the `document`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -813,11 +810,11 @@ art.on('keydown', (event) => {
 
 ## `video:canplay`
 
-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
+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
 
 ## `video:canplaythrough`
 
-The browser estimates it can play the media through to the end without having to stop for buffering
+The browser estimates it can play the media through to the end without stopping to buffer content
 
 ## `video:complete`
 
@@ -837,7 +834,7 @@ Playback has stopped because the media has reached its end point
 
 ## `video:error`
 
-An error occurred while fetching the media data, or the resource type is not a supported media format
+An error occurred while fetching media data, or the resource type is not a supported media format
 
 ## `video:loadeddata`
 
@@ -861,7 +858,7 @@ Playback is ready to start after having been paused or delayed due to lack of da
 
 ## `video:progress`
 
-Fired periodically as the browser loads the resource
+Periodically triggered while the browser is loading the resource
 
 ## `video:ratechange`
 
@@ -893,4 +890,4 @@ The volume has changed
 
 ## `video:waiting`
 
-Playback has stopped because of a temporary lack of data
+Playback has stopped due to temporary lack of data

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

@@ -1,10 +1,10 @@
 # Global Properties
 
-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.
+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.
 
 ## DEBUG
 
-Whether to enable `debug` mode, which can print all built-in video events. Default is off.
+Whether to enable `debug` mode, which can print all built-in events of the video. Default is off.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -19,7 +19,7 @@ var art = new Artplayer({
 
 ## STYLE
 
-Returns the player's style text.
+Returns the player style text.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -119,7 +119,7 @@ var art = new Artplayer({
 
 ## RESIZE_TIME
 
-The throttle time for `resize` events, in milliseconds. Default is `200`.
+The throttle time for the `resize` event, in milliseconds. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -138,7 +138,7 @@ art.on('resize', () => {
 
 ## SCROLL_TIME
 
-The throttle time for `scroll` events, in milliseconds. Default is `200`.
+The throttle time for the `scroll` event, in milliseconds. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -157,7 +157,7 @@ art.on('scroll', () => {
 
 ## SCROLL_GAP
 
-The boundary tolerance distance for `view` events, in pixels. Default is `50`.
+The boundary tolerance distance for the `view` event, in pixels. Default is `50`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -176,7 +176,7 @@ art.on('scroll', () => {
 
 ## AUTO_PLAYBACK_MAX
 
-The maximum number of records for the auto-playback feature. Default is `10`.
+The maximum record count for the auto-playback feature. Default is `10`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -239,7 +239,7 @@ var art = new Artplayer({
 
 ## RECONNECT_SLEEP_TIME
 
-The delay time for automatic reconnection 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>
 
@@ -250,11 +250,10 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/404.mp4',
 });
-```
 
 ## CONTROL_HIDE_TIME
 
-The delay time for auto-hiding the bottom control bar, in milliseconds. Default is `3000`
+The delay time in milliseconds for auto-hiding the bottom control bar. Default is `3000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -269,7 +268,7 @@ var art = new Artplayer({
 
 ## DBCLICK_TIME
 
-The delay time for double-click events, in milliseconds. Default is `300`
+The delay time in milliseconds for double-click events. Default is `300`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -288,7 +287,7 @@ art.on('dblclick', () => {
 
 ## DBCLICK_FULLSCREEN
 
-On desktop, whether to toggle fullscreen on double-click. Default is `true`
+On desktop, whether double-click toggles fullscreen mode. Default is `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -303,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 devices, whether double-click toggles play/pause. Default is `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -318,7 +317,7 @@ var art = new Artplayer({
 
 ## MOBILE_CLICK_PLAY
 
-On mobile, whether to toggle play/pause on single click. Default is `false`
+On mobile devices, whether single-click toggles play/pause. Default is `false`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -333,7 +332,7 @@ var art = new Artplayer({
 
 ## AUTO_ORIENTATION_TIME
 
-On mobile, the delay time for automatic screen rotation, in milliseconds. Default is `200`
+On mobile devices, the delay time in milliseconds for automatic screen rotation. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -349,7 +348,7 @@ var art = new Artplayer({
 
 ## INFO_LOOP_TIME
 
-The refresh interval for the information panel, in milliseconds. Default is `1000`
+The refresh interval in milliseconds for the information panel. Default is `1000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -366,7 +365,7 @@ art.info.show = true;
 
 ## FAST_FORWARD_VALUE
 
-On mobile, the speed multiplier for fast-forward during long press. Default is `3`
+On mobile devices, the speed multiplier for fast-forward during long-press. Default is `3`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -382,7 +381,7 @@ var art = new Artplayer({
 
 ## FAST_FORWARD_TIME
 
-On mobile, the delay time for fast-forward during long press, in milliseconds. Default is `1000`
+On mobile devices, the delay time in milliseconds for activating fast-forward during long-press. Default is `1000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -398,7 +397,7 @@ var art = new Artplayer({
 
 ## TOUCH_MOVE_RATIO
 
-On mobile, the speed multiplier for progress seeking during left/right swipe. Default is `0.5`
+On mobile devices, the speed multiplier for seeking when swiping left/right. Default is `0.5`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -413,7 +412,7 @@ var art = new Artplayer({
 
 ## VOLUME_STEP
 
-The volume adjustment step for keyboard shortcuts. Default is `0.1`
+The volume adjustment step for keyboard shortcuts. Default is `0.1`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -428,7 +427,7 @@ var art = new Artplayer({
 
 ## SEEK_STEP
 
-The seek adjustment step for keyboard shortcuts, in seconds. Default is `5`
+The seeking step in seconds for keyboard shortcuts. Default is `5`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -443,7 +442,7 @@ var art = new Artplayer({
 
 ## PLAYBACK_RATE
 
-The built-in playback rate options list. Default is `[0.5, 0.75, 1, 1.25, 1.5, 2]`
+The built-in list of playback rates. Default is `[0.5, 0.75, 1, 1.25, 1.5, 2]`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -463,7 +462,7 @@ art.setting.show = true;
 
 ## ASPECT_RATIO
 
-The built-in video aspect ratio options list. Default is `['default', '4:3', '16:9']`
+The built-in list of video aspect ratios. Default is `['default', '4:3', '16:9']`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -483,7 +482,7 @@ art.setting.show = true;
 
 ## FLIP
 
-List of built-in video flip options, defaults to `['normal', 'horizontal', 'vertical']`
+The built-in list of video flip modes. Default is `['normal', 'horizontal', 'vertical']`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -499,11 +498,10 @@ var art = new Artplayer({
 
 art.contextmenu.show = true;
 art.setting.show = true;
-```
 
 ## FULLSCREEN_WEB_IN_BODY
 
-Whether to mount the player under the `body` element during web fullscreen mode, defaults to `true`
+Determines whether to mount the player under the `body` element during web fullscreen mode. Defaults to `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -519,7 +517,7 @@ var art = new Artplayer({
 
 ## LOG_VERSION
 
-Sets whether to print the player version, defaults to `true`
+Sets whether to print the player version. Defaults to `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -534,7 +532,7 @@ var art = new Artplayer({
 
 ## USE_RAF
 
-Sets whether to use `requestAnimationFrame`, defaults to `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>
 
@@ -545,4 +543,24 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     miniProgressBar: true,
-});
+});
+```
+
+## REMOVE_SRC_WHEN_DESTROY
+
+Determines whether to remove the video's `src` attribute and call `load()` to actively release media resources when destroying the player. Defaults to `true`.
+
+When enabled, this can reduce video resource usage in single-page applications or scenarios where players are frequently created/destroyed. If you wish to preserve the video element's state and only remove the UI, set this to `false`.
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+Artplayer.REMOVE_SRC_WHEN_DESTROY = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+// Only destroys the UI, does not actively clear src
+art.destroy();

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

@@ -1,6 +1,6 @@
 # Writing Plugins
 
-Once you're familiar with the player's `properties`, `methods`, and `events`, writing plugins becomes very straightforward.
+Once you are familiar with the player's `properties`, `methods`, and `events`, writing plugins becomes very straightforward.
 
 You can load plugin functions during instantiation:
 

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

@@ -1,6 +1,6 @@
 # Instance Properties
 
-Here, `instance properties` refer to the `top-level properties` mounted on the `instance`, which are commonly used.
+Here, `Instance Properties` refer to the `first-level properties` mounted on the `instance`, which are commonly used.
 
 ## `play`
 
@@ -50,7 +50,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-Toggle between playing and pausing the video.
+Toggle video playback and pause.
 
 <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 also remove the player's `html` after destruction. Defaults to `true`.
+Destroy the player. Accepts a parameter indicating whether to remove the player's `html` after destruction. Defaults to `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -90,6 +90,28 @@ art.on('ready', () => {
 });
 ```
 
+## `reset`
+
+-   Type: `Function`
+
+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.
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    // Only reset the video, do not remove the interface
+    art.reset();
+});
+```
+
 ## `seek`
 
 -   Type: `Setter`
@@ -115,7 +137,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Number`
 
-Fast forward the video by a specified number of seconds.
+Fast forward the video time, in seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -135,7 +157,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Number`
 
-Rewind the video by a specified number of seconds.
+Rewind the video time, in seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -159,7 +181,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-Set or get the video volume. Range: `[0, 1]`.
+Set and get the video volume, range: `[0, 1]`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -181,7 +203,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Set or get the video URL.
+Set and get the video URL.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -240,11 +262,10 @@ art.on('ready', () => {
         art.switchUrl('/assets/sample/video.mp4?t=0');
     }, 3000);
 });
-```
 
 :::warning Note
 
-`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.
+`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.
 
 :::
 
@@ -253,7 +274,7 @@ art.on('ready', () => {
 -   Type: `Function`
 -   Parameter: `String`
 
-Sets the video quality URL. Similar to `art.switchUrl`, but preserves the previous playback progress.
+Sets the video quality URL. Similar to `art.switchUrl`, but retains the previous playback progress.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -336,7 +357,7 @@ art.on('ready', () => {
 
 :::warning Note
 
-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`.
+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`.
 
 :::
 
@@ -363,7 +384,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-Gets the `base64` URL of the screenshot for the current video frame. Returns a `Promise`.
+Gets the `base64` URL of a screenshot of the current video frame. Returns a `Promise`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -375,7 +396,7 @@ var art = new Artplayer({
 
 art.on('ready', async () => {
     const url = await art.getDataURL();
-    console.info(url)
+	console.info(url)
 });
 ```
 
@@ -383,7 +404,7 @@ art.on('ready', async () => {
 
 -   Type: `Function`
 
-Gets the `blob` URL of the screenshot for the current video frame. Returns a `Promise`.
+Gets the `blob` URL of a screenshot of the current video frame. Returns a `Promise`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -404,7 +425,7 @@ art.on('ready', async () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Sets and gets the fullscreen state of the player window.
+Sets and gets the player's window fullscreen state.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -426,7 +447,7 @@ var art = new Artplayer({
 
 :::warning Note
 
-Due to browser security mechanisms, the page must have prior interaction (e.g., the user has clicked on the page) before triggering window fullscreen.
+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.
 
 :::
 
@@ -435,7 +456,7 @@ Due to browser security mechanisms, the page must have prior interaction (e.g.,
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Sets and gets the web fullscreen state of the player.
+Sets and gets the player's web page fullscreen state.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -460,7 +481,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Sets and gets the Picture-in-Picture mode of the player.
+Sets and gets the player's Picture-in-Picture mode.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -482,7 +503,7 @@ var art = new Artplayer({
 
 :::warning Note
 
-Due to browser security mechanisms, the page must have prior user interaction (e.g., a user click) before Picture-in-Picture can be triggered.
+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.
 
 :::
 
@@ -491,7 +512,7 @@ Due to browser security mechanisms, the page must have prior user interaction (e
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Sets and gets the video poster. The poster is only visible before video playback starts.
+Sets and gets the video poster. The poster effect is only visible before video playback starts.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -550,11 +571,32 @@ art.on('ready', () => {
 });
 ```
 
+## `state`
+
+-   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` (fullscreen window), `fullscreenWeb` (webpage fullscreen).
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.state); // Default: standard
+    art.state = 'mini';
+});
+```
+
 ## `autoSize`
 
 -   Type: `Function`
 
-Sets whether the video should automatically adjust its size.
+Sets whether the video adapts its size automatically.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -594,12 +636,34 @@ The dimension and coordinate information is obtained via `getBoundingClientRect`
 
 :::
 
+## `bottom` / `top` / `left` / `right` / `x` / `y` / `width` / `height`
+
+-   Type: `Getter`
+
+These properties provide shortcut 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
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.width, art.height, art.left, art.top);
+});
+```
+
 ## `flip`
 
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Sets and gets the player flip mode. Supports `normal`, `horizontal`, `vertical`.
+Sets and gets the player flip state. Supported values: `normal`, `horizontal`, `vertical`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -621,7 +685,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-Sets and gets the player's playback speed.
+Sets and gets the player's playback rate.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -664,7 +728,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-When the container only has a defined width, this property can automatically calculate and set the video's height.
+When the container only has a defined width, this property can automatically calculate and set the video height.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -685,7 +749,7 @@ art.on('resize', () => {
 
 :::warning Note
 
-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.
+This property is useful when your container has only a defined width but an unknown height. It automatically calculates the video height, but you need to determine the appropriate timing to set this property.
 
 :::
 
@@ -731,6 +795,7 @@ art.on('ready', () => {
     art.type = 'm3u8';
     console.info(art.type);
 });
+```
 
 ## `theme`
 
@@ -797,6 +862,25 @@ art.on('video:timeupdate', () => {
 });
 ```
 
+## `loadedTime`
+
+-   Type: `Getter`
+
+The amount of media that has been buffered, in seconds. Typically used alongside `loaded` to display detailed buffering progress.
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.loadedTime);
+});
+```
+
 ## `played`
 
 -   Type: `Getter`
@@ -820,7 +904,7 @@ art.on('video:timeupdate', () => {
 
 -   Type: `Function`
 
-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.
+A proxy function for `DOM` events, essentially proxying `addEventListener` and `removeEventListener`. When using `proxy` to handle events, the event is automatically removed when the player is destroyed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -839,7 +923,7 @@ art.proxy(container, 'click', event => {
 
 :::warning Note
 
-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.
+If you need `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.
 
 :::
 
@@ -847,7 +931,7 @@ If you need certain DOM events to exist only for the duration of the player's li
 
 -   Type: `Function`
 
-A DOM query function, similar to `document.querySelector`, but the search is scoped to within the current player, preventing errors from duplicate class names.
+A `DOM` query function, similar to `document.querySelector`, but the search is scoped to the current player instance, preventing errors from duplicate class names.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -939,14 +1023,13 @@ art.on('ready', () => {
 		];
 	}, 3000);
 })
-```
 
 ## `thumbnails`
 
 -   Type: `Setter/Getter`
 -   Parameter: `Object`
 
-Dynamically sets the thumbnails.
+Dynamically set thumbnails
 
 <div className="run-code">▶ Run Code</div>
 

packages/artplayer-vitepress/docs/en/component/controls.md

@@ -1,18 +1,18 @@
-# Controllers
+# Controls
 
 ## Configuration
 
 | Property    | Type                | Description                                      |
 | ----------- | ------------------- | ------------------------------------------------ |
-| `disable`   | `Boolean`           | Whether to disable the component                 |
-| `name`      | `String`            | Unique component name for CSS class identification |
-| `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 mounting               |
-| `tooltip`   | `String`            | Component tooltip text                           |
-| `position`  | `String`            | `left` and `right` control controller placement  |
+| `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 |
 
@@ -67,7 +67,7 @@ console.info(art.controls['your-button']);
 console.info(art.controls['subtitle']);
 ```
 
-## Addition
+## Adding
 
 <div className="run-code">▶ Run Code</div>
 
@@ -128,7 +128,7 @@ art.on('ready', () => {
 });
 ```
 
-## Update
+## Updating
 
 <div className="run-code">▶ Run Code</div>
 

packages/artplayer-vitepress/docs/en/component/layers.md

@@ -1,16 +1,16 @@
-# Business Layer
+# Layer
 
 ## Configuration
 
 | Property  | Type                | Description                          |
 | --------- | ------------------- | ------------------------------------ |
 | `disable` | `Boolean`           | Whether to disable the component     |
-| `name`    | `String`            | Unique component name for class marking |
+| `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 mounting   |
+| `mounted` | `Function`          | Triggered after component mount      |
 | `tooltip` | `String`            | Component tooltip text               |
 
 ## Creation

packages/artplayer-vitepress/docs/en/component/setting.md

@@ -18,15 +18,15 @@ var art = new Artplayer({
 });
 ```
 
-## Create - Button
+## Creating - Buttons
 
-| Property   | Type                | Description          |
-| ---------- | ------------------- | -------------------- |
-| `html`     | `String`, `Element` | Element DOM          |
-| `icon`     | `String`, `Element` | Element icon         |
+| 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         |
+| `width`   | `Number`            | List width           |
+| `tooltip` | `String`            | Tooltip text         |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -49,16 +49,16 @@ var art = new Artplayer({
 });
 ```
 
-## Create - Selector List
+## Creating - Selection Lists
 
-| 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         |
+| 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         |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -118,7 +118,7 @@ var art = new Artplayer({
 });
 ```
 
-## Create - Nested List
+## Creating - Nested Lists
 
 <div className="run-code">▶ Run Code</div>
 

packages/artplayer-vitepress/docs/en/index.md

@@ -22,7 +22,7 @@ pnpm add artplayer
 
 :::
 
-## CDN
+## `CDN`
 
 ::: code-group
 
@@ -69,17 +69,17 @@ https://unpkg.com/artplayer/dist/artplayer.js
 
 ::: warning Note
 
-The player's dimensions depend on the size of its `container`, so your container must have defined dimensions
+The player's dimensions depend on the size of its container `container`, so your container must have defined dimensions.
 
 :::
 
-::: tip See more usage examples at the following link
+::: tip See more usage examples at the following link:
 
 [/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
 
 :::
 
-## Vue.js
+## `Vue.js`
 
 ::: code-group
 
@@ -147,11 +147,11 @@ function getInstance(art) {
 
 ::: warning Artplayer is not reactive:
 
-Directly modifying `option` in `Vue.js` will not update the player
+Directly modifying `option` in `Vue.js` will not update the player.
 
 :::
 
-## React.js
+## `React.js`
 
 ::: code-group
 
@@ -207,13 +207,13 @@ export default App
 
 ::: warning Artplayer is not reactive:
 
-Directly modifying `option` in `React.js` will not update the player
+Directly modifying `option` in `React.js` will not update the player.
 
 :::
 
 ## TypeScript
 
-The `artplayer.d.ts` file is automatically imported when importing `Artplayer`
+`artplayer.d.ts` is automatically imported when importing `Artplayer`.
 
 ### Vue.js
 
@@ -235,7 +235,7 @@ art.current = new Artplayer();
 
 ### Option
 
-You can also use the option type
+You can also use the option type.
 
 ```ts{3}
 import Artplayer, { type Option } from 'artplayer';
@@ -250,7 +250,7 @@ option.volume = 0.5;
 const art = new Artplayer(option);
 ```
 
-::: tip All TypeScript Definitions
+::: tip Full TypeScript definitions
 
 [packages/artplayer/types](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer/types)
 
@@ -258,7 +258,7 @@ const art = new Artplayer(option);
 
 ## JavaScript
 
-Sometimes your `js` files may lose `TypeScript` type hints. In such cases, you can manually import the types.
+Sometimes your `js` files may lose TypeScript type hints. In such cases, you can manually import the types.
 
 Variable:
 
@@ -314,9 +314,9 @@ const art8 = new Artplayer(option);
 
 ## Legacy Browsers
 
-The production build `artplayer.js` only supports the latest major version of `Chrome`: `last 1 Chrome version`.
+The production build `artplayer.js` only supports the latest major version of `Chrome`: `last 1 Chrome version`
 
-For legacy browsers, you can use the `artplayer.legacy.js` file, which supports compatibility down to: `IE 11`.
+For legacy browsers, you can use the `artplayer.legacy.js` file, which supports compatibility down to: `IE 11`
 
 ```js
 import Artplayer from 'artplayer/legacy'
@@ -336,9 +336,9 @@ https://unpkg.com/artplayer/dist/artplayer.legacy.js
 
 ::: tip If you need to support even older browsers, modify the following configuration and build it yourself:
 
-Build Configuration: [scripts/build.js](https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29)
+Build configuration: [scripts/build.js](https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29)
 
-Reference Documentation: [browserslist](https://github.com/browserslist/browserslist#full-list)
+Reference documentation: [browserslist](https://github.com/browserslist/browserslist#full-list)
 
 :::
 
@@ -396,7 +396,7 @@ Starting from `5.2.6`, `artplayer` and all plugins also provide an `ESM` version
 
 ## Custom userAgent
 
-Currently, the detection for whether a device is mobile is not entirely accurate. Sometimes you may want to adjust the player's UI by changing the `userAgent`. Therefore, starting from `5.2.4`, a `globalThis.CUSTOM_USER_AGENT` global variable has been added.
+Currently, the detection for whether a device is mobile is not entirely accurate. Sometimes you may want to adjust the player's UI by changing the `userAgent`. Therefore, starting from `5.2.4`, a new global variable `globalThis.CUSTOM_USER_AGENT` has been added.
 
 ```html
 <html>

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

@@ -1,555 +0,0 @@
-# Danmaku Library
-
-## Demo
-
-👉 [View Full Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
-
-## Installation
-
-::: code-group
-
-```bash [npm]
-npm install artplayer-plugin-danmuku
-```
-
-```bash [yarn]
-yarn add artplayer-plugin-danmuku
-```
-
-```bash [pnpm]
-pnpm add artplayer-plugin-danmuku
-```
-
-```html [script]
-<script src="path/to/artplayer-plugin-danmuku.js"></script>
-```
-
-:::
-
-## CDN
-
-::: code-group
-
-```bash [jsdelivr.net]
-https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
-```
-
-```bash [unpkg.com]
-https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
-```
-
-:::
-
-## Danmaku Structure
-
-Each danmaku is an object, and an array of multiple danmaku objects forms the danmaku library. Typically, only `text` is required to send a danmaku, while the rest are optional parameters.
-
-```js
-{
-    text: '', // Danmaku text
-    time: 10, // Danmaku timestamp, defaults to current player time
-    mode: 0, // Danmaku mode: 0: scroll (default), 1: top, 2: bottom
-    color: '#FFFFFF', // Danmaku color, defaults to white
-    border: false, // Whether the danmaku has a border, defaults to false
-    style: {}, // Custom danmaku styles, defaults to an empty object
-}
-```
-
-## All Options
-
-Only `danmuku` is a required parameter; all others are optional.
-
-```js
-{
-    danmuku: [], // Danmaku data
-    speed: 5, // Danmaku duration, range [1 ~ 10]
-    margin: [10, '25%'], // Danmaku top and bottom margins, supports pixel values and percentages
-    opacity: 1, // Danmaku opacity, range [0 ~ 1]
-    color: '#FFFFFF', // Default danmaku color, can be overridden by individual danmaku items
-    mode: 0, // Default danmaku mode: 0: scroll, 1: top, 2: bottom
-    modes: [0, 1, 2], // Visible danmaku modes
-    fontSize: 25, // Danmaku font size, supports pixel values and percentages
-    antiOverlap: true, // Whether to prevent danmaku overlap
-    synchronousPlayback: false, // Whether to synchronize playback speed
-    mount: undefined, // Danmaku emitter mount point, defaults to the middle of the player control bar
-    heatmap: false, // Whether to enable the heatmap
-    width: 512, // When the player width is less than this value, the danmaku emitter is placed at the bottom of the player
-    points: [], // Heatmap data
-    filter: () => true, // Filter before danmaku loading, only supports boolean return values
-    beforeEmit: () => true, // Filter before danmaku emission, supports Promise return
-    beforeVisible: () => true, // Filter before danmaku display, supports Promise return
-    visible: true, // Whether the danmaku layer is visible
-    emitter: true, // Whether to enable the danmaku emitter
-    maxLength: 200, // Maximum input length for the danmaku input box, range [1 ~ 1000]
-    lockTime: 5, // Input box lock time, range [1 ~ 60]
-    theme: 'dark', // Danmaku theme, supports 'dark' and 'light', only effective when custom mounted
-    OPACITY: {}, // Opacity configuration
-    FONT_SIZE: {}, // Font size configuration
-    MARGIN: {}, // Display area configuration
-    SPEED: {}, // Danmaku speed configuration
-    COLOR: [], // Color list configuration
-}
-```
-
-## Lifecycle
-
-For user-input danmaku:
-
-`beforeEmit -> filter -> beforeVisible -> artplayerPluginDanmuku:visible`
-
-For server-side danmaku:
-
-`filter -> beforeVisible -> artplayerPluginDanmuku:visible`
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-// Save to database
-function saveDanmu(danmu) {
-    return new Promise(resolve => {
-        setTimeout(() => {
-            resolve(true);
-        }, 1000);
-    })
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-
-            // This function is triggered when the user enters danmaku text in the input box and clicks the send button
-            // You can perform validation on the danmaku or save it to the database
-            // The danmaku is added to the queue only when true is returned
-            async beforeEmit(danmu) {
-               const isDirty = (/fuck/i).test(danmu.text);
-               if (isDirty) return false;
-               const state = await saveDanmu(danmu);
-               return state;
-            },
-
-            // This is a filter for all danmaku, including those from the server and user input
-            // You can perform validation on the danmaku
-            // The danmaku is added to the queue only when true is returned
-            filter(danmu) {
-                return danmu.text.length <= 200;
-            },
-
-            // This function is triggered when the danmaku is about to be displayed
-            // You can perform validation on the danmaku
-            // The danmaku is sent to the player only when true is returned
-            async beforeVisible(danmu) {
-               return true;
-            },
-        }),
-    ],
-});
-
-// The danmaku has appeared in the player, and you can access its DOM element
-art.on('artplayerPluginDanmuku:visible', danmu => {
-    danmu.$ref.innerHTML = 'ଘ(੭ˊᵕˋ)੭: ' + danmu.$ref.innerHTML;
-})
-```
-
-## Using Danmaku Array
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: [
-                {
-                    text: 'Using array',
-                    time: 1
-                },
-            ],
-        }),
-    ],
-});
-
-## Using Danmaku XML
-
-The danmaku XML file follows the same format as Bilibili's danmaku system
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-```
-
-## Using Asynchronous Returns
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: function () {
-                return new Promise((resovle) => {
-                    return resovle([
-                        {
-                            text: 'Using Promise for asynchronous return',
-                            time: 1
-                        },
-                    ]);
-                });
-            },
-        }),
-    ],
-});
-```
-
-## `hide/show`
-
-Use the `hide` and `show` methods to hide or display danmaku
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Hide Danmaku',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.hide();
-            },
-        },
-        {
-            position: 'right',
-            html: 'Show Danmaku',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.show();
-            },
-        },
-    ],
-});
-```
-
-## `isHide`
-
-Use the `isHide` property to determine if danmaku is currently hidden or displayed
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Hide Danmaku',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = 'Hide Danmaku';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = 'Show Danmaku';
-                }
-            },
-        },
-    ],
-});
-```
-
-## `emit`
-
-Use the `emit` method to send a real-time danmaku
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Send Danmaku',
-            click: function () {
-                var text = prompt('Please enter danmaku text', 'Danmaku test text');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});
-```
-
-## `config`
-
-Use the `config` method to dynamically change danmaku settings
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Danmaku Size：<input type="range" min="12" max="50" step="1" value="25">',
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-            },
-            mounted: function ($setting) {
-                const $range = $setting.querySelector('input[type=range]');
-                $range.addEventListener('change', () => {
-                    art.plugins.artplayerPluginDanmuku.config({
-                        fontSize: Number($range.value),
-                    });
-                });
-            },
-        },
-    ],
-});
-
-## `load`
-
-The `load` method can be used to reload the current danmaku library, switch to a new danmaku library, or append a new danmaku library.
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-            emitter: false,
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Reload',
-            click: function () {
-                // Reload the current danmaku library
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: 'Switch',
-            click: function () {
-                // Switch to a new danmaku library
-                art.plugins.artplayerPluginDanmuku.config({
-                    danmuku: '/assets/sample/danmuku-v2.xml',
-                });
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: 'Append',
-            click: function () {
-                // Append a new danmaku library (parameter type is the same as option.danmuku)
-                const target = '/assets/sample/danmuku.xml'
-                art.plugins.artplayerPluginDanmuku.load(target);
-            },
-        },
-    ],
-});
-```
-
-## `reset`
-
-Used to clear the currently displayed danmaku.
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('resize', () => {
-    art.plugins.artplayerPluginDanmuku.reset();
-});
-```
-
-## `mount`
-
-When initializing the danmaku plugin, you can specify the mount position for the danmaku emitter. By default, it is mounted in the center of the control bar. You can also mount it outside the player.
-
-When the player enters fullscreen mode, the emitter will automatically return to the center of the control bar. If the mounted location has a light background, it is recommended to set `theme` to `light` to ensure visibility.
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var $danmu = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginDanmuku({
-			mount: $danmu,
-            theme: 'dark',
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-// Can also be mounted manually
-// art.plugins.artplayerPluginDanmuku.mount($danmu);
-```
-
-## `option`
-
-Used to get the current danmaku configuration.
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.artplayerPluginDanmuku.option);
-});
-```
-
-## Events
-
-<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
-    ▶ Run Code
-</div>
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('artplayerPluginDanmuku:visible', (danmu) => {
-    console.info('Danmaku visible', danmu);
-});
-
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('Danmaku loaded', danmus.length);
-});
-
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('Load error', error);
-});
-
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('Configuration changed', option);
-});
-
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('Danmaku stopped');
-});
-
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('Danmaku started');
-});
-
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('Danmaku hidden');
-});
-
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('Danmaku shown');
-});
-
-art.on('artplayerPluginDanmuku:reset', () => {
-    console.info('Danmaku reset');
-});
-
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('Danmaku destroyed');
-});

packages/artplayer-vitepress/docs/en/start/i18n.md

@@ -2,19 +2,19 @@
 
 ::: danger
 
-Due to the increasing number of bundled multi-language packs, starting from version `5.1.0`, the `artplayer.js` core code only includes `Simplified Chinese` and `English` by default. Other languages are no longer bundled and must be manually imported as needed.
+Due to the increasing number of bundled multilingual resources, starting from version `5.1.0`, the core `artplayer.js` code will only include `Simplified Chinese` and `English`. Other languages are no longer bundled by default and must be imported manually as needed.
 
 :::
 
 :::warning 
 
-When a language cannot be matched, English will be displayed by default. For i18n syntax reference, see: [artplayer/types/i18n.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/i18n.d.ts)
+When a language cannot be matched, English will be displayed by default. For i18n implementation reference, see: [artplayer/types/i18n.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/i18n.d.ts)
 
 :::
 
 ## Default Languages
 
-The default languages are: `en`, `zh-cn`, no manual import required
+The default languages are: `en`, `zh-cn`. No manual import is required.
 
 ```js{4}
 var art = new Artplayer({

packages/artplayer-vitepress/docs/en/start/option.md

@@ -11,7 +11,7 @@ The `DOM` container where the player is mounted.
 
 ```js{2}
 var art = new Artplayer({
-    container: '.artplayer-app',
+    container: '.artplayer-app', 
     // container: document.querySelector('.artplayer-app'),
     url: '/assets/sample/video.mp4',
 });
@@ -83,7 +83,7 @@ To play other formats like `.m3u8` or `.flv`, please refer to the `Third-party L
 -   Type: `String`
 -   Default: `''`
 
-The unique identifier for the player, currently only used for playback resumption (`autoplayback`).
+The unique identifier for the player, currently only used for playback resumption `autoplayback`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -100,7 +100,7 @@ var art = new Artplayer({
 -   Type: `Function`
 -   Default: `undefined`
 
-The constructor accepts a function as the second argument, which is triggered when the player is successfully initialized and the video is ready to play, similar to the `ready` event.
+The constructor accepts a function as the second parameter, which is triggered when the player is successfully initialized and the video is ready to play, similar to the `ready` event.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -216,7 +216,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to default to muted.
+Whether to mute by default.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -248,7 +248,7 @@ var art = new Artplayer({
 
 :::warning Note
 
-If you want the video to autoplay when entering the page by default, `muted` must be set to `true`. For more information, please read [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes).
+If you want the video to autoplay immediately upon page load, `muted` must be set to `true`. For more information, please read [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes).
 
 :::
 
@@ -257,7 +257,7 @@ If you want the video to autoplay when entering the page by default, `muted` mus
 -   Type: `Boolean`
 -   Default: `false`
 
-By default, the player's dimensions fill the entire `container`, which often results in black bars. This option automatically adjusts the player size to hide black bars, similar to `object-fit: cover;` in CSS.
+By default, the player's dimensions fill the entire `container` size, often resulting in black bars. This option automatically adjusts the player size to hide the black bars, similar to `object-fit: cover;` in CSS.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -267,14 +267,13 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     autoSize: true,
 });
-```
 
 ## `autoMini`
 
 -   Type: `Boolean`
 -   Default: `false`
 
-Automatically switches to `mini player` mode when the player scrolls outside the browser viewport.
+Automatically enters `mini player` mode when the player scrolls out of the browser viewport.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -326,7 +325,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display the playback rate functionality. Appears in the `Settings Panel` and `Context Menu`.
+Whether to display the video playback rate functionality. Appears in the `Settings Panel` and `Context Menu`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -344,7 +343,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display the aspect ratio functionality. Appears in the `Settings Panel` and `Context Menu`.
+Whether to display the video aspect ratio functionality. Appears in the `Settings Panel` and `Context Menu`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -362,7 +361,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display the `Screenshot` button in the bottom control bar.
+Whether to display the `Video Screenshot` functionality in the bottom control bar.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -376,7 +375,7 @@ var art = new Artplayer({
 
 :::warning Note
 
-Due to browser security mechanisms, screenshot capture may fail if the video source is cross-origin with the website.
+Due to browser security mechanisms, screenshot capture may fail if the video source URL is cross-origin with the website.
 
 :::
 
@@ -385,7 +384,7 @@ Due to browser security mechanisms, screenshot capture may fail if the video sou
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display the `Settings Panel` toggle button in the bottom control bar.
+Whether to display the toggle button for the `Settings Panel` in the bottom control bar.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -414,13 +413,13 @@ var art = new Artplayer({
 });
 ```
 
-| Hotkey  | Description               |
-| ------- | ------------------------- |
-| `↑`     | Increase volume           |
-| `↓`     | Decrease volume           |
-| `←`     | Seek backward             |
-| `→`     | Seek forward              |
-| `space` | Toggle play/pause         |
+| Hotkey  | Description          |
+| ------- | -------------------- |
+| `↑`     | Increase volume      |
+| `↓`     | Decrease volume      |
+| `←`     | Seek forward         |
+| `→`     | Seek backward        |
+| `space` | Toggle play/pause    |
 
 :::warning Note
 
@@ -450,7 +449,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `true`
 
-When multiple players exist on the page, whether only one player is allowed to play at a time.
+If multiple players exist simultaneously on the page, whether only one player is allowed to play at a time.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -462,12 +461,29 @@ var art = new Artplayer({
 });
 ```
 
+## `backdrop`
+
+-   Type: `Boolean`
+-   Default: `true`
+
+Whether to enable the backdrop blur effect for the player UI. When enabled, overlays such as the settings panel, context menu, and volume bar will apply a `backdrop-filter` frosted glass effect for a more transparent appearance. However, this may cause performance or compatibility issues on some low-performance devices or older browsers.
+
+<div className="run-code">▶ Run Code</div>
+
+```js{4}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    backdrop: false, // Disable frosted glass effect
+});
+```
+
 ## `fullscreen`
 
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display the `Fullscreen` button in the bottom control bar.
+Whether to display the player `Window Fullscreen` button in the bottom control bar.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -484,7 +500,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display the `Webpage Fullscreen` button in the bottom control bar.
+Whether to display the player `Webpage Fullscreen` button in the bottom control bar.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -501,7 +517,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Subtitle time offset, ranging from `[-5s, 5s]`, appears in the `Settings Panel`
+Subtitle timing offset, range within `[-5s, 5s]`. Appears in the `Settings Panel`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -515,14 +531,13 @@ var art = new Artplayer({
     },
     setting: true,
 });
-```
 
 ## `miniProgressBar`
 
 -   Type: `Boolean`
 -   Default: `false`
 
-Mini progress bar, appears only when the player loses focus and is playing
+Mini progress bar that appears only when the player loses focus and is playing.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -539,9 +554,9 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to use `SSR` mount mode. Useful if you want to pre-render the player's required `HTML` before the player is mounted.
+Whether to use SSR mount mode. Useful if you want to pre-render the player's required HTML before mounting.
 
-You can access the player's required `HTML` via `Artplayer.html`
+You can access the player's required HTML via `Artplayer.html`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -561,7 +576,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `true`
 
-Whether to use `playsInline` mode on mobile devices
+Whether to use `playsInline` mode on mobile devices.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -578,7 +593,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Initialize custom `layers`
+Initialize custom layers.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -620,7 +635,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Initialize custom `Settings Panel`
+Initialize custom settings panel.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -673,7 +688,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Initialize custom `Context Menu`
+Initialize custom context menu.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -695,7 +710,7 @@ var art = new Artplayer({
 
 :::warning For `Component Configuration`, please refer to:
 
-[/component/contextmenu.html](/component/contextmenu.html)-   Type:
+[/component/contextmenu.html](/component/contextmenu.html)
 
 :::
 
@@ -704,7 +719,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Initialize custom bottom `control bar`
+Initialize custom bottom control bar.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -726,9 +741,8 @@ var art = new Artplayer({
         },
     ],
 });
-```
 
-:::warning For `component configuration`, please refer to:
+:::warning For `Component Configuration`, please refer to:
 
 [/component/controls.html](/component/controls.html)
 
@@ -739,7 +753,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Whether to display the `quality selection` list in the bottom control bar
+Whether to display the `Quality Selection` list in the bottom control bar.
 
 | Property  | Type      | Description      |
 | --------- | --------- | ---------------- |
@@ -772,12 +786,12 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Display `highlight information` on the progress bar
+Display `Highlight Information` on the progress bar.
 
-| Property | Type     | Description                     |
-| -------- | -------- | ------------------------------- |
-| `time`   | `Number` | Highlight time (in seconds)     |
-| `text`   | `String` | Highlight text                  |
+| Property | Type     | Description                    |
+| -------- | -------- | ------------------------------ |
+| `time`   | `Number` | Highlight time (in seconds)    |
+| `text`   | `String` | Highlight text                 |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -815,7 +829,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Initialize custom `plugins`
+Initialize custom `plugins`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -843,16 +857,16 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-Set `thumbnails` on the progress bar
+Set `Preview Thumbnails` on the progress bar.
 
-| Property | Type     | Description           |
-| -------- | -------- | --------------------- |
-| `url`    | `String` | Thumbnail URL         |
-| `number` | `Number` | Number of thumbnails  |
-| `column` | `Number` | Number of columns     |
-| `width`  | `Number` | Thumbnail width       |
-| `height` | `Number` | Thumbnail height      |
-| `scale`  | `Number` | Thumbnail scale       |
+| Property | Type     | Description                |
+| -------- | -------- | -------------------------- |
+| `url`    | `String` | Thumbnail image URL        |
+| `number` | `Number` | Number of thumbnails       |
+| `column` | `Number` | Number of thumbnail columns|
+| `width`  | `Number` | Thumbnail width            |
+| `height` | `Number` | Thumbnail height           |
+| `scale`  | `Number` | Thumbnail scale            |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -868,7 +882,7 @@ var art = new Artplayer({
 });
 ```
 
-:::warning Generate thumbnails online
+:::warning Generate Thumbnails Online
 
 [artplayer-tool-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail)
 
@@ -879,17 +893,17 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-Set video subtitles, supported subtitle formats: `vtt`, `srt`, `ass`
+Set the video subtitle. Supported subtitle formats: `vtt`, `srt`, `ass`.
 
-| Property   | Type     | Description                                |
-| ---------- | -------- | ------------------------------------------ |
-| `name`     | `String` | Subtitle name                              |
-| `url`      | `String` | Subtitle URL                               |
-| `type`     | `String` | Subtitle type, options: `vtt`, `srt`, `ass` |
-| `style`     | `Object`   | Subtitle style                            |
-| `encoding`  | `String`   | Subtitle encoding, defaults to `utf-8`              |
-| `escape`    | `Boolean`  | Whether to escape `html` tags, defaults to `true` |
-| `onVttLoad` | `Function` | Function used to modify `vtt` text           |
+| Property    | Type       | Description                                      |
+| ----------- | ---------- | ------------------------------------------------ |
+| `name`      | `String`   | Subtitle name                                    |
+| `url`       | `String`   | Subtitle URL                                     |
+| `type`      | `String`   | Subtitle type, options: `vtt`, `srt`, `ass`      |
+| `style`     | `Object`   | Subtitle style                                   |
+| `encoding`  | `String`   | Subtitle encoding, default: `utf-8`              |
+| `escape`    | `Boolean`  | Whether to escape `html` tags, default: `true`   |
+| `onVttLoad` | `Function` | Function for modifying `vtt` text                |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -913,9 +927,9 @@ var art = new Artplayer({
 ## `moreVideoAttr`
 
 -   Type: `Object`
--   Default: `{'controls': false,'preload': 'metadata'}`
+-   Default: `{'controls': false, 'preload': 'metadata'}` (In Safari, it automatically adjusts to `preload: 'auto'` for better loading experience).
 
-More video attributes, these attributes will be directly written into the video element
+More video attributes. These attributes will be directly written into the video element.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -928,14 +942,13 @@ var art = new Artplayer({
         playsInline: true,
     },
 });
-```
 
 ## `icons`
 
 -   Type: `Object`
 -   Default: `{}`
 
-Used to replace default icons, supports `Html` string and `HTMLElement`
+Used to replace default icons, supports both `Html` strings and `HTMLElement`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -961,7 +974,7 @@ var art = new Artplayer({
 -   Type: `String`
 -   Default: `''`
 
-Used to specify the video format, needs to be used together with `customType`. The default video format is the suffix of the video URL (e.g., `.m3u8`, `.mkv`, `.ts`). However, sometimes the video URL does not have the correct suffix, so it needs to be explicitly specified.
+Used to specify the video format. It needs to be used in conjunction with `customType`. By default, the video format is determined by the suffix of the video URL (e.g., `.m3u8`, `.mkv`, `.ts`). However, sometimes the video URL lacks the correct suffix, so explicit specification is necessary.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -979,7 +992,7 @@ The player can only parse suffixes like this: `/assets/sample/video.m3u8`
 
 But cannot parse suffixes like this: `/assets/sample/video?type=m3u8`
 
-Therefore, if you use `customType`, it is best to also specify `type`.
+Therefore, if you use `customType`, it is best to also specify the `type`.
 
 :::
 
@@ -988,11 +1001,11 @@ Therefore, if you use `customType`, it is best to also specify `type`.
 -   Type: `Object`
 -   Default: `{}`
 
-Matches via the video's `type` and delegates video decoding to a third-party program for processing. The processing function can receive three parameters:
+Matches based on the video's `type` and delegates video decoding to third-party programs. The handler function receives three parameters:
 
-- `video` : Video `DOM` element
-- `url` : Video URL
-- `art` : Current instance
+- `video`: The video `DOM` element
+- `url`: The video URL
+- `art`: The current instance
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1013,7 +1026,7 @@ var art = new Artplayer({
 -   Type: `String`
 -   Default: `navigator.language.toLowerCase()`
 
-Default display language, currently supports: `en`, `zh-cn`
+The default display language. Currently supported: `en`, `zh-cn`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1036,7 +1049,7 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-Custom `i18n` configuration, this configuration will be deeply merged with the built-in `i18n`
+Custom `i18n` configuration. This configuration will be deeply merged with the built-in `i18n`.
 
 Add your language:
 
@@ -1055,7 +1068,7 @@ var art = new Artplayer({
 });
 ```
 
-Modify existing languages:
+Modify an existing language:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1085,7 +1098,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display a `lock button` on mobile devices to hide the bottom `control bar`
+Whether to display a `lock button` on mobile devices to hide the bottom `control bar`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1100,10 +1113,9 @@ var art = new Artplayer({
 ## `gesture`
 
 -   Type: `Boolean`
-
 -   Default: `true`
 
-Whether to enable gesture events on video elements for mobile devices
+Whether to enable gesture events on the video element on mobile devices.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1120,7 +1132,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to add a long-press video fast-forward feature for mobile devices
+Whether to add a long-press video fast-forward feature on mobile devices.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1137,7 +1149,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to use the automatic `playback feature`
+Whether to use the automatic `playback feature`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1152,7 +1164,7 @@ var art = new Artplayer({
 
 :::warning Note
 
-The player uses the `url` as the default `key` to cache playback progress.
+By default, the player uses the `url` as the `key` to cache the playback progress.
 
 However, if the same video has different `url`s, you need to use the `id` to identify the unique `key` for the video.
 
@@ -1163,7 +1175,7 @@ However, if the same video has different `url`s, you need to use the `id` to ide
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to rotate the player during fullscreen mode on mobile devices, based on the video dimensions and viewport size
+Whether to rotate the player during fullscreen mode on mobile web, based on the video dimensions and viewport size.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1180,7 +1192,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display the `airplay` button (currently only supported by some browsers)
+Whether to display the `airplay` button. Currently, only some browsers support this feature.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1197,7 +1209,7 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-Used to modify the built-in CSS variables
+Used to modify built-in CSS variables.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1211,9 +1223,9 @@ var art = new Artplayer({
 });
 ```
 
-:::warning Reference for cssVar syntax
+:::warning CSS Variable Reference
 
-[artplayer/types/cssVar.d.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/cssVar.d.ts)
+[artplayer/types/cssVar.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/cssVar.d.ts)
 
 :::
 
@@ -1222,7 +1234,7 @@ var art = new Artplayer({
 -   Type: `function`
 -   Default: `undefined`
 
-The function can return a third-party `HTMLCanvasElement` or `HTMLVideoElement`, for example, it can proxy an existing `video` DOM element
+The function can return a third-party `HTMLCanvasElement` or `HTMLVideoElement`. For example, it can proxy an existing `video` DOM element.
 
 <div className="run-code">▶ Run Code</div>