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>