Refactor documentation for clarity and consistency

- Updated descriptions and terminology across various component documentation files for improved clarity.
- Changed headings and section titles for better readability and consistency.
- Enhanced the language and structure of the documentation to provide clearer guidance on usage and configuration.
- Removed the `fix-docs.js` script as its functionality has been integrated into the translation process.
- Improved the translation script to handle Markdown code block issues and added retry logic for API calls.

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

@@ -49,7 +49,7 @@ This is the definition of all `DOM` elements: [artplayer/types/template.d.ts](ht
 
 ## `events`
 
-Manages all `DOM` events for the player. It essentially proxies `addEventListener` and `removeEventListener`. When using the following methods to handle events, the event will be automatically destroyed when the player is destroyed.
+Manages all `DOM` events for the player. It essentially proxies `addEventListener` and `removeEventListener`. When using the following methods to handle events, the events will also be automatically destroyed when the player is destroyed.
 
 - The `proxy` method is used to proxy `DOM` events.
 - The `hover` method is used to proxy custom `hover` events.
@@ -77,7 +77,7 @@ art.events.hover(container, (event) => {
 
 :::warning Note
 
-If you need `DOM` events that only exist during the player's lifecycle, it is strongly recommended to use these functions to avoid memory leaks.
+If you need `DOM` events that should only exist during the player's lifecycle, it is strongly recommended to use these functions to avoid memory leaks.
 
 :::
 
@@ -86,10 +86,10 @@ If you need `DOM` events that only exist during the player's lifecycle, it is st
 Manages the player's local storage.
 
 - The `name` property is used to set the cache `key`.
-- The `set` method is used to set a cache value.
-- The `get` method is used to get a cache value.
-- The `del` method is used to delete a cache value.
-- The `clear` method is used to clear all cache.
+- The `set` method is used to set a cache.
+- The `get` method is used to retrieve a cache.
+- The `del` method is used to delete a cache.
+- The `clear` method is used to clear all caches.
 
 <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 an `i18n` value.
+- The `get` method is used to retrieve 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 the `i18n` before instantiation, please use the `i18n` option in the basic options.
+Using `art.i18n.update` can only update the `i18n` after instantiation. If you want to update `i18n` before instantiation, please use the `i18n` option in the basic settings.
 
 :::
 
@@ -207,8 +207,8 @@ Manages the player's layers.
 - The `add` method is used to dynamically add a layer.
 - The `remove` method is used to dynamically remove a layer.
 - The `update` method is used to dynamically update a layer.
-- The `show` property is used to set whether all layers are visible.
-- The `toggle` method is used to toggle the visibility of all layers.
+- The `show` property is used to set whether all layers are displayed.
+- The `toggle` method is used to toggle the display of all layers.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -229,7 +229,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning Refer to the following address for `Component Configuration`:
+:::warning For `Component Configuration`, please refer to:
 
 [/component/layers.html](/component/layers.html)
 
@@ -469,7 +469,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning For the `Settings Panel`, please refer to:
+:::warning For `Settings Panel`, please refer to
 
 [/component/setting.html](/component/setting.html)
 
@@ -477,7 +477,7 @@ art.on('ready', () => {
 
 ## `plugins`
 
-Manages the player's plugin functionality, with only the `add` method for dynamically adding plugins
+Manages the player's plugin functionality, with only one method `add` for dynamically adding plugins
 
 <div className="run-code">▶ Run Code</div>
 

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

@@ -1,10 +1,10 @@
 # Static Properties
 
-Here, `Static Properties` refer to the `top-level properties` mounted on the `constructor function`, which are very rarely used.
+Here, `static properties` refer to the `first-level properties` attached to the `constructor`, which are rarely used.
 
 ## `instances`
 
-Returns an array of all player instances. This property can be useful when you need to manage multiple player instances simultaneously.
+Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -41,7 +41,7 @@ console.info(Artplayer.env);
 
 ## `build`
 
-Returns the build time of the player.
+Returns the build timestamp of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -87,7 +87,7 @@ console.info(Artplayer.scheme);
 
 ## `Emitter`
 
-Returns the constructor function for the event emitter.
+Returns the constructor of the event emitter.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -107,7 +107,7 @@ console.info(Artplayer.validator);
 
 ## `kindOf`
 
-Returns the utility function for type detection.
+Returns the type detection utility function.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -127,7 +127,7 @@ console.info(Artplayer.html);
 
 ## `option`
 
-Returns the default options for the player.
+Returns the default options of 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` (prefixed with `video:`) and `custom events`.
+Player events are divided into two types: `native events` of the video (prefixed with `video:`), and `custom events`.
 
-Listen to an event:
+Listening to events:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,7 +17,7 @@ art.on('video:canplay', () => {
 });
 ```
 
-Listen to an event only once:
+Listening to an event only once:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -32,7 +32,7 @@ art.once('video:canplay', () => {
 });
 ```
 
-Manually trigger an event:
+Manually triggering an event:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -45,7 +45,7 @@ var art = new Artplayer({
 art.emit('focus');
 ```
 
-Remove an event listener:
+Removing an event:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -71,7 +71,7 @@ art.on('ready', onReady);
 
 ## `ready`
 
-Triggered when the player is ready for the first time
+Triggered when the player is ready for the first time.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -88,7 +88,7 @@ art.on('ready', () => {
 
 ## `restart`
 
-Triggered when the player switches URL and becomes playable
+Triggered when the player switches URLs and becomes ready to play.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -109,7 +109,7 @@ art.on('restart', (url) => {
 
 ## `pause`
 
-Triggered when the player is paused
+Triggered when the player is paused.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -126,7 +126,7 @@ art.on('pause', () => {
 
 ## `play`
 
-Triggered when the player starts playing
+Triggered when the player starts playing.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -143,7 +143,7 @@ art.on('play', () => {
 
 ## `hotkey`
 
-Triggered when a hotkey is pressed on the player
+Triggered when a player hotkey is pressed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -160,7 +160,7 @@ art.on('hotkey', (event) => {
 
 ## `destroy`
 
-Triggered when the player is destroyed
+Triggered when the player is destroyed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -181,7 +181,7 @@ art.on('destroy', () => {
 
 ## `focus`
 
-Triggered when the player gains focus
+Triggered when the player gains focus.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -198,7 +198,7 @@ art.on('focus', (event) => {
 
 ## `blur`
 
-Triggered when the player loses focus
+Triggered when the player loses focus.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -215,7 +215,7 @@ art.on('blur', (event) => {
 
 ## `dblclick`
 
-Triggered when the player is double-clicked
+Triggered when the player is double-clicked.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -232,7 +232,7 @@ art.on('dblclick', (event) => {
 
 ## `click`
 
-Triggered when the player is clicked
+Triggered when the player is clicked.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -249,7 +249,7 @@ art.on('click', (event) => {
 
 ## `error`
 
-Triggered when an error occurs while loading the video
+Triggered when an error occurs while the player is loading a video.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -267,7 +267,7 @@ art.on('error', (error, reconnectTime) => {
 
 ## `hover`
 
-Triggered when the mouse enters or leaves the player
+Triggered when the mouse enters or leaves the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -284,7 +284,7 @@ art.on('hover', (state, event) => {
 
 ## `mousemove`
 
-Triggered when the mouse moves over the player
+Triggered when the mouse moves over the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -301,7 +301,7 @@ art.on('mousemove', (event) => {
 
 ## `resize`
 
-Triggered when the player's dimensions change
+Triggered when the player's dimensions change.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -318,7 +318,7 @@ art.on('resize', () => {
 
 ## `view`
 
-Triggered when the player enters or leaves the viewport
+Triggered when the player enters the viewport.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -335,7 +335,7 @@ art.on('view', (state) => {
 
 ## `lock`
 
-Triggered when the lock state changes on mobile devices
+Triggered when the lock state changes on mobile devices.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -353,7 +353,7 @@ art.on('lock', (state) => {
 
 ## `aspectRatio`
 
-Triggered when the player's aspect ratio changes
+Triggered when the player's aspect ratio changes.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -372,7 +372,7 @@ art.on('aspectRatio', (aspectRatio) => {
 
 ## `autoHeight`
 
-Triggered when the player automatically adjusts its height
+Triggered when the player's height is automatically set.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -393,7 +393,7 @@ art.on('autoHeight', (height) => {
 
 ## `autoSize`
 
-Triggered when the player automatically adjusts its size
+Triggered when the player's size is automatically set.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -411,7 +411,7 @@ art.on('autoSize', () => {
 
 ## `flip`
 
-Triggered when the player is flipped
+Triggered when the player is flipped.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -430,7 +430,7 @@ art.on('flip', (flip) => {
 
 ## `fullscreen`
 
-Triggered when the player enters or exits window fullscreen mode
+Triggered when the player enters or exits windowed fullscreen mode.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -448,7 +448,7 @@ art.on('fullscreen', (state) => {
 
 ## `fullscreenError`
 
-Triggered when a window fullscreen error occurs
+Triggered when a windowed fullscreen error occurs.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -469,7 +469,7 @@ art.on('fullscreenError', (event) => {
 
 ## `fullscreenWeb`
 
-Triggered when the player enters or exits web fullscreen mode
+Triggered when the player enters or exits web fullscreen mode.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -487,7 +487,7 @@ art.on('fullscreenWeb', (state) => {
 
 ## `mini`
 
-Triggered when the player enters or exits mini mode
+Triggered when the player enters or exits mini mode.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -508,7 +508,7 @@ art.on('mini', (state) => {
 
 ## `pip`
 
-Triggered when the player enters or exits picture-in-picture mode
+Triggered when the player enters or exits Picture-in-Picture mode.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -527,7 +527,7 @@ art.on('pip', (state) => {
 
 ## `screenshot`
 
-Triggered when the player captures a screenshot
+Triggered when the player takes a screenshot.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -545,7 +545,7 @@ art.on('screenshot', (dataUri) => {
 
 ## `seek`
 
-Triggered when the player performs a time seek
+Triggered when the player performs a time seek.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -562,7 +562,7 @@ art.on('seek', (currentTime) => {
 
 ## `subtitleOffset`
 
-Triggered when subtitle offset changes in the player
+Triggered when the subtitle offset changes in the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -584,7 +584,7 @@ art.on('subtitleOffset', (offset) => {
 
 ## `subtitleBeforeUpdate`
 
-Triggered before subtitles are updated
+Triggered before subtitles are updated.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -604,7 +604,7 @@ art.on('subtitleBeforeUpdate', (cues) => {
 
 ## `subtitleAfterUpdate`
 
-Triggered after subtitles are updated
+Triggered after subtitles are updated.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -624,7 +624,7 @@ art.on('subtitleAfterUpdate', (cues) => {
 
 ## `subtitleLoad`
 
-Triggered when subtitles are loaded
+Triggered when subtitles are loaded.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -644,7 +644,7 @@ art.on('subtitleLoad', (option, cues) => {
 
 ## `info`
 
-Triggered when the info panel is shown or hidden
+Triggered when the info panel is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -661,7 +661,7 @@ art.on('info', (state) => {
 
 ## `layer`
 
-Triggered when custom layers are shown or hidden
+Triggered when a custom layer is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -678,7 +678,7 @@ art.on('layer', (state) => {
 
 ## `loading`
 
-Triggered when the loader is shown or hidden
+Triggered when the loader is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -695,7 +695,7 @@ art.on('loading', (state) => {
 
 ## `mask`
 
-Triggered when the mask layer is shown or hidden
+Triggered when the mask layer is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -712,7 +712,7 @@ art.on('mask', (state) => {
 
 ## `subtitle`
 
-Triggered when the subtitle layer is shown or hidden
+Triggered when the subtitle layer is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -729,7 +729,7 @@ art.on('subtitle', (state) => {
 
 ## `contextmenu`
 
-Triggered when the context menu is shown or hidden
+Triggered when the context menu is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -746,7 +746,7 @@ art.on('contextmenu', (state) => {
 
 ## `control`
 
-Triggered when the controls are shown or hidden
+Triggered when the control bar is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -763,7 +763,7 @@ art.on('control', (state) => {
 
 ## `setting`
 
-Triggered when the settings panel is shown or hidden
+Triggered when the settings panel is shown or hidden.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -782,7 +782,7 @@ art.on('setting', (state) => {
 
 ## `muted`
 
-Triggered when the mute state changes
+Triggered when the muted state changes.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -799,7 +799,7 @@ art.on('muted', (state) => {
 
 ## `keydown`
 
-Listens for `keydown` events from the `document`
+Listens for the `keydown` event from the `document`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -816,84 +816,84 @@ art.on('keydown', (event) => {
 
 ## `video:canplay`
 
-The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering
+The browser can start playing the media, but estimates there is not enough data to play through to the end without stopping for further buffering.
 
 ## `video:canplaythrough`
 
-The browser estimates it can play the media through to the end without stopping to buffer content
+The browser estimates it can play the media through to the end without stopping for buffering.
 
 ## `video:complete`
 
-OfflineAudioContext rendering is complete
+The OfflineAudioContext rendering is complete.
 
 ## `video:durationchange`
 
-Triggered when the value of the duration property changes
+Triggered when the value of the `duration` property changes.
 
 ## `video:emptied`
 
-The media has become empty; for example, this event is sent when the media has already been loaded (or partially loaded), and the load() method is called to reload it
+The media has become empty; for example, this event is sent when the media has already been loaded (or partially loaded), and the `load()` method is called to reload it.
 
 ## `video:ended`
 
-Playback has stopped because the media has reached its end point
+Playback has stopped because the media has reached its end.
 
 ## `video:error`
 
-An error occurred while fetching media data, or the resource type is not a supported media format
+An error occurred while fetching the media data, or the resource type is not a supported media format.
 
 ## `video:loadeddata`
 
-The first frame of the media has finished loading
+The first frame of the media has finished loading.
 
 ## `video:loadedmetadata`
 
-Metadata has been loaded
+Metadata has been loaded.
 
 ## `video:pause`
 
-Playback has been paused
+Playback has been paused.
 
 ## `video:play`
 
-Playback has begun
+Playback has begun.
 
 ## `video:playing`
 
-Playback is ready to start after having been paused or delayed due to lack of data
+Playback is ready to start after having been paused or delayed due to lack of data.
 
 ## `video:progress`
 
-Periodically triggered while the browser is loading the resource
+Fired periodically as the browser loads the resource.
 
 ## `video:ratechange`
 
-The playback rate has changed
+The playback rate has changed.
 
 ## `video:seeked`
 
-A seek operation has completed
+A seek operation has completed.
 
 ## `video:seeking`
 
-A seek operation has begun
+A seek operation has begun.
 
 ## `video:stalled`
 
-The user agent is trying to fetch media data, but data is unexpectedly not forthcoming
+The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
 
 ## `video:suspend`
 
-Media data loading has been suspended
+Media data loading has been suspended.
 
 ## `video:timeupdate`
 
-The time indicated by the currentTime attribute has been updated
+The time indicated by the `currentTime` property has changed.
 
 ## `video:volumechange`
 
-The volume has changed
+The volume has changed.
 
 ## `video:waiting`
 
-Playback has stopped due to temporary lack of data
+Playback has stopped because of a 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`. The property names are all in uppercase. They are subject to change in the future and are generally not used.
+The `global properties` here refer to the `top-level properties` mounted on the `constructor`. All property names are in uppercase. These are subject to change in the future and are rarely used.
 
 ## DEBUG
 
-Whether to enable `debug` mode, which can print all built-in events of the video. Default is off.
+Whether to enable `debug` mode, which can print all built-in video events. Default is off.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -44,7 +44,7 @@ var art = new Artplayer({
 
 ## NOTICE_TIME
 
-The display duration for notification messages, in milliseconds. Default is `2000`.
+The display duration of notification messages, in milliseconds. Default is `2000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -79,7 +79,7 @@ var art = new Artplayer({
 
 ## SETTING_ITEM_WIDTH
 
-The default width of settings items in the settings panel, in pixels. Default is `200`.
+The default width of a setting item in the settings panel, in pixels. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -99,7 +99,7 @@ var art = new Artplayer({
 
 ## SETTING_ITEM_HEIGHT
 
-The default height of settings items in the settings panel, in pixels. Default is `35`.
+The default height of a setting item in the settings panel, in pixels. Default is `35`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -255,7 +255,7 @@ var art = new Artplayer({
 
 ## CONTROL_HIDE_TIME
 
-The delay time in milliseconds for auto-hiding the bottom control bar. Default is `3000`.
+The auto-hide delay time for the bottom control bar, in milliseconds. Default is `3000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -270,7 +270,7 @@ var art = new Artplayer({
 
 ## DBCLICK_TIME
 
-The delay time in milliseconds for double-click events. Default is `300`.
+The delay time for the double-click event, in milliseconds. Default is `300`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -289,7 +289,7 @@ art.on('dblclick', () => {
 
 ## DBCLICK_FULLSCREEN
 
-On desktop, whether double-click toggles fullscreen mode. Default is `true`.
+On desktop, whether double-click toggles fullscreen. Default is `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -304,7 +304,7 @@ var art = new Artplayer({
 
 ## MOBILE_DBCLICK_PLAY
 
-On mobile devices, whether double-click toggles play/pause. Default is `true`.
+On mobile, whether double-click toggles play/pause. Default is `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -319,7 +319,7 @@ var art = new Artplayer({
 
 ## MOBILE_CLICK_PLAY
 
-On mobile devices, whether single-click toggles play/pause. Default is `false`.
+On mobile, whether single-click toggles play/pause. Default is `false`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -334,7 +334,7 @@ var art = new Artplayer({
 
 ## AUTO_ORIENTATION_TIME
 
-On mobile devices, the delay time in milliseconds for automatic screen rotation. Default is `200`.
+On mobile, the delay time for auto-rotation, in milliseconds. Default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -350,7 +350,7 @@ var art = new Artplayer({
 
 ## INFO_LOOP_TIME
 
-The refresh interval in milliseconds for the information panel. Default is `1000`.
+The refresh interval for the info panel, in milliseconds. Default is `1000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -367,7 +367,7 @@ art.info.show = true;
 
 ## FAST_FORWARD_VALUE
 
-On mobile devices, the speed multiplier for fast-forward during long-press. Default is `3`.
+On mobile, the speed multiplier for long-press fast-forward. Default is `3`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -383,7 +383,7 @@ var art = new Artplayer({
 
 ## FAST_FORWARD_TIME
 
-On mobile devices, the delay time in milliseconds for activating fast-forward during long-press. Default is `1000`.
+On mobile, the delay time for long-press fast-forward, in milliseconds. Default is `1000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -399,7 +399,7 @@ var art = new Artplayer({
 
 ## TOUCH_MOVE_RATIO
 
-On mobile devices, the speed multiplier for seeking when swiping left/right. Default is `0.5`.
+On mobile, the speed multiplier for left/right swipe to seek. Default is `0.5`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -414,7 +414,7 @@ var art = new Artplayer({
 
 ## VOLUME_STEP
 
-The volume adjustment step for keyboard shortcuts. Default is `0.1`.
+The step size for volume adjustment via keyboard shortcuts. Default is `0.1`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -429,7 +429,7 @@ var art = new Artplayer({
 
 ## SEEK_STEP
 
-The seeking step in seconds for keyboard shortcuts. Default is `5`.
+The step size for seeking via keyboard shortcuts, in seconds. Default is `5`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -484,7 +484,7 @@ art.setting.show = true;
 
 ## FLIP
 
-The built-in list of video flip modes. Default is `['normal', 'horizontal', 'vertical']`.
+The built-in list of video flip options. Default is `['normal', 'horizontal', 'vertical']`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -505,7 +505,7 @@ art.setting.show = true;
 
 ## FULLSCREEN_WEB_IN_BODY
 
-Determines whether to mount the player under the `body` element during web fullscreen mode. Defaults to `true`.
+Whether to mount the player under the `body` element during web fullscreen mode. Default is `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -521,7 +521,7 @@ var art = new Artplayer({
 
 ## LOG_VERSION
 
-Sets whether to print the player version. Defaults to `true`.
+Sets whether to print the player version. Default is `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -536,7 +536,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`. Default is `false`. Currently, it is primarily used for smooth progress bar effects.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -552,9 +552,9 @@ var art = new Artplayer({
 
 ## 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`.
+Whether to remove the video's `src` attribute and call `load()` to actively release media resources when destroying the player. Default is `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`.
+Enabling this can reduce video resource usage in single-page applications or scenarios where players are frequently created/destroyed. If you wish to preserve the state of the video element and only remove the UI, you can set this to `false`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -566,6 +566,6 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-// Only destroys the UI, does not actively clear src
+// Only destroy the UI, do not actively clear the src
 art.destroy();
 ```

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

@@ -1,8 +1,8 @@
 # Writing Plugins
 
-Once you are 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 a plugin becomes a very straightforward task.
 
-You can load plugin functions during instantiation:
+You can load a plugin function during instantiation.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -29,7 +29,7 @@ art.on('ready', () => {
 });
 ```
 
-You can also load plugin functions after instantiation:
+You can also load a plugin function after instantiation.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -57,7 +57,7 @@ art.on('ready', () => {
 });
 ```
 
-For example, let's say I want to write a plugin that displays an image ad when the video is paused:
+For example, let's say I want to write a plugin that displays an image ad when the video is paused.
 
 <div className="run-code">▶ Run Code</div>
 

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

@@ -50,7 +50,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-Toggle video playback and pause.
+Toggle video play 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 remove the player's `html` after destruction. Defaults to `true`.
+Destroy the player. Accepts a parameter indicating whether to also remove the player's `html` after destruction. Defaults to `true`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -137,7 +137,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Number`
 
-Fast forward the video time, in seconds.
+Fast-forward the video time, in seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -299,7 +299,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Sets and gets whether the video is muted.
+Sets or gets whether the video is muted.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -321,7 +321,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-Sets and gets the current playback time of the video. Setting the time is similar to `seek`, but it does not trigger additional events.
+Sets or gets the current playback time of the video. Setting the time is similar to `seek`, but it does not trigger additional events.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -359,7 +359,7 @@ art.on('ready', () => {
 
 :::warning Note
 
-Some videos may not have a duration, such as live streams or videos that have not been fully decoded. In these cases, the obtained duration will be `0`.
+Some videos may not have a duration, such as live streams or videos that have not been fully decoded. In such cases, the obtained duration will be `0`.
 
 :::
 
@@ -427,7 +427,7 @@ art.on('ready', async () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Sets and gets the player's window fullscreen state.
+Sets or gets the player's window fullscreen state.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -449,7 +449,7 @@ var art = new Artplayer({
 
 :::warning Note
 
-Due to browser security mechanisms, the page must have prior user interaction (e.g., the user has clicked on the page) before triggering window fullscreen.
+Due to browser security mechanisms, a user interaction (e.g., a click on the page) must occur before triggering window fullscreen.
 
 :::
 
@@ -458,7 +458,7 @@ Due to browser security mechanisms, the page must have prior user interaction (e
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Sets and gets the player's web page fullscreen state.
+Sets or gets the player's web page fullscreen state.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -483,7 +483,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-Sets and gets the player's Picture-in-Picture mode.
+Sets or gets the player's Picture-in-Picture (PIP) mode.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -505,7 +505,7 @@ var art = new Artplayer({
 
 :::warning Note
 
-Due to browser security mechanisms, the page must have prior user interaction (e.g., the user has clicked on the page) before triggering Picture-in-Picture.
+Due to browser security mechanisms, a user interaction (e.g., a click on the page) must occur before triggering Picture-in-Picture.
 
 :::
 
@@ -514,7 +514,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 effect is only visible before video playback starts.
+Sets and gets the video poster. The poster effect is only visible before the video starts playing.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -578,7 +578,7 @@ art.on('ready', () => {
 -   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).
+Gets or sets the player's current state. Supported values: `standard` (normal), `mini` (mini window), `pip` (picture-in-picture), `fullscreen` (window fullscreen), `fullscreenWeb` (webpage fullscreen).
 
 <div className="run-code">▶ Run Code</div>
 
@@ -589,7 +589,7 @@ var art = new Artplayer({
 });
 
 art.on('ready', () => {
-    console.info(art.state); // Default: standard
+    console.info(art.state); // Default is 'standard'
     art.state = 'mini';
 });
 ```
@@ -642,10 +642,10 @@ The dimension and coordinate information is obtained via `getBoundingClientRect`
 
 -   Type: `Getter`
 
-These properties provide shortcut access to `rect`:
+These properties provide quick access to `rect`:
 
-- `bottom`, `top`, `left`, `right`, `x`, `y`: Correspond to the fields of the same name in `DOMRect`
-- `width`, `height`: The player's current visible width and height
+- `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>
 
@@ -665,7 +665,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Sets and gets the player flip state. Supported values: `normal`, `horizontal`, `vertical`.
+Sets and gets the player's flip state. Supported values: `normal`, `horizontal`, `vertical`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -687,7 +687,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-Sets and gets the player's playback rate.
+Sets and gets the player's playback speed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -730,7 +730,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-When the container only has a defined width, this property can automatically calculate and set the video height.
+When the container only has a defined width, this property can automatically calculate and set the video's height.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -751,7 +751,7 @@ art.on('resize', () => {
 
 :::warning Note
 
-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.
+This property is useful when your container has only a width but the exact height is unknown. It can automatically calculate the video height, but you need to determine the timing for setting this property.
 
 :::
 
@@ -760,7 +760,7 @@ This property is useful when your container has only a defined width but an unkn
 -   Type: `Function`
 -   Parameter: `String`
 
-Dynamically gets and sets attributes of the video element.
+Dynamically get and set attributes of the video element.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -782,7 +782,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Dynamically gets and sets the video type.
+Dynamically get and set the video type.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -804,7 +804,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-Dynamically gets and sets the player's theme color.
+Dynamically get and set the player's theme color.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -825,7 +825,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-Initiates AirPlay.
+Initiate AirPlay.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -849,7 +849,7 @@ var art = new Artplayer({
 
 -   Type: `Getter`
 
-The proportion of the video that has been buffered, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
+The proportion of video buffered, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -868,7 +868,7 @@ art.on('video:timeupdate', () => {
 
 -   Type: `Getter`
 
-The amount of media that has been buffered, in seconds. Typically used alongside `loaded` to display detailed buffering progress.
+The buffered media duration in seconds. Typically used alongside `loaded` to display detailed buffering progress.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -887,7 +887,7 @@ art.on('video:timeupdate', () => {
 
 -   Type: `Getter`
 
-The proportion of the video that has been played, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
+The proportion of video played, ranging from `[0, 1]`. Often used with the `video:timeupdate` event.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -906,7 +906,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 is 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 cleaned up when the player is destroyed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -925,7 +925,7 @@ art.proxy(container, 'click', event => {
 
 :::warning Note
 
-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.
+If you need certain `DOM` events to exist only for the player's lifecycle, it is strongly recommended to use this function to avoid memory leaks.
 
 :::
 
@@ -933,7 +933,7 @@ If you need `DOM` events to exist only for the duration of the player's lifecycl
 
 -   Type: `Function`
 
-A `DOM` query function, similar to `document.querySelector`, but the search is scoped to the current player instance, preventing errors from duplicate class names.
+A `DOM` query function, similar to `document.querySelector`, but the search is scoped to the current player, preventing errors with duplicate class names.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -967,7 +967,7 @@ console.info(art.video);
 
 -   Type: `Function`
 
-Dynamically gets or sets CSS variables.
+Dynamically get or set `CSS` variables.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -989,7 +989,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Array`
 
-Dynamically sets the list of available quality levels.
+Dynamically set the quality list.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1033,7 +1033,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Object`
 
-Dynamically set thumbnails
+Dynamically set thumbnails.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1057,7 +1057,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-Dynamically set subtitle offset
+Dynamically set subtitle offset.
 
 <div className="run-code">▶ Run Code</div>