diff --git a/package.json b/package.json
index c23ea875c..76a7c6424 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,9 @@
         "lint": "npx eslint packages/*/src",
         "build:sw": "node ./scripts/build-sw.js",
         "build:ts": "node ./scripts/build-ts.js",
-        "build:docs": "node ./scripts/trans-docs.js && node ./scripts/build-docs.js",
+        "build:docs": "node ./scripts/build-docs.js",
         "build:i18n": "node ./scripts/build-i18n.js",
+        "trans:docs": "node ./scripts/trans-docs.js",
         "dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js",
         "build": "npx cross-env NODE_ENV=production node ./scripts/build.js",
         "prettier": "npx prettier --write .",
diff --git a/packages/artplayer-vitepress/docs/en/advanced/built-in.md b/packages/artplayer-vitepress/docs/en/advanced/built-in.md
index 8a5cc280c..042bdf098 100644
--- a/packages/artplayer-vitepress/docs/en/advanced/built-in.md
+++ b/packages/artplayer-vitepress/docs/en/advanced/built-in.md
@@ -1,10 +1,10 @@
-# 高级属性
+# Advanced Properties
 
-这里的 `高级属性` 是指挂载在 `实例` 的 `二级属性`，比较少用
+The `advanced properties` here refer to the `secondary attributes` mounted on the `instance`, which are less commonly used
 
 ## `option`
 
-播放器的选项
+Options for the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,15 +17,15 @@ var art = new Artplayer({
 console.info(art.option);
 ```
 
-:::warning 提示
+:::warning Reminder
 
-假如直接修改这个 `option` 对象，播放器不会马上做出响应
+If you directly modify this `option` object, the player will not respond immediately.
 
 :::
 
 ## `template`
 
-管理播放器所有的 `DOM` 元素
+Manages all of the `DOM` elements of the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -38,22 +38,21 @@ var art = new Artplayer({
 console.info(art.template);
 console.info(art.template.$video);
 ```
+:::warning Warning
 
-:::warning 提示
+To easily distinguish between `DOM` elements and plain objects, all `DOM` elements in the player are named starting with a `$`
 
-为了方便区别 `DOM` 元素和普通对象，播放器里的所有 `DOM` 元素都是以 `$` 开头命名的
-
-这是所有 `DOM` 元素的定义：[artplayer/types/template.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts)
+Here is the definition of all `DOM` elements: [artplayer/types/template.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts)
 
 :::
 
 ## `events`
 
-管理播放器所有的 `DOM` 事件，实质上是代理了 `addEventListener` 和 `removeEventListener`, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
+Manages all `DOM` events in the player, which is essentially a proxy for `addEventListener` and `removeEventListener`. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.
 
-- `proxy` 方法用于代理 `DOM` 事件
-- `hover` 方法用于代理自定义的 `hover` 事件
-- `loadImg` 方法用于监听图片的 `load` 加载事件
+- The `proxy` method is used to proxy `DOM` events
+- The `hover` method is used to proxy custom `hover` events
+- The `loadImg` method is used to listen for the `load` event of images
 
 <div className="run-code">▶ Run Code</div>
 
@@ -66,7 +65,7 @@ var art = new Artplayer({
 });
 
 art.events.proxy(container, 'click', event => {
-	console.info('click', event);
+    console.info('click', event);
 });
 
 art.events.hover(container, (event) => {
@@ -79,22 +78,21 @@ art.events.loadImg('/assets/sample/poster.jpg').then(img => {
     console.info('loadImg', img);
 });
 ```
+:::warning Warning
 
-:::warning 提示
-
-假如你需要一些 `DOM` 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
+If you need some `DOM` events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks
 
 :::
 
 ## `storage`
 
-管理播放器的本地存储
+Manages the local storage of the player
 
-- `name` 属性用于设置缓存的 `key`
-- `set` 方法用于设置缓存
-- `get` 方法用于获取缓存
-- `del` 方法用于删除缓存
-- `clear` 方法用于清空缓存
+- The `name` attribute is used to set the cache `key`
+- The `set` method is used to set the cache
+- The `get` method is used to get the cache
+- The `del` method is used to delete the cache
+- The `clear` method is used to clear the cache
 
 <div className="run-code">▶ Run Code</div>
 
@@ -111,11 +109,11 @@ art.storage.del('test');
 art.storage.clear();
 ```
 
-:::warning 提示
+:::warning Warning
 
-默认所有播放器实例都是共享同一个 `localStorage` 的，而且默认的 `key` 是 `artplayer_settings`
+By default, all player instances share the same `localStorage`, and the default `key` is `artplayer_settings`
 
-如果你想不同的播放器使用不同的 `localStorage`，你可以修改 `art.storage.name` 即可
+If you want different players to use different `localStorage`, you can modify `art.storage.name` accordingly
 
 :::
 
@@ -133,7 +131,7 @@ art.storage.set('test', { foo: 'bar' });
 
 ## `icons`
 
-管理播放器所有的 `svg` 图标
+Manage all the `svg` icons of the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -146,7 +144,7 @@ var art = new Artplayer({
 console.info(art.icons.loading);
 ```
 
-:::warning 这是所有图标的定义：
+:::warning This is the definition of all icons:
 
 [artplayer/types/icons.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts)
 
@@ -154,10 +152,10 @@ console.info(art.icons.loading);
 
 ## `i18n`
 
-管理播放器的 `i18n`
+Manage the player's `i18n`
 
-- `get` 方法用于获取 `i18n` 的值
-- `update` 方法用于更新 `i18n` 对象
+- The `get` method is used to retrieve the value of `i18n`
+- The `update` method is used to update the `i18n` object
 
 <div className="run-code">▶ Run Code</div>
 
@@ -178,14 +176,14 @@ art.i18n.update({
 
 :::warning
 
-使用 `art.i18n.update` 只能更新实例化之后的 `i18n`，假如想在实例化之前更新 `i18n`，请使用基础选项的 `i18n` 来更新
+Using `art.i18n.update` can only update `i18n` after instantiation. If you want to update `i18n` before instantiation, please use the `i18n` from the basic options for the update.
 
 :::
 
 
 ## `notice`
 
-管理播放器的提示语，只有一个 `show` 属性用于显示提示语
+Manage the player's notices, there's only one `show` property used to display notices.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -202,19 +200,19 @@ art.on('ready', () => {
 
 :::warning
 
-如果想马上隐藏 `notice` 的显示：`art.notice.show = '';`
+To immediately hide the display of `notice`: `art.notice.show = '';`
 
 :::
 
 ## `layers`
 
-管理播放器的层
+Manage the layers of the player
 
-- `add` 方法用于动态添加层
-- `remove` 方法用于动态删除层
-- `update` 方法用于动态更新层
-- `show` 属性用于设置是否显示全部层
-- `toggle` 方法用于切换是否显示全部层
+- The `add` method is used for dynamically adding layers
+- The `remove` method is used for dynamically removing layers
+- The `update` method is used for dynamically updating layers
+- The `show` property is used to set whether to display all layers or not
+- The `toggle` method is used to toggle the display of all layers
 
 <div className="run-code">▶ Run Code</div>
 
@@ -234,8 +232,7 @@ art.on('ready', () => {
 	}, 1000);
 });
 ```
-
-:::warning `组件配置` 请参考以下地址：
+:::warning `Component configuration` Please refer to the following address:
 
 [/component/layers.html](/component/layers.html)
 
@@ -243,13 +240,13 @@ art.on('ready', () => {
 
 ## `controls`
 
-管理播放器的控制器
+Manage the player's controllers
 
-- `add` 方法用于动态添加控制器
-- `remove` 方法用于动态删除控制器
-- `update` 方法用于动态更新控制器
-- `show` 属性用于设置是否显示全部控制器
-- `toggle` 方法用于切换是否显示全部控制器
+- `add` method is used to dynamically add controllers
+- `remove` method is used to dynamically remove controllers
+- `update` method is used to dynamically update controllers
+- `show` property is used to set whether to display all controllers
+- `toggle` method is used to toggle the display of all controllers
 
 <div className="run-code">▶ Run Code</div>
 
@@ -271,7 +268,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning `组件配置` 请参考以下地址：
+:::warning `Component Configuration` Please refer to the following address:
 
 [/component/controls.html](/component/controls.html)
 
@@ -279,13 +276,13 @@ art.on('ready', () => {
 
 ## `contextmenu`
 
-管理播放器的右键菜单
+Manage the right-click context menu of the player
 
-- `add` 方法用于动态添加菜单
-- `remove` 方法用于动态删除菜单
-- `update` 方法用于动态更新菜单
-- `show` 属性用于设置是否显示全部菜单
-- `toggle` 方法用于切换是否显示全部菜单
+- The `add` method is used to dynamically add menu items
+- The `remove` method is used to dynamically remove menu items
+- The `update` method is used to dynamically update menu items
+- The `show` attribute is used to set whether to show all menu items
+- The `toggle` method is used to switch the visibility of all menu items
 
 <div className="run-code">▶ Run Code</div>
 
@@ -301,13 +298,13 @@ art.on('ready', () => {
     });
 
     art.contextmenu.show = true;
-	setTimeout(() => {
-		art.contextmenu.show = false;
-	}, 1000);
+    setTimeout(() => {
+        art.contextmenu.show = false;
+    }, 1000);
 });
 ```
 
-:::warning `组件配置` 请参考以下地址：
+:::warning `Component Configuration` Please refer to the following address:
 
 [/component/contextmenu.html](/component/contextmenu.html)
 
@@ -315,11 +312,11 @@ art.on('ready', () => {
 
 ## `subtitle`
 
-管理播放器的字幕功能
+Manage the subtitle features of the player
 
-- `url` 属性设置和返回当前字幕地址
-- `style` 方法设置当前字幕的样式
-- `switch` 方法设置当前字幕地址和选项
+- `url` property sets and returns the current subtitle address
+- `style` method sets the style of the current subtitle
+- `switch` method sets the current subtitle address and options
 
 <div className="run-code">▶ Run Code</div>
 
@@ -339,10 +336,10 @@ art.on('ready', () => {
 
 ## `loading`
 
-管理播放器的加载层
+Manage the loading layer of the player
 
-- `show` 属性用于设置是否显示加载层
-- `toggle` 属性用于切换是否显示加载层
+- `show` property is used to set whether to display the loading layer
+- The `toggle` attribute is used to toggle the display of the loading layer
 
 <div className="run-code">▶ Run Code</div>
 
@@ -362,10 +359,10 @@ art.on('ready', () => {
 
 ## `hotkey`
 
-管理播放器的快捷键功能
+Manage the hotkey functionality of the player
 
-- `add` 方法用于添加快捷键
-- `remove` 方法用于删除快捷键
+- The `add` method is used to add a hotkey
+- The `remove` method is used to remove a hotkey
 
 <div className="run-code">▶ Run Code</div>
 
@@ -386,19 +383,18 @@ art.on('ready', () => {
 	}, 5000);
 });
 ```
+:::warning Warning
 
-:::warning 提示
-
-只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
+Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).
 
 :::
 
 ## `mask`
 
-管理播放器的遮罩层
+Manage the player's mask layer
 
-- `show` 属性用于设置是否显示遮罩层
-- `toggle` 属性用于切换是否显示遮罩层
+- `show` property is used to set whether to display the mask layer
+- `toggle` property is used to toggle the display of the mask layer
 
 <div className="run-code">▶ Run Code</div>
 
@@ -410,21 +406,22 @@ var art = new Artplayer({
 
 art.on('ready', () => {
     art.mask.show = false;
-	setTimeout(() => {
-		art.mask.show = true;
-	}, 1000);
+    setTimeout(() => {
+        art.mask.show = true;
+    }, 1000);
 });
 ```
 
 ## `setting`
 
-管理播放器的设置面板
+Manage the player's settings panel
+
+- `add` method is used to dynamically add a setting item
+- `remove` method is used to dynamically remove a setting item
+- `update` method is used to dynamically update a setting item
+- `show` property is used to set whether to display all the setting items
+- `toggle` method is used to toggle whether to display all the setting items
 
-- `add` 方法用于动态添加设置项
-- `remove` 方法用于动态删除设置项
-- `update` 方法用于动态更新设置项
-- `show` 属性用于设置是否显示全部设置项
-- `toggle` 方法用于切换是否显示全部设置项
 
 <div className="run-code">▶ Run Code</div>
 
@@ -447,7 +444,7 @@ art.on('ready', () => {
 });
 ```
 
-:::warning `设置面板` 请参考以下地址
+:::warning `Settings Panel` Please refer to the following link
 
 [/component/setting.html](/component/setting.html)
 
@@ -455,7 +452,7 @@ art.on('ready', () => {
 
 ## `plugins`
 
-管理播放器的插件功能，只有一个方法 `add` 用于动态添加插件
+Manage the player's plugin features, with only one method `add` to dynamically add plugins
 
 <div className="run-code">▶ Run Code</div>
 
diff --git a/packages/artplayer-vitepress/docs/en/advanced/class.md b/packages/artplayer-vitepress/docs/en/advanced/class.md
index eb0e89807..3f2b86d51 100644
--- a/packages/artplayer-vitepress/docs/en/advanced/class.md
+++ b/packages/artplayer-vitepress/docs/en/advanced/class.md
@@ -1,10 +1,10 @@
-# 静态属性
+# Static Properties
 
-这里的 `静态属性` 是指挂载在 `构造函数` 的 `一级属性`，非常少使用
+Here, `Static Properties` refer to the `first-level properties` mounted on the `constructor`, which are very rarely used.
 
 ## `instances`
 
-返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
+Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -21,7 +21,7 @@ console.info([...Artplayer.instances]);
 
 ## `version`
 
-返回播放器的版本信息
+Returns the version information of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -31,7 +31,7 @@ console.info(Artplayer.version);
 
 ## `env`
 
-返回播放器的环境变量
+Returns the environment variables of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -41,7 +41,7 @@ console.info(Artplayer.env);
 
 ## `build`
 
-返回播放器的打包时间
+Returns the build time of the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -51,7 +51,7 @@ console.info(Artplayer.build);
 
 ## `config`
 
-返回视频的默认配置
+Returns the default configuration of the video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -61,7 +61,7 @@ console.info(Artplayer.config);
 
 ## `utils`
 
-返回播放器的工具函数集合
+Returns a collection of utility functions for the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -69,7 +69,7 @@ console.info(Artplayer.config);
 console.info(Artplayer.utils);
 ```
 
-:::warning 全部工具函数请参考以下地址：
+:::warning For the full list of 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)
 
@@ -77,7 +77,7 @@ console.info(Artplayer.utils);
 
 ## `scheme`
 
-返回播放器选项的校验方案
+Returns the validation scheme for the player options
 
 <div className="run-code">▶ Run Code</div>
 
@@ -87,7 +87,7 @@ console.info(Artplayer.scheme);
 
 ## `Emitter`
 
-返回事件分发器的构造函数
+Returns the constructor for the event dispatcher
 
 <div className="run-code">▶ Run Code</div>
 
@@ -97,7 +97,7 @@ console.info(Artplayer.Emitter);
 
 ## `validator`
 
-返回选项的校验函数
+Returns the validation function for options
 
 <div className="run-code">▶ Run Code</div>
 
@@ -107,7 +107,7 @@ console.info(Artplayer.validator);
 
 ## `kindOf`
 
-返回类型检测的函数工具
+Returns the function tool for type checking
 
 <div className="run-code">▶ Run Code</div>
 
@@ -117,7 +117,7 @@ console.info(Artplayer.kindOf);
 
 ## `html`
 
-返回播放器所需的 `html` 字符串
+Returns the `html` string required for the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -127,7 +127,7 @@ console.info(Artplayer.html);
 
 ## `option`
 
-返回播放器的默认选项
+Returns the player's default options
 
 <div className="run-code">▶ Run Code</div>
 
diff --git a/packages/artplayer-vitepress/docs/en/advanced/event.md b/packages/artplayer-vitepress/docs/en/advanced/event.md
index 72af31a21..7a3edffaf 100644
--- a/packages/artplayer-vitepress/docs/en/advanced/event.md
+++ b/packages/artplayer-vitepress/docs/en/advanced/event.md
@@ -1,8 +1,8 @@
-# 实例事件
+# Example Events
 
-播放器的事件分为两种，一种视频的 `原生事件` (前缀 `video:`)，另外一种是 `自定义事件`
+Player events are divided into two types, one is the video's `native events` (prefix `video:`), the other is `custom events`
 
-监听事件：
+Listening to events:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,7 +17,7 @@ art.on('video:canplay', () => {
 });
 ```
 
-只监听一次事件：
+Listen to an event only once:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -32,7 +32,7 @@ art.once('video:canplay', () => {
 });
 ```
 
-手动触发事件：
+Manually trigger an event:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -45,7 +45,7 @@ var art = new Artplayer({
 art.emit('focus');
 ```
 
-移除事件：
+Remove an event:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -63,15 +63,14 @@ const onReady = () => {
 art.on('ready', onReady);
 ```
 
-:::warning 全部事件请参考以下地址：
+:::warning For a full list of events, please refer to the following address:
 
 [artplayer/types/events.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts)
 
 :::
-
 ## `ready`
 
-当播放器首次可以播放器时触发
+Triggered when the player is able to play for the first time
 
 <div className="run-code">▶ Run Code</div>
 
@@ -88,7 +87,7 @@ art.on('ready', () => {
 
 ## `restart`
 
-当播放器切换地址后并可以播放时触发
+Triggered when the player switches the address and is able to play
 
 <div className="run-code">▶ Run Code</div>
 
@@ -106,10 +105,9 @@ art.on('restart', (url) => {
     console.info('restart', url);
 });
 ```
-
 ## `pause`
 
-当播放器暂停时触发
+Triggered when the player is paused
 
 <div className="run-code">▶ Run Code</div>
 
@@ -126,7 +124,7 @@ art.on('pause', () => {
 
 ## `play`
 
-当播放器播放时触发
+Triggered when the player starts playing
 
 <div className="run-code">▶ Run Code</div>
 
@@ -143,7 +141,7 @@ art.on('play', () => {
 
 ## `hotkey`
 
-当播放器热键被按下时触发
+Triggered when a hotkey on the player is pressed
 
 <div className="run-code">▶ Run Code</div>
 
@@ -160,7 +158,7 @@ art.on('hotkey', (event) => {
 
 ## `destroy`
 
-当播放器销毁时触发
+Triggered when the player is destroyed
 
 <div className="run-code">▶ Run Code</div>
 
@@ -181,7 +179,7 @@ art.on('destroy', () => {
 
 ## `focus`
 
-当播放器获得焦点时触发
+Triggered when the player gains focus
 
 <div className="run-code">▶ Run Code</div>
 
@@ -198,7 +196,7 @@ art.on('focus', (event) => {
 
 ## `blur`
 
-当播放器失去焦点时触发
+Triggered when the player loses focus
 
 <div className="run-code">▶ Run Code</div>
 
@@ -215,7 +213,7 @@ art.on('blur', (event) => {
 
 ## `dblclick`
 
-当播放器被双击时触发
+Triggered when the player is double-clicked
 
 <div className="run-code">▶ Run Code</div>
 
@@ -229,10 +227,9 @@ art.on('dblclick', (event) => {
     console.info('dblclick', event);
 });
 ```
-
 ## `click`
 
-当播放器被单击时触发
+Triggered when the player is clicked
 
 <div className="run-code">▶ Run Code</div>
 
@@ -249,7 +246,7 @@ art.on('click', (event) => {
 
 ## `error`
 
-当播放器加载视频发生错误时触发
+Triggered when an error occurs while the player is loading the video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -263,10 +260,9 @@ art.on('error', (error, reconnectTime) => {
     console.info(error, reconnectTime);
 });
 ```
-
 ## `hover`
 
-当播放器被鼠标移出或者移入时触发
+Triggered when the player is hovered or unhovered by the mouse
 
 <div className="run-code">▶ Run Code</div>
 
@@ -283,7 +279,7 @@ art.on('hover', (state, event) => {
 
 ## `mousemove`
 
-当播放器被鼠标经过时触发
+Triggered when the mouse moves over the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -297,10 +293,9 @@ art.on('mousemove', (event) => {
     console.info('mousemove', event);
 });
 ```
-
 ## `resize`
 
-当播放器尺寸变化时触发
+Triggered when the player size changes
 
 <div className="run-code">▶ Run Code</div>
 
@@ -317,7 +312,7 @@ art.on('resize', () => {
 
 ## `view`
 
-当播放器出现在视口时触发
+Triggered when the player appears in the viewport
 
 <div className="run-code">▶ Run Code</div>
 
@@ -334,7 +329,7 @@ art.on('view', (state) => {
 
 ## `lock`
 
-在移动端，当锁定的状态发生变化时触发
+On mobile, triggered when the locked state changes
 
 <div className="run-code">▶ Run Code</div>
 
@@ -352,7 +347,7 @@ art.on('lock', (state) => {
 
 ## `aspectRatio`
 
-当播放器长宽比变化时触发
+Triggered when the aspect ratio of the player changes
 
 <div className="run-code">▶ Run Code</div>
 
@@ -371,7 +366,7 @@ art.on('aspectRatio', (aspectRatio) => {
 
 ## `autoHeight`
 
-当播放器自动设置高度时触发
+Triggered when the player automatically sets the height
 
 <div className="run-code">▶ Run Code</div>
 
@@ -392,7 +387,7 @@ art.on('autoHeight', (height) => {
 
 ## `autoSize`
 
-当播放器自动设置尺寸时触发
+Triggered when the player automatically sets the size
 
 <div className="run-code">▶ Run Code</div>
 
@@ -407,10 +402,9 @@ art.on('autoSize', () => {
     console.info('autoSize');
 });
 ```
-
 ## `flip`
 
-当播放器发生翻转时触发
+Triggered when the player flips
 
 <div className="run-code">▶ Run Code</div>
 
@@ -429,7 +423,7 @@ art.on('flip', (flip) => {
 
 ## `fullscreen`
 
-当播放器发生窗口全屏时触发
+Triggered when the player goes into full screen
 
 <div className="run-code">▶ Run Code</div>
 
@@ -444,10 +438,9 @@ art.on('fullscreen', (state) => {
     console.info('fullscreen', state);
 });
 ```
-
 ## `fullscreenWeb`
 
-当播放器发生网页全屏时触发
+Triggered when the player enters web fullscreen
 
 <div className="run-code">▶ Run Code</div>
 
@@ -465,7 +458,7 @@ art.on('fullscreenWeb', (state) => {
 
 ## `mini`
 
-当播放器进入迷你模式时触发
+Triggered when the player enters mini mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -483,10 +476,9 @@ art.on('mini', (state) => {
     console.info('mini', state);
 });
 ```
-
 ## `pip`
 
-当播放器进入画中画时触发
+Triggered when the player enters Picture-in-Picture mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -504,7 +496,7 @@ art.on('pip', (state) => {
 
 ## `screenshot`
 
-当播放器被截图时触发
+Triggered when the player takes a screenshot
 
 <div className="run-code">▶ Run Code</div>
 
@@ -519,10 +511,9 @@ art.on('screenshot', (dataUri) => {
     console.info('screenshot', dataUri);
 });
 ```
-
 ## `seek`
 
-当播放器发生时间跳转时触发
+Triggered when the player jumps in time
 
 <div className="run-code">▶ Run Code</div>
 
@@ -539,7 +530,7 @@ art.on('seek', (currentTime) => {
 
 ## `subtitleOffset`
 
-当播放器发生字幕偏移时触发
+Triggered when the subtitle offset occurs in the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -558,10 +549,9 @@ art.on('subtitleOffset', (offset) => {
     console.info('subtitleOffset', offset);
 });
 ```
-
 ## `subtitleUpdate`
 
-当字幕更新时触发
+Triggered when the subtitle updates
 
 <div className="run-code">▶ Run Code</div>
 
@@ -581,7 +571,7 @@ art.on('subtitleUpdate', (text) => {
 
 ## `subtitleLoad`
 
-当字幕加载时触发
+Triggered when the subtitle loads
 
 <div className="run-code">▶ Run Code</div>
 
@@ -598,10 +588,9 @@ art.on('subtitleLoad', (url) => {
     console.info('subtitleLoad', url);
 });
 ```
-
 ## `subtitleSwitch`
 
-当字幕切换时触发
+Triggered when subtitles switch
 
 <div className="run-code">▶ Run Code</div>
 
@@ -625,7 +614,7 @@ art.on('subtitleSwitch', (url) => {
 
 ## `info`
 
-当信息面板显示或隐藏时触发
+Triggered when the information panel is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -639,10 +628,9 @@ art.on('info', (state) => {
     console.log(state);
 });
 ```
-
 ## `layer`
 
-当自定义层显示或隐藏时触发
+Triggered when a custom layer is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -659,7 +647,7 @@ art.on('layer', (state) => {
 
 ## `loading`
 
-当加载器显示或隐藏时触发
+Triggered when a loader is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -676,7 +664,7 @@ art.on('loading', (state) => {
 
 ## `mask`
 
-当遮罩层显示或隐藏时触发
+Triggered when a mask layer is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -693,7 +681,7 @@ art.on('mask', (state) => {
 
 ## `subtitle`
 
-当字幕层显示或隐藏时触发
+Triggered when the subtitle layer is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -710,7 +698,7 @@ art.on('subtitle', (state) => {
 
 ## `contextmenu`
 
-当右键菜单显示或隐藏时触发
+Triggered when the right-click menu is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -727,7 +715,7 @@ art.on('contextmenu', (state) => {
 
 ## `control`
 
-当控制器显示或隐藏时触发
+Triggered when the controller is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -744,7 +732,7 @@ art.on('control', (state) => {
 
 ## `setting`
 
-当设置面板显示或隐藏时触发
+Triggered when the settings panel is shown or hidden
 
 <div className="run-code">▶ Run Code</div>
 
@@ -762,7 +750,7 @@ art.on('setting', (state) => {
 
 ## `muted`
 
-当静音的状态变化时触发
+Triggered when the muted state changes
 
 <div className="run-code">▶ Run Code</div>
 
@@ -779,85 +767,83 @@ art.on('muted', (state) => {
 
 ## `video:canplay`
 
-浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
+The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering
 
 ## `video:canplaythrough`
 
-浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
+The browser estimates it can play the media through to the end without stopping for content buffering
 
 ## `video:complete`
 
-OfflineAudioContext 渲染完成
+OfflineAudioContext rendering is complete
 
 ## `video:durationchange`
 
-duration 属性的值改变时触发
+Triggered when the value of the duration property changes
 
 ## `video:emptied`
 
-媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它
-
+The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it
+```
 ## `video:ended`
 
-视频停止播放，因为 media 已经到达结束点
+The video has stopped because the media reached the end point
 
 ## `video:error`
 
-获取媒体数据时出错，或者资源类型不是受支持的媒体格式
+An error occurred while fetching media data, or the resource type is not a supported media format
 
 ## `video:loadeddata`
 
-media 中的首帧已经完成加载
+The first frame of the media has finished loading
 
 ## `video:loadedmetadata`
 
-已加载元数据
+Metadata has been loaded
 
 ## `video:pause`
 
-播放已暂停
+Playback has been paused
 
 ## `video:play`
 
-播放已开始
+Playback has started
 
 ## `video:playing`
 
-由于缺乏数据而暂停或延迟后，播放准备开始
+Playback is ready to start following a pause or delay due to lack of data
 
 ## `video:progress`
 
-在浏览器加载资源时周期性触发
+Periodically triggered while the browser is loading resources
 
 ## `video:ratechange`
 
-播放速率发生变化
+The playback rate has changed
 
 ## `video:seeked`
 
-跳帧（seek）操作完成
+A seek (frame skipping) operation has completed
 
 ## `video:seeking`
 
-跳帧（seek）操作开始
+A seek (frame skipping) operation has started
 
 ## `video:stalled`
 
-用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现
+The user agent is trying to fetch media data, but the data unexpectedly has not appeared
 
 ## `video:suspend`
 
-媒体数据加载已暂停
+Media data loading has been suspended
 
 ## `video:timeupdate`
 
-currentTime 属性指定的时间发生变化
-
+The time specified by the currentTime attribute has changed
 ## `video:volumechange`
 
-音量发生变化
+Volume changed
 
 ## `video:waiting`
 
-由于暂时缺少数据，播放已停止
-
+Playback has stopped due to temporarily missing data
\ No newline at end of file
diff --git a/packages/artplayer-vitepress/docs/en/advanced/global.md b/packages/artplayer-vitepress/docs/en/advanced/global.md
index 026c95756..0555cbfcb 100644
--- a/packages/artplayer-vitepress/docs/en/advanced/global.md
+++ b/packages/artplayer-vitepress/docs/en/advanced/global.md
@@ -1,10 +1,10 @@
-# 全局属性
+# Global Attributes
 
-这里的 `全局属性` 也是指挂载在 `构造函数` 的 `一级属性`，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到
+Here, `Global Attributes` refer to the `first-level properties` mounted on the `constructor`. Property names are all in uppercase, subject to change in the future and basically not needed.
 
 ## DEBUG
 
-是否开始 `debug` 模式，可以打印出视频全部的内置事件，默认关闭
+Whether to start `debug` mode, which can print out all built-in events of the video by default is turned off.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -19,7 +19,7 @@ var art = new Artplayer({
 
 ## CONTEXTMENU
 
-是否开启右键菜单，默认开启
+Whether to enable the right-click context menu, enabled by default.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -31,10 +31,9 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 ```
-
 ## NOTICE_TIME
 
-提示信息的显示时长，单位为毫秒，默认为 `2000`
+The display duration of the notification message, in milliseconds, defaults to `2000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -49,7 +48,7 @@ var art = new Artplayer({
 
 ## SETTING_WIDTH
 
-设置面板的默认宽度，单位为像素，默认为 `250`
+The default width of the settings panel, in pixels, defaults to `250`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -66,10 +65,9 @@ var art = new Artplayer({
     aspectRatio: true,
 });
 ```
-
 ## SETTING_ITEM_WIDTH
 
-设置面板的设置项的默认宽度，单位为像素，默认为 `200`
+Set the default width of the settings items in the panel, in pixels, the default is `200`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -89,7 +87,7 @@ var art = new Artplayer({
 
 ## SETTING_ITEM_HEIGHT
 
-设置面板的设置项的默认高度，单位为像素，默认为 `35`
+Set the default height of the settings items in the panel, in pixels, the default is `35`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -109,7 +107,7 @@ var art = new Artplayer({
 
 ## RESIZE_TIME
 
-`resize` 事件的节流时间，单位为毫秒，默认为 `200`
+Throttle time for the `resize` event, in milliseconds, defaults to `200`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -128,7 +126,7 @@ art.on('resize', () => {
 
 ## SCROLL_TIME
 
-`scroll` 事件的节流时间，单位为毫秒，默认为 `200`
+Throttle time for the `scroll` event, in milliseconds, defaults to `200`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -144,10 +142,9 @@ art.on('scroll', () => {
     console.log('scroll');
 });
 ```
-
 ## SCROLL_GAP
 
-`view` 事件的边界容差距离，单位为像素，默认为 `50`
+The boundary tolerance distance for the `view` event, in pixels, default is `50`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -166,7 +163,7 @@ art.on('scroll', () => {
 
 ## AUTO_PLAYBACK_MAX
 
-自动回放功能的最大记录数，默认为 `10`
+The maximum number of records for the automatic playback feature, default is `10`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -182,7 +179,7 @@ var art = new Artplayer({
 
 ## AUTO_PLAYBACK_MIN
 
-自动回放功能的最小记录时长，单位为秒，默认为 `5`
+The minimum duration for the auto playback feature, in seconds, with a default of `5`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -198,7 +195,7 @@ var art = new Artplayer({
 
 ## AUTO_PLAYBACK_TIMEOUT
 
-自动回放功能的隐藏延迟时长，单位为毫秒，默认为 `3000`
+The delay duration for hiding the auto playback feature, in milliseconds, with a default of `3000`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -214,7 +211,7 @@ var art = new Artplayer({
 
 ## RECONNECT_TIME_MAX
 
-发生连接错误时，自动连接的最大次数，默认为 `5`
+The maximum number of automatic reconnection attempts when a connection error occurs, default is `5`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -229,7 +226,7 @@ var art = new Artplayer({
 
 ## RECONNECT_SLEEP_TIME
 
-发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 `1000`
+The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is `1000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -244,7 +241,9 @@ var art = new Artplayer({
 
 ## CONTROL_HIDE_TIME
 
-底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 `3000`
+...
+
+Auto-hide delay time for the bottom control bar, measured in milliseconds, default is `3000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -259,7 +258,7 @@ var art = new Artplayer({
 
 ## DBCLICK_TIME
 
-双击事件的延迟事件，单位为毫秒，默认为 `300`
+Double-click event delay time, measured in milliseconds, default is `300`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -278,7 +277,7 @@ art.on('dblclick', () => {
 
 ## DBCLICK_FULLSCREEN
 
-在桌面端，是否双击切换全屏，默认为 `true`
+On desktop, whether to switch to fullscreen on double click, default is `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -293,7 +292,7 @@ var art = new Artplayer({
 
 ## MOBILE_DBCLICK_PLAY
 
-在移动端，是否双击切换播放暂停，默认为 `true`
+On mobile, whether to toggle play/pause on double click, default is `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -308,7 +307,19 @@ var art = new Artplayer({
 
 ## MOBILE_CLICK_PLAY
 
-在移动端，是否单击切换播放暂停，默认为 `false`
+On mobile, whether to play/pause on single click, default is `false`
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+Artplayer.MOBILE_CLICK_PLAY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+```
+On mobile devices, whether a tap toggles play/pause, defaults to `false`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -323,7 +334,7 @@ var art = new Artplayer({
 
 ## AUTO_ORIENTATION_TIME
 
-在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 `200`
+On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to `200`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -338,8 +349,7 @@ var art = new Artplayer({
 ```
 
 ## INFO_LOOP_TIME
-
-信息面板的刷新时间，单位为毫秒，默认为 `1000`
+Info panel refresh time, unit in milliseconds, default is `1000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -356,7 +366,7 @@ art.info.show = true;
 
 ## FAST_FORWARD_VALUE
 
-在移动端，长按加速的速率倍数，默认为 `3`
+On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is `3`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -372,7 +382,8 @@ var art = new Artplayer({
 
 ## FAST_FORWARD_TIME
 
-在移动端，长按加速的延迟时间，单位为毫秒，默认为 `1000`
+The time, in milliseconds, to fast-forward when double-tapped, default is `10`
+On mobile, the delay time of the long-press acceleration, in milliseconds, default is `1000`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -388,7 +399,7 @@ var art = new Artplayer({
 
 ## TOUCH_MOVE_RATIO
 
-在移动端，左右滑动进度的速率倍数，默认为 `0.5`
+On mobile, the ratio of the speed of sliding left and right to seek, default is `0.5`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -403,7 +414,7 @@ var art = new Artplayer({
 
 ## VOLUME_STEP
 
-快捷键调节音量的幅度比例，默认为 `0.1`
+The step ratio of adjusting volume with shortcuts, default is `0.1`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -418,7 +429,7 @@ var art = new Artplayer({
 
 ## SEEK_STEP
 
-快捷键调节播放进度的幅度，单位为秒，默认为 `5`
+The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is `5`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -433,7 +444,7 @@ var art = new Artplayer({
 
 ## PLAYBACK_RATE
 
-内置播放速率的列表，默认为 `[0.5, 0.75, 1, 1.25, 1.5, 2]`
+The list of built-in playback speeds, by default `[0.5, 0.75, 1, 1.25, 1.5, 2]`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -453,7 +464,7 @@ art.setting.show = true;
 
 ## ASPECT_RATIO
 
-内置视频长宽比的列表，默认为 `['default', '4:3', '16:9']`
+Built-in list of video aspect ratios, default is `['default', '4:3', '16:9']`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -470,10 +481,9 @@ var art = new Artplayer({
 art.contextmenu.show = true;
 art.setting.show = true;
 ```
-
 ## FLIP
 
-内置视频翻转的列表，默认为 `['normal', 'horizontal', 'vertical']`
+Built-in list of video flips, defaults to `['normal', 'horizontal', 'vertical']`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -493,7 +503,7 @@ art.setting.show = true;
 
 ## FULLSCREEN_WEB_IN_BODY
 
-网页全屏时，是否把播放器挂在在 `body` 元素下，默认为 `false`
+When in web fullscreen, whether to mount the player under the `body` element, defaults to `false`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -506,10 +516,9 @@ var art = new Artplayer({
     fullscreenWeb: true,
 });
 ```
-
 ## LOG_VERSION
 
-设置是否打印播放器版本，默认为 `true`
+Setting whether to print the player version, the default is `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -524,7 +533,7 @@ var art = new Artplayer({
 
 ## USE_RAF
 
-设置是否使用 `requestAnimationFrame` ，默认为 `false`，目前主要用于进度条的平滑效果
+Setting whether to use `requestAnimationFrame`, the default is `false`, currently mainly used for smooth progress bar effects
 
 <div className="run-code">▶ Run Code</div>
 
diff --git a/packages/artplayer-vitepress/docs/en/advanced/plugin.md b/packages/artplayer-vitepress/docs/en/advanced/plugin.md
index 4578acb33..24754d311 100644
--- a/packages/artplayer-vitepress/docs/en/advanced/plugin.md
+++ b/packages/artplayer-vitepress/docs/en/advanced/plugin.md
@@ -1,8 +1,8 @@
-# 编写插件
+# Writing Plugins
 
-但你已经知道播放器的`属性`, `方法`和`事件`后，再编写插件是非常简单的事
+Once you know the player's `properties`, `methods`, and `events`, writing plugins is very simple.
 
-可以在实例化的时候加载插件的函数
+You can load the plugin functions when instantiated.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -28,8 +28,9 @@ art.on('ready', () => {
     console.info(art.plugins.myPlugin);
 });
 ```
+Here's the translation of the provided text into English while preserving the Markdown formatting:
 
-可以在实例化之后再加载插件的函数
+A function that allows loading plugins after instantiation
 
 <div className="run-code">▶ Run Code</div>
 
@@ -57,10 +58,7 @@ art.on('ready', () => {
 });
 ```
 
-例如我想写一个在视频暂停后，显示一个图片广告的插件
-
-<div className="run-code">▶ Run Code</div>
-
+For example, I want to write a plugin that displays an image advertisement after the video is paused.
 ```js
 function adsPlugin(option) {
     return (art) => {
diff --git a/packages/artplayer-vitepress/docs/en/advanced/property.md b/packages/artplayer-vitepress/docs/en/advanced/property.md
index aab4ee0de..29b32b8f5 100644
--- a/packages/artplayer-vitepress/docs/en/advanced/property.md
+++ b/packages/artplayer-vitepress/docs/en/advanced/property.md
@@ -1,16 +1,17 @@
-# 实例属性
+# Instance Properties
 
-这里的 `实例属性` 是指挂载在 `实例` 的 `一级属性`，比较常用
+Here, `instance properties` refer to the `primary properties` mounted on the `instance`, which are quite commonly used.
 
 ## `play`
 
 -   Type: `Function`
 
-播放视频
+Play video
 
 <div className="run-code">▶ Run Code</div>
 
 ```js{8}
+
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
@@ -26,7 +27,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-暂停视频
+Pause video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -45,12 +46,11 @@ art.on('ready', () => {
     }, 3000);
 });
 ```
-
 ## `toggle`
 
 -   Type: `Function`
 
-切换视频的播放和暂停
+Toggle the play and pause state of the video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -75,7 +75,7 @@ art.on('ready', () => {
 -   Type: `Function`
 -   Parameter: `Boolean`
 
-销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true`
+Destroy the player. Accepts a parameter indicating whether to remove the player's `html` after destruction, which defaults to `true`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -89,13 +89,12 @@ art.on('ready', () => {
     art.destroy();
 });
 ```
-
 ## `seek`
 
 -   Type: `Setter`
 -   Parameter: `Number`
 
-视频时间跳转，单位秒
+Jump to a specific time in the video, in seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -115,7 +114,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Number`
 
-视频时间快进，单位秒
+Fast forward the video time, in seconds.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -129,13 +128,12 @@ art.on('ready', () => {
     art.forward = 5;
 });
 ```
-
 ## `backward`
 
 -   Type: `Setter`
 -   Parameter: `Number`
 
-视频时间快退，单位秒
+Video rewind time in seconds
 
 <div className="run-code">▶ Run Code</div>
 
@@ -159,7 +157,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-设置和获取视频音量，范围在：`[0, 1]`
+Sets and gets the video volume, which ranges from `[0, 1]`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -175,13 +173,12 @@ art.on('ready', () => {
     console.info(art.volume);
 });
 ```
-
 ## `url`
 
--   Type: `Setter/Getter`
--   Parameter: `String`
+- Type: `Setter/Getter`
+- Parameter: `String`
 
-设置和获取视频地址
+Set and retrieve the video address
 
 <div className="run-code">▶ Run Code</div>
 
@@ -198,10 +195,10 @@ art.on('ready', () => {
 
 ## `switch`
 
--   Type: `Setter`
--   Parameter: `String`
+- Type: `Setter`
+- Parameter: `String`
 
-设置视频地址，设置时和 `art.url` 类似，但会执行一些优化操作
+Set the video address, which is similar to `art.url`, but performs some optimization operations
 
 <div className="run-code">▶ Run Code</div>
 
@@ -218,13 +215,12 @@ art.on('ready', () => {
     }, 3000);
 });
 ```
-
 ## `switchUrl`
 
--   Type: `Function`
--   Parameter: `String`
+- Type: `Function`
+- Parameter: `String`
 
-设置视频地址，设置时和 `art.url` 类似，但会执行一些优化操作
+Set the video address, similar to setting `art.url`, but some optimization operations will be executed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -242,18 +238,17 @@ art.on('ready', () => {
 });
 ```
 
-:::warning 提示
+:::warning Warning
 
-`art.switch` 和 `art.switchUrl` 的功能是一样的，只是 `art.switchUrl` 方法会返回 `Promise`，当 `resolve` 时表示新地址是可以播放，`reject` 时表示新地址加载错误
+`art.switch` and `art.switchUrl` have the same functionality. However, the `art.switchUrl` method will return a `Promise`. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.
 
 :::
-
 ## `switchQuality`
 
--   Type: `Function`
--   Parameter: `String`
+- Type: `Function`
+- Parameter: `String`
 
-设置视频画质地址，和 `art.switchUrl` 类似，但会带上之前的播放进度
+Set video quality address, similar to `art.switchUrl`, but it will carry over the previous playback progress.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -273,10 +268,10 @@ art.on('ready', () => {
 
 ## `muted`
 
--   Type: `Setter/Getter`
--   Parameter: `Boolean`
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
 
-设置和获取视频是否静音
+Set and get whether the video is muted.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -298,7 +293,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
 
-设置和获取视频当前时间，设置时间时和 `seek` 类似，但它不会触发额外的事件
+Set and get the current 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>
 
@@ -314,12 +309,11 @@ art.on('ready', () => {
     console.info(art.currentTime);
 });
 ```
-
 ## `duration`
 
 -   Type: `Getter`
 
-获取视频时长
+Get the video duration
 
 <div className="run-code">▶ Run Code</div>
 
@@ -334,9 +328,9 @@ art.on('ready', () => {
 });
 ```
 
-:::warning 提示
+:::warning Note
 
-有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 `0`
+Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be `0`
 
 :::
 
@@ -344,7 +338,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-下载当前视频帧的截图
+Download a screenshot of the current video frame
 
 <div className="run-code">▶ Run Code</div>
 
@@ -358,12 +352,11 @@ art.on('ready', () => {
     art.screenshot();
 });
 ```
-
 ## `getDataURL`
 
--   Type: `Function`
+- Type: `Function`
 
-获取当前视频帧的截图的`base64`地址，返回的是一个 `Promise`
+Gets the `base64` address of the screenshot of the current video frame, which returns a `Promise`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -375,15 +368,15 @@ var art = new Artplayer({
 
 art.on('ready', async () => {
     const url = await art.getDataURL();
-	console.info(url)
+    console.info(url)
 });
 ```
 
 ## `getBlobUrl`
 
--   Type: `Function`
+- Type: `Function`
 
-获取当前视频帧的截图的`blob`地址，返回的是一个 `Promise`
+Gets the `blob` address of the screenshot of the current video frame, which returns a `Promise`.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -398,13 +391,12 @@ art.on('ready', async () => {
     console.info(url);
 });
 ```
-
 ## `fullscreen`
 
 -   Type: `Setter/Getter`
 -   Parameter: `Boolean`
 
-设置和获取播放器窗口全屏
+Set and get the player window fullscreen
 
 <div className="run-code">▶ Run Code</div>
 
@@ -424,18 +416,17 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 提示
+:::warning Note
 
-由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
+Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).
 
 :::
-
 ## `fullscreenWeb`
 
--   Type: `Setter/Getter`
--   Parameter: `Boolean`
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
 
-设置和获取播放器网页全屏
+Set and get the player web page full screen
 
 <div className="run-code">▶ Run Code</div>
 
@@ -457,10 +448,10 @@ art.on('ready', () => {
 
 ## `pip`
 
--   Type: `Setter/Getter`
--   Parameter: `Boolean`
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
 
-设置和获取播放器画中画模式
+Set and get the player picture-in-picture mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -480,9 +471,9 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 提示
+:::warning Warning
 
-由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
+Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.
 
 :::
 
@@ -491,7 +482,7 @@ var art = new Artplayer({
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-设置和获取视频海报，只有在视频播放前才能看到海报效果
+Set and get the video poster, the poster effect is visible only before the video starts playing.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -508,13 +499,12 @@ art.on('ready', () => {
     console.info(art.poster);
 });
 ```
-
 ## `mini`
 
--   Type: `Setter/Getter`
--   Parameter: `Boolean`
+- Type: `Setter/Getter`
+- Parameter: `Boolean`
 
-设置和获取播放器迷你模式
+Set and get the player's mini mode
 
 <div className="run-code">▶ Run Code</div>
 
@@ -531,10 +521,10 @@ art.on('ready', () => {
 
 ## `playing`
 
--   Type: `Getter`
--   Parameter: `Boolean`
+- Type: `Getter`
+- Parameter: `Boolean`
 
-获取视频是否正在播放中
+Get whether the video is currently playing
 
 <div className="run-code">▶ Run Code</div>
 
@@ -549,12 +539,11 @@ art.on('ready', () => {
     console.info(art.playing);
 });
 ```
-
 ## `autoSize`
 
 -   Type: `Function`
 
-设置视频是否自适应尺寸
+Sets whether the video should auto adjust its size
 
 <div className="run-code">▶ Run Code</div>
 
@@ -573,7 +562,7 @@ art.on('ready', () => {
 
 -   Type: `Getter`
 
-获取播放器的尺寸和坐标信息
+Gets the size and position information of the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -587,10 +576,9 @@ art.on('ready', () => {
     console.info(JSON.stringify(art.rect));
 });
 ```
+:::warning Warning
 
-:::warning 提示
-
-尺寸和坐标信息是通过 `getBoundingClientRect` 获取的
+The size and coordinates are obtained via `getBoundingClientRect`
 
 :::
 
@@ -599,7 +587,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-设置和获取播放器翻转，支持`normal`,  `horizontal`,  `vertical`
+Set and get the player flip, supports `normal`, `horizontal`, `vertical`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -620,8 +608,7 @@ art.on('ready', () => {
 
 -   Type: `Setter/Getter`
 -   Parameter: `Number`
-
-设置和获取播放器播放速度
+Set and get the playback speed of the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -643,7 +630,7 @@ art.on('ready', () => {
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-设置和获取播放器长宽比
+Set and get the aspect ratio of the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -659,12 +646,11 @@ art.on('ready', () => {
     console.info(art.aspectRatio);
 });
 ```
-
 ## `autoHeight`
 
 -   Type: `Function`
 
-当容器只有宽度，该属性可以自动计算出并设置视频的高度
+When the container has only width, this attribute can automatically calculate and set the height of the video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -683,9 +669,9 @@ art.on('resize', () => {
 });
 ```
 
-:::warning 提示
+:::warning Warning
 
-当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
+When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.
 
 :::
 
@@ -694,7 +680,7 @@ art.on('resize', () => {
 -   Type: `Function`
 -   Parameter: `String`
 
-动态获取和设置 video 元素的属性
+Dynamically get and set the attributes of the video element
 
 <div className="run-code">▶ Run Code</div>
 
@@ -713,10 +699,10 @@ art.on('ready', () => {
 
 ## `type`
 
--   Type: `Setter/Getter`
--   Parameter: `String`
+- Type: `Setter/Getter`
+- Parameter: `String`
 
-动态获取和设置视频类型
+Dynamically get and set the video type
 
 <div className="run-code">▶ Run Code</div>
 
@@ -732,13 +718,12 @@ art.on('ready', () => {
     console.info(art.type);
 });
 ```
-
 ## `theme`
 
 -   Type: `Setter/Getter`
 -   Parameter: `String`
 
-动态获取和设置播放器主题颜色
+Dynamically get and set the player's theme color
 
 <div className="run-code">▶ Run Code</div>
 
@@ -759,7 +744,7 @@ art.on('ready', () => {
 
 -   Type: `Function`
 
-开启隔空播放
+Activate airplay
 
 <div className="run-code">▶ Run Code</div>
 
@@ -778,12 +763,11 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `loaded`
 
--   Type: `Getter`
+- Type: `Getter`
 
-视频缓存的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
+The proportion of the video that is cached, ranging from `[0, 1]`, commonly used with the `video:timeupdate` event.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -800,9 +784,9 @@ art.on('video:timeupdate', () => {
 
 ## `played`
 
--   Type: `Getter`
+- Type: `Getter`
 
-视频播放的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
+The proportion of the video that has been played, ranging from `[0, 1]`, commonly used with the `video:timeupdate` event.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -816,12 +800,11 @@ art.on('video:timeupdate', () => {
     console.info(art.played);
 });
 ```
-
 ## `proxy`
 
--   Type: `Function`
+- Type: `Function`
 
-`DOM` 事件的代理函数，实质上代理了 `addEventListener` 和 `removeEventListener`, 当使用 `proxy` 来处理事件，播放器销毁时也会自动销毁该事件
+A proxy function for `DOM` events, which essentially proxies `addEventListener` and `removeEventListener`. When using `proxy` to handle events, the event will automatically be destroyed when the player is destroyed.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -838,9 +821,9 @@ art.proxy(container, 'click', event => {
 });
 ```
 
-:::warning 提示
+:::warning Tip
 
-假如你需要一些 `DOM` 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
+If you need some `DOM` events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.
 
 :::
 
@@ -848,7 +831,7 @@ art.proxy(container, 'click', event => {
 
 -   Type: `Function`
 
-`DOM` 的查询函数，类似 `document.querySelector`，但被查询的对象局限于当前播放器内，可以避免同类名的错误
+DOM query function, similar to `document.querySelector`, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -865,7 +848,7 @@ console.info(art.query('.art-video'));
 
 -   Type: `Element`
 
-快捷返回播放器的 `video` 元素
+A shortcut to return the `video` element of the player.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -882,7 +865,7 @@ console.info(art.video);
 
 -   Type: `Function`
 
-动态获取或设置 `css` 变量
+Dynamically getting or setting `css` variables
 
 <div className="run-code">▶ Run Code</div>
 
@@ -904,7 +887,7 @@ art.on('ready', () => {
 -   Type: `Setter`
 -   Parameter: `Array`
 
-动态设置画质列表
+Dynamically setting the list of qualities
 
 <div className="run-code">▶ Run Code</div>
 
diff --git a/packages/artplayer-vitepress/docs/en/component/contextmenu.md b/packages/artplayer-vitepress/docs/en/component/contextmenu.md
index a1f1e4926..2ec517c80 100644
--- a/packages/artplayer-vitepress/docs/en/component/contextmenu.md
+++ b/packages/artplayer-vitepress/docs/en/component/contextmenu.md
@@ -1,19 +1,19 @@
-# 右键菜单
+# Context Menu
 
-## 配置
+## Configuration
 
-| 属性      | 类型                | 描述                       |
-| --------- | ------------------- | -------------------------- |
-| `disable` | `Boolean`           | 是否禁用组件               |
-| `name`    | `String`            | 组件唯一名称，用于标记类名 |
-| `index`   | `Number`            | 组件索引，用于显示的优先级 |
-| `html`    | `String`, `Element` | 组件的 DOM 元素            |
-| `style`   | `Object`            | 组件样式对象               |
-| `click`   | `Function`          | 组件点击事件               |
-| `mounted` | `Function`          | 组件挂载后触发             |
-| `tooltip` | `String`            | 组件的提示文本             |
+| Property  | Type                | Description                 |
+| --------- | ------------------- | ----------------------------|
+| `disable` | `Boolean`           | Whether to disable the component |
+| `name`    | `String`            | Unique name of the component, used for marking the class name |
+| `index`   | `Number`            | Component index, used for display priority |
+| `html`    | `String`, `Element` | The DOM element of the component |
+| `style`   | `Object`            | Style object for the component |
+| `click`   | `Function`          | Click event for the component |
+| `mounted` | `Function`          | Triggered after the component is mounted |
+| `tooltip` | `String`            | Tooltip text for the component             |
 
-## 创建
+## Creation
 
 <div className="run-code">▶ Run Code</div>
 
@@ -38,8 +38,7 @@ art.contextmenu.show = true;
 // Get the Element of contextmenu by name
 console.info(art.contextmenu['your-menu']);
 ```
-
-## 添加
+## Add
 
 <div className="run-code">▶ Run Code</div>
 
@@ -64,7 +63,7 @@ art.contextmenu.show = true;
 console.info(art.contextmenu['your-menu']);
 ```
 
-## 删除
+## Delete
 
 <div className="run-code">▶ Run Code</div>
 
@@ -88,13 +87,13 @@ art.contextmenu.show = true;
 
 art.on('ready', () => {
     setTimeout(() => {
-        // Delete the contextmenu by name
+        // Delete the context menu by name
         art.contextmenu.remove('your-menu')
     }, 3000);
 });
 ```
 
-## 更新
+## Updates
 
 <div className="run-code">▶ Run Code</div>
 
diff --git a/packages/artplayer-vitepress/docs/en/component/controls.md b/packages/artplayer-vitepress/docs/en/component/controls.md
index dae6a0f86..8cd5824ef 100644
--- a/packages/artplayer-vitepress/docs/en/component/controls.md
+++ b/packages/artplayer-vitepress/docs/en/component/controls.md
@@ -1,22 +1,22 @@
-# 控制器
+# Controller
 
-## 配置
+## Configuration
 
-| 属性       | 类型                | 描述                                       |
+| Property   | Type                | Description                               |
 | ---------- | ------------------- | ------------------------------------------ |
-| `disable`  | `Boolean`           | 是否禁用组件                               |
-| `name`     | `String`            | 组件唯一名称，用于标记类名                 |
-| `index`    | `Number`            | 组件索引，用于显示的优先级                 |
-| `html`     | `String`, `Element` | 组件的 DOM 元素                            |
-| `style`    | `Object`            | 组件样式对象                               |
-| `click`    | `Function`          | 组件点击事件                               |
-| `mounted`  | `Function`          | 组件挂载后触发                             |
-| `tooltip`  | `String`            | 组件的提示文本                             |
-| `position` | `String`            | `left` 和 `right` 控制控制器出现的左右位置 |
-| `selector` | `Array`             | 选择列表的对象数组                         |
-| `onSelect` | `Function`          | 选择列表的元素被点击时触发的函数           |
+| `disable`  | `Boolean`           | Whether to disable the component          |
+| `name`     | `String`            | The unique name of the component for class identification |
+| `index`    | `Number`            | The index of the component, used for display priority |
+| `html`     | `String`, `Element` | The component's DOM element               |
+| `style`    | `Object`            | The style object for the component        |
+| `click`    | `Function`          | Component click event                        |
+| `mounted`  | `Function`          | Triggered after the component is mounted    |
+| `tooltip`  | `String`            | Tooltip text for the component              |
+| `position` | `String`            | `left` and `right` control the position of the controller |
+| `selector` | `Array`             | An array of objects for the selection list  |
+| `onSelect` | `Function`          | Function triggered when an item from the selection list is clicked |
 
-## 创建
+## Creation
 
 <div className="run-code">▶ Run Code</div>
 
@@ -66,8 +66,7 @@ var art = new Artplayer({
 console.info(art.controls['your-button']);
 console.info(art.controls['subtitle']);
 ```
-
-## 添加
+## Adding
 
 <div className="run-code">▶ Run Code</div>
 
@@ -97,8 +96,7 @@ art.controls.add({
 // Get the Element of control by name
 console.info(art.controls['button1']);
 ```
-
-## 删除
+## Delete
 
 <div className="run-code">▶ Run Code</div>
 
@@ -127,8 +125,7 @@ art.on('ready', () => {
     }, 3000);
 });
 ```
-
-## 更新
+## Update
 
 <div className="run-code">▶ Run Code</div>
 
diff --git a/packages/artplayer-vitepress/docs/en/component/layers.md b/packages/artplayer-vitepress/docs/en/component/layers.md
index 513ecb4fa..b312fd93d 100644
--- a/packages/artplayer-vitepress/docs/en/component/layers.md
+++ b/packages/artplayer-vitepress/docs/en/component/layers.md
@@ -1,19 +1,19 @@
-# 业务层
+# Layer
 
-## 配置
+## Configuration
 
-| 属性      | 类型                | 描述                       |
-| --------- | ------------------- | -------------------------- |
-| `disable` | `Boolean`           | 是否禁用组件               |
-| `name`    | `String`            | 组件唯一名称，用于标记类名 |
-| `index`   | `Number`            | 组件索引，用于显示的优先级 |
-| `html`    | `String`, `Element` | 组件的 DOM 元素            |
-| `style`   | `Object`            | 组件样式对象               |
-| `click`   | `Function`          | 组件点击事件               |
-| `mounted` | `Function`          | 组件挂载后触发             |
-| `tooltip` | `String`            | 组件的提示文本             |
+| Property  | Type                  | Description                  |
+| --------- | --------------------- | ---------------------------- |
+| `disable` | `Boolean`             | Whether to disable the component |
+| `name`    | `String`              | Unique name of the component, used for marking class name |
+| `index`   | `Number`              | Component index, used for display priority |
+| `html`    | `String`, `Element`   | The DOM element of the component |
+| `style`   | `Object`              | Style object for the component |
+| `click`   | `Function`            | Click event for the component |
+| `mounted` | `Function`            | Triggered after the component is mounted |
+| `tooltip` | `String` | Tooltip text for the component |
 
-## 创建
+## Creation
 
 <div className="run-code">▶ Run Code</div>
 
@@ -24,9 +24,9 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     layers: [
         {
-            name: 'potser',
+            name: 'poster',
             html: `<img style="width: 100px" src="${img}">`,
-            tooltip: 'Potser Tip',
+            tooltip: 'Poster Tip',
             style: {
                 position: 'absolute',
                 top: '50px',
@@ -43,10 +43,9 @@ var art = new Artplayer({
 });
 
 // Get the Element of layer by name
-console.info(art.layers['potser']);
+console.info(art.layers['poster']);
 ```
-
-## 添加
+## Add
 
 <div className="run-code">▶ Run Code</div>
 
@@ -58,9 +57,9 @@ var art = new Artplayer({
 });
 
 art.layers.add({
-    name: 'potser',
+    name: 'poster',
     html: `<img style="width: 100px" src="${img}">`,
-    tooltip: 'Potser Tip',
+    tooltip: 'Poster Tip',
     style: {
         position: 'absolute',
         top: '50px',
@@ -75,10 +74,9 @@ art.layers.add({
 });
 
 // Get the Element of layer by name
-console.info(art.layers['potser']);
+console.info(art.layers['poster']);
 ```
-
-## 删除
+## Delete
 
 <div className="run-code">▶ Run Code</div>
 
@@ -89,7 +87,7 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     layers: [
         {
-            name: 'potser',
+            name: 'poster',
             html: `<img style="width: 100px" src="${img}">`,
             style: {
                 position: 'absolute',
@@ -103,12 +101,11 @@ var art = new Artplayer({
 art.on('ready', () => {
     setTimeout(() => {
         // Delete the layer by name
-        art.layers.remove('potser');
+        art.layers.remove('poster');
     }, 3000);
 });
 ```
-
-## 更新
+## Update
 
 <div className="run-code">▶ Run Code</div>
 
@@ -119,7 +116,7 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     layers: [
         {
-            name: 'potser',
+            name: 'poster',
             html: `<img style="width: 100px" src="${img}">`,
             style: {
                 position: 'absolute',
@@ -134,7 +131,7 @@ art.on('ready', () => {
     setTimeout(() => {
         // Update the layer by name
         art.layers.update({
-            name: 'potser',
+            name: 'poster',
             html: `<img style="width: 200px" src="${img}">`,
             style: {
                 position: 'absolute',
diff --git a/packages/artplayer-vitepress/docs/en/component/setting.md b/packages/artplayer-vitepress/docs/en/component/setting.md
index a114ed66d..479147164 100644
--- a/packages/artplayer-vitepress/docs/en/component/setting.md
+++ b/packages/artplayer-vitepress/docs/en/component/setting.md
@@ -1,8 +1,8 @@
-# 设置面板
+# Settings Panel
 
-## 内置
+## Built-in
 
-须先打开设置面板，然后自带四个内置项：`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
+First, open the settings panel, and then it comes with four built-in items: `flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -10,7 +10,7 @@
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
-	setting: true,
+    setting: true,
     flip: true,
     playbackRate: true,
     aspectRatio: true,
@@ -18,12 +18,12 @@ var art = new Artplayer({
 });
 ```
 
+## Create - Selection List
 
-## 创建 - 选择列表
+| Property   | Type                | Description   |
+| ---------- | ------------------- | ------------  |
+| `html`     | `String`, `Element` | Element's DOM |
 
-| 属性       | 类型                | 描述         |
-| ---------- | ------------------- | ------------ |
-| `html`     | `String`, `Element` | 元素的 DOM   |
 | `icon`     | `String`, `Element` | 元素的图标   |
 | `selector` | `Array`             | 元素列表     |
 | `onSelect` | `Function`          | 元素点击事件 |
@@ -88,7 +88,7 @@ var art = new Artplayer({
 });
 ```
 
-## 创建 - 列表嵌套
+## Creating - Nested Lists
 
 <div className="run-code">▶ Run Code</div>
 
@@ -138,16 +138,15 @@ var art = new Artplayer({
     ],
 });
 ```
+## Create - Toggle Button
 
-## 创建 - 切换按钮
-
-| 属性       | 类型                | 描述            |
-| ---------- | ------------------- | --------------- |
-| `html`     | `String`, `Element` | 元素的 DOM 元素 |
-| `icon`     | `String`, `Element` | 元素的图标      |
-| `switch`   | `Boolean`           | 按钮默认状态    |
-| `onSwitch` | `Function`          | 按钮切换事件    |
-| `tooltip`  | `String`            | 提示文本        |
+| Property   | Type                | Description       |
+| ---------- | ------------------- | ----------------- |
+| `html`     | `String`, `Element` | Element's DOM element |
+| `icon`     | `String`, `Element` | Element's icon    |
+| `switch`   | `Boolean`           | Button's default state |
+| `onSwitch` | `Function`          | Button toggle event |
+| `tooltip`  | `String`            | Tooltip text      |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -173,17 +172,16 @@ var art = new Artplayer({
     ],
 });
 ```
+## Create - Range Slider
 
-## 创建 - 范围滑块
-
-| 属性       | 类型                | 描述             |
-| ---------- | ------------------- | ---------------- |
-| `html`     | `String`, `Element` | 元素的 DOM 元素  |
-| `icon`     | `String`, `Element` | 元素的图标       |
-| `range`    | `Array`             | 默认状态数组     |
-| `onRange`  | `Function`          | 完成时触发的事件 |
-| `onChange` | `Function`          | 变化时触发的事件 |
-| `tooltip`  | `String`            | 提示文本         |
+| Attribute  | Type                | Description                 |
+| ---------- | ------------------- | --------------------------- |
+| `html`     | `String`, `Element` | The element's DOM element   |
+| `icon`     | `String`, `Element` | The element's icon          |
+| `range`    | `Array`             | Default state array         |
+| `onRange`  | `Function`          | Event triggered upon completion |
+| `onChange` | `Function`          | Event triggered on change   |
+| `tooltip`  | `String`            | Tooltip text                |
 
 ```js
 const range = [5, 1, 10, 1];
@@ -192,7 +190,6 @@ const min = range[1];
 const max = range[2];
 const step = range[3];
 ```
-
 <div className="run-code">▶ Run Code</div>
 
 ```js
@@ -204,7 +201,7 @@ var art = new Artplayer({
         {
             html: 'Slider',
             tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
             range: [5, 1, 10, 1],
             onChange: function (item, $dom, event) {
                 console.info(item, $dom, event);
@@ -214,8 +211,7 @@ var art = new Artplayer({
     ],
 });
 ```
-
-## 添加
+## Add
 
 <div className="run-code">▶ Run Code</div>
 
@@ -236,7 +232,7 @@ art.setting.add({
 });
 ```
 
-## 删除
+## Delete
 
 <div className="run-code">▶ Run Code</div>
 
@@ -266,8 +262,7 @@ art.on('ready', () => {
     }, 3000);
 });
 ```
-
-## 更新
+## Updates
 
 <div className="run-code">▶ Run Code</div>
 
diff --git a/packages/artplayer-vitepress/docs/en/index.md b/packages/artplayer-vitepress/docs/en/index.md
index d3927afdd..444acf37f 100644
--- a/packages/artplayer-vitepress/docs/en/index.md
+++ b/packages/artplayer-vitepress/docs/en/index.md
@@ -1,6 +1,6 @@
-# 安装使用
+# Installation and Usage
 
-## 安装
+## Installation
 
 ::: code-group
 
@@ -36,7 +36,7 @@ https://unpkg.com/artplayer/dist/artplayer.js
 
 :::
 
-## 使用
+## Usage
 
 ::: code-group
 
@@ -67,15 +67,14 @@ const art = new Artplayer({
 </html>
 ```
 
-::: 
+:::
+::: warning Warning
 
-::: warning 提示
-
-播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
+The player's size depends on the size of the container `container`, so your container `container` must have a size.
 
 :::
 
-::: tip 以下链接可以看到更多的使用例子
+::: tip You can see more examples of use at the following link
 
 [/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
 
@@ -158,10 +157,9 @@ export default {
 ```
 
 :::
+::: warning Artplayer Not Responsive：
 
-::: warning Artplayer 非响应式：
-
-在 `Vue.js` 里直接修改 `option` 是不会改变播放器的
+Modifying `option` directly in `Vue.js` will not change the player
 
 :::
 
@@ -223,16 +221,15 @@ export default App;
 ```
 
 :::
+::: warning Non-responsive Artplayer:
 
-::: warning Artplayer 非响应式：
-
-在 `React.js` 里直接修改 `option` 是不会改变播放器的
+In `React.js`, directly modifying the `option` will not change the player
 
 :::
 
 ## TypeScript
 
-导入 `Artplayer` 时会自动导入的 `artplayer.d.ts`，但你也可以单独导入选项的类型
+Importing `Artplayer` will automatically import `artplayer.d.ts`, but you can also separately import the type for options
 
 ```ts{2}
 import Artplayer from 'artplayer';
@@ -248,17 +245,16 @@ option.volume = 0.5;
 const art = new Artplayer(option);
 ```
 
-::: tip 全部 TypeScript 定义
+::: tip Complete TypeScript Definitions
 
 [packages/artplayer/types](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer/types)
 
 :::
-
 ## JavaScript
 
-有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型 
+Sometimes your `js` file may lose the `TypeScript` type hints, in this case, you can manually import the types
 
-变量：
+Variables:
 
 ```js{1-3}
 /**
@@ -267,7 +263,7 @@ const art = new Artplayer(option);
 let art = null;
 ```
 
-参数：
+Parameters:
 
 ```js{1-3}
 /**
@@ -278,7 +274,7 @@ function getInstance(art) {
 }
 ```
 
-属性：
+Properties:
 
 ```js{4-6}
 export default {
@@ -293,7 +289,7 @@ export default {
 }
 ```
 
-选项：
+Options:
 
 ```js{1-3}
 /**
@@ -309,12 +305,11 @@ option.volume = 0.5;
 
 const art8 = new Artplayer(option);
 ```
+## Ancient Browsers
 
-## 古老的浏览器
+The production build of `artplayer.js` is only compatible with the latest major version of `Chrome`: `last 1 Chrome version`
 
-生产构建的 `artplayer.js` 只兼容最新一个主版本的 `Chrome`：`last 1 Chrome version`
-
-对于古老的浏览器，可以使用 `artplayer.legacy.js` 文件，可以兼容到：`IE 11`
+For ancient browsers, you can use the `artplayer.legacy.js` file, which is compatible up to: `IE 11`
 
 ```js
 import Artplayer from 'artplayer/dist/artplayer.legacy.js';
@@ -332,11 +327,10 @@ https://unpkg.com/artplayer/dist/artplayer.legacy.js
 
 :::
 
-::: tip 假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
+::: tip If you need to support even older browsers, please modify the following configuration and then build it yourself:
 
-构建配置：[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)
 
-参考文档：[browserslist](https://github.com/browserslist/browserslist#full-list)
+Refer to documentation: [browserslist](https://github.com/browserslist/browserslist#full-list)
 
 :::
-
diff --git a/packages/artplayer-vitepress/docs/en/plugin/ads.md b/packages/artplayer-vitepress/docs/en/plugin/ads.md
index 56af13fa9..78230ac8a 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/ads.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/ads.md
@@ -1,10 +1,10 @@
-# 视频广告
+# Video Ads
 
-## 演示
+## Demo
 
-👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
+👉 [View Full Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
 
-## 安装
+## Installation
 
 ::: code-group
 
@@ -39,8 +39,7 @@ https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
 ```
 
 :::
-
-## 使用
+## Usage
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
     ▶ Run Code
@@ -55,32 +54,32 @@ var art = new Artplayer({
     fullscreenWeb: true,
     plugins: [
         artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
+            // HTML ad, ignored if it's a video ad
             html: '<img src="/assets/sample/poster.jpg">',
 
-            // 视频广告的地址
+            // URL of the video ad
             video: '/assets/sample/test1.mp4',
 
-            // 广告跳转网址，为空则不跳转
+            // Ad redirect URL, no redirection if empty
             url: 'http://artplayer.org',
 
-            // 必须观看的时长，期间不能被跳过，单位为秒
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
-            // 当该值等于或小于0时，则随时都可以关闭广告
+            // The duration that must be watched, which can't be skipped, in seconds
+            // If this value is greater than or equal to totalDuration, the ad can't be closed early
+            // If this value is less than or equal to 0, then the ad can be closed at any time
             playDuration: 5,
 
-            // 广告总时长，单位为秒
+            // Total duration of the ad, in seconds
             totalDuration: 10,
 
-            // 视频广告是否默认静音
+            // Whether the video ad is muted by default
             muted: false,
 
-            // 多语言支持
+            // Multilingual support
             i18n: {
-                close: '关闭广告',
-                countdown: '%s秒',
-                detail: '查看详情',
-                canBeClosed: '%s秒后可关闭广告',
+                close: 'Close ad',
+                countdown: '%s seconds',
+                detail: 'See details',
+                canBeClosed: '%s seconds until the ad can be closed',
             },
         }),
     ],
@@ -95,4 +94,4 @@ art.on('artplayerPluginAds:click', (ads) => {
 art.on('artplayerPluginAds:skip', (ads) => {
     console.info(ads);
 });
-```
+```
\ No newline at end of file
diff --git a/packages/artplayer-vitepress/docs/en/plugin/danmuku.md b/packages/artplayer-vitepress/docs/en/plugin/danmuku.md
index 796f2246f..79a638333 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/danmuku.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/danmuku.md
@@ -1,10 +1,10 @@
-# 弹幕库
+# Danmuku Library
 
-## 演示
+## Demo
 
-👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
+👉 [View Full Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
 
-## 安装
+## Installation
 
 ::: code-group
 
@@ -67,7 +67,7 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
 }
 ```
 
-## 使用弹幕数组
+## Using Danmuku Array
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -80,14 +80,14 @@ var art = new Artplayer({
     setting: true,
     plugins: [
         artplayerPluginDanmuku({
-            // 弹幕数组
+            // Danmuku array
             danmuku: [
                 {
-                    text: '111', // 弹幕文本
-                    time: 1, // 发送时间，单位秒
-                    color: '#fff', // 弹幕局部颜色
-                    border: false, // 是否显示描边
-                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
+                    text: '111', // Danmuku text
+                    time: 1, // Send time, in seconds
+                    color: '#fff', // Danmuku local color
+                    border: false, // Whether to display outline
+                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
                 },
                 {
                     text: '222',
@@ -108,8 +108,9 @@ var art = new Artplayer({
     ],
 });
 ```
+Sure, below is the translation of the provided Markdown content into English, maintaining the original Markdown formatting:
 
-## 使用弹幕 XML
+## Using Danmuku XML
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -121,29 +122,28 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     plugins: [
         artplayerPluginDanmuku({
-            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
+            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
             danmuku: '/assets/sample/danmuku.xml',
         }),
     ],
 });
 ```
 
-## 使用异步调用
+## Using Asynchronous Call
 
 <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({
-            // 使用 Promise 异步返回
+            // Use Promise to return asynchronously
             danmuku: function () {
-                return new Promise((resovle) => {
-                    return resovle([
+                return new Promise((resolve) => {
+                    return resolve([
                         {
                             text: '111',
                             time: 1,
@@ -163,10 +163,9 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `hide/show`
 
-通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
+Hide or show the bullet comments with the methods `hide` and `show`.
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -184,14 +183,14 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: '隐藏弹幕',
+            html: 'Hide Danmuku',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.hide();
             },
         },
         {
             position: 'right',
-            html: '显示弹幕',
+            html: 'Show Danmuku',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.show();
             },
@@ -199,10 +198,9 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `isHide`
 
-通过属性 `isHide` 判断当前弹幕是隐藏或者显示
+Judge whether the current barrage is hidden or displayed with the `isHide` property.
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -220,24 +218,23 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: '隐藏弹幕',
+            html: 'Hide Barrage',
             click: function (_, event) {
                 if (art.plugins.artplayerPluginDanmuku.isHide) {
                     art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = '隐藏弹幕';
+                    event.target.innerText = 'Hide Barrage';
                 } else {
                     art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = '显示弹幕';
+                    event.target.innerText = 'Show Barrage';
                 }
             },
         },
     ],
 });
 ```
-
 ## `emit`
 
-通过方法 `emit` 发送一条实时弹幕
+Send a real-time danmaku message through the `emit` method
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -255,9 +252,9 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: '发送弹幕',
+            html: 'Send Danmaku',
             click: function () {
-                var text = prompt('请输入弹幕文本', '弹幕测试文本');
+                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
                 if (!text || !text.trim()) return;
                 var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
                 art.plugins.artplayerPluginDanmuku.emit({
@@ -270,10 +267,9 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `config`
 
-通过方法 `config` 实时改变弹幕配置，支持属性有：
+Change the barrage configuration in real-time with the `config` method, supported attributes include:
 
 -   `danmuku`
 -   `speed`
@@ -304,7 +300,7 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
+            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
             style: {
                 display: 'flex',
                 alignItems: 'center',
@@ -321,10 +317,9 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `load`
 
-通过 load 方法可以重载弹幕源，或者切换新弹幕
+The load method can be used to reload the danmu data source or switch to new danmu.
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -342,14 +337,14 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: '重载弹幕',
+            html: 'Reload Danmu',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.load();
             },
         },
         {
             position: 'right',
-            html: '切换弹幕',
+            html: 'Switch Danmu',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.config({
                     danmuku: '/assets/sample/danmuku-v2.xml',
@@ -360,10 +355,9 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `reset`
 
-用于清空当前显示的弹幕
+Used to clear the current displayed barrages
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -388,11 +382,13 @@ art.on('resize', () => {
 
 ## `option`
 
-用于获取当前弹幕配置
+Used to get the current barrage configuration
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
 </div>
+    ▶ Run Code
+</div>
 
 ```js
 var art = new Artplayer({
@@ -461,3 +457,28 @@ art.on('artplayerPluginDanmuku:destroy', () => {
     console.info('弹幕销毁');
 });
 ```
+
+Here is the translation of the VitePress extended Markdown syntax into English:
+
+```markdown
+# Welcome to VitePress
+
+## Project setup
+
+```bash
+yarn
+yarn docs:dev
+```
+
+## Build
+
+To build the documentation site, run the following command:
+
+```bash
+yarn docs:build
+```
+
+## Deployment
+
+To deploy the documentation site, you can use any static site hosting services.
+```
\ No newline at end of file
diff --git a/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md b/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md
index 7e1e1451b..48bfd1b67 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md
@@ -1,10 +1,10 @@
-# Dash 画质
+# Dash Video Quality
 
-## 演示
+## Demo
 
-👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-quality/index.js&example=dash.quality)
+👉 [View the full demo](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-quality/index.js&example=dash.quality)
 
-## 安装
+## Installation
 
 ::: code-group
 
diff --git a/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md b/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md
index e7adae9b2..1c1c182d1 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md
@@ -1,10 +1,10 @@
-# HLS 画质
+# HLS Quality
 
-## 演示
+## Demonstration
 
-👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
+👉 [View the full demo](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
 
-## 安装
+## Installation
 
 ::: code-group
 
diff --git a/packages/artplayer-vitepress/docs/en/plugin/iframe.md b/packages/artplayer-vitepress/docs/en/plugin/iframe.md
index ad95f73d5..c0ee1135f 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/iframe.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/iframe.md
@@ -1,14 +1,14 @@
-# Iframe 控制
+# Iframe Control
 
-## 说明
+## Description
 
-通过该插件，你可以轻松在 `index.html` 里控制跨域 `iframe.html` 页面里的播放器，如在 `index.html` 里通过代码控制 `iframe.html` 播放器的功能，或者获取 `iframe.html` 播放器的值
+With this plugin, you can easily control the player inside the cross-domain `iframe.html` page from within `index.html`. For example, you can control the functionalities of the `iframe.html` player from `index.html` or retrieve the values of the `iframe.html` player.
 
-## 演示
+## Demonstration
 
-👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
+👉 [View full demonstration](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
 
-## 安装
+## Installation
 
 ::: code-group
 
@@ -29,7 +29,6 @@ pnpm add artplayer-plugin-iframe
 ```
 
 :::
-
 ## `CDN`
 
 ::: code-group
@@ -44,7 +43,7 @@ https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
 
 :::
 
-## 使用
+## Usage
 
 ::: code-group
 
@@ -107,12 +106,11 @@ https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
 ```
 
 :::
-
-## `index.html` 接口
+## `index.html` Interface
 
 ### `commit`
 
-从 `index.html` 将消息推送到 `iframe.html`，该函数将在 `iframe.html` 内部运行，同时它也能用于异步获取 `iframe.html` 里的值
+Push messages from `index.html` to `iframe.html`. This function will run inside `iframe.html` and can also be used to asynchronously retrieve values from within `iframe.html`.
 
 ```js
 iframe.commit(() => {
@@ -141,10 +139,9 @@ iframe.commit(() => {
     });
 })();
 ```
-
 ### `message`
 
-在 `index.html` 接收来自 `iframe.html` 的消息
+Receive messages from `iframe.html` in `index.html`
 
 ```js
 iframe.message((event) => {
@@ -154,23 +151,23 @@ iframe.message((event) => {
 
 ### `destroy`
 
-销毁后 `index.html` 无法与 `iframe.html` 通信
+After destruction, `index.html` can no longer communicate with `iframe.html`
 
 ```js
 iframe.destroy();
 ```
 
-## `iframe.html` 接口
+## `iframe.html` Interface
 
-:::warning 提示
+:::warning Warning
 
-`iframe.html` 接口 只能运行在 `iframe.html` 里
+The `iframe.html` interface can only run inside `iframe.html`
 
 :::
 
 ### `inject`
 
-注入脚本，接收来自 `index.html` 的消息
+Inject a script, receive messages from `index.html`
 
 ```js
 ArtplayerPluginIframe.inject();
@@ -178,7 +175,7 @@ ArtplayerPluginIframe.inject();
 
 ### `postMessage`
 
-将消息推送到 `index.html`
+Push messages to `index.html`
 
 ```js
 iframe.message((event) => {
@@ -291,4 +288,4 @@ iframe.commit(() => {
 
 ```
 
-:::
\ No newline at end of file
+:::
diff --git a/packages/artplayer-vitepress/docs/en/start/i18n.md b/packages/artplayer-vitepress/docs/en/start/i18n.md
index a0fcded1e..948076584 100644
--- a/packages/artplayer-vitepress/docs/en/start/i18n.md
+++ b/packages/artplayer-vitepress/docs/en/start/i18n.md
@@ -1,20 +1,20 @@
-# 语言设置
+# Language Settings
 
 ::: danger
 
-鉴于捆绑的多国语言越来越多, 从 `5.1.0` 版本开始, `artplayer.js` 核心代码除了包含 `简体中文` 和 `英文` 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。
+Given the increasing number of bundled multilingual packs, starting from version `5.1.0`, the core code of `artplayer.js` will no longer include other languages besides `Simplified Chinese` and `English`. You need to import the required languages on your own.
 
 :::
 
 :::warning 
 
-当无法匹配到语言时, 会默认显示英文, i18n 写法参考: [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 usage, refer to: [artplayer/types/i18n.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/i18n.d.ts)
 
 :::
 
-## 默认语言
+## Default Languages
 
-默认语言有: `en`, `zh-cn`, 无需手动导入
+The default languages are: `en`, `zh-cn`, which do not require manual import.
 
 ```js{4}
 var art = new Artplayer({
@@ -24,13 +24,12 @@ var art = new Artplayer({
 });
 ```
 
-## 导入语言
+## Importing Languages
 
-打包前的语言文件存放于: `artplayer/src/i18n/*.js`, 欢迎来添加你的语言
+Language files before packaging are located in: `artplayer/src/i18n/*.js`. You are welcome to add your language.
+Packaged language files are located at: `artplayer/dist/i18n/*.js`
 
-打包后的语言文件存放于: `artplayer/dist/i18n/*.js`
-
-手动导入的语言有: `cs`, `es`, `fa`, `fr`, `id`, `pl`, `ru`, `zh-tw`
+Manually imported languages include: `cs`, `es`, `fa`, `fr`, `id`, `pl`, `ru`, `zh-tw`
 
 ::: code-group
 
@@ -65,8 +64,7 @@ var art = new Artplayer({
 ```
 
 :::
-
-## 新增语言
+## Add Language
 
 ```js{4-9}
 var art = new Artplayer({
@@ -81,7 +79,7 @@ var art = new Artplayer({
 });
 ```
 
-## 修改语言
+## Modify Language
 
 ```js
 import zhTw from 'artplayer/i18n/zh-tw.js';
diff --git a/packages/artplayer-vitepress/docs/en/start/option.md b/packages/artplayer-vitepress/docs/en/start/option.md
index 1dd2148cc..ca43c7379 100644
--- a/packages/artplayer-vitepress/docs/en/start/option.md
+++ b/packages/artplayer-vitepress/docs/en/start/option.md
@@ -1,11 +1,11 @@
-# 基础选项
+# Basic Options
 
 ## `container`
 
--   Type: `String, Element`
--   Default: `#artplayer`
+- Type: `String, Element`
+- Default: `#artplayer`
 
-播放器挂载的 `DOM` 容器
+The `DOM` container where the player mounts
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,7 +17,7 @@ var art = new Artplayer({
 });
 ```
 
-您可能需要初始化容器元素的大小，如:
+You may need to initialize the size of the container element, like:
 
 ```css{2-3}
 .artplayer-app {
@@ -26,7 +26,7 @@ var art = new Artplayer({
 }
 ```
 
-或者使用 `aspect-ratio`：
+Or use `aspect-ratio`:
 
 ```css{2}
 .artplayer-app {
@@ -34,18 +34,17 @@ var art = new Artplayer({
 }
 ```
 
-:::warning 提示
+:::warning Tip
 
-全部选项里，只有 `container` 是必填的
+Among all options, only `container` is mandatory.
 
 :::
-
 ## `url`
 
--   Type: `String`
--   Default: `''`
+- Type: `String`
+- Default: `''`
 
-视频源地址
+The video source address
 
 <div className="run-code">▶ Run Code</div>
 
@@ -56,7 +55,7 @@ var art = new Artplayer({
 });
 ```
 
-有时候 `url` 地址没那么快知道，这时候你可以异步设置 `url`
+Sometimes the `url` is not known so quickly, in which case you can set the `url` asynchronously.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -70,21 +69,19 @@ setTimeout(() => {
 }, 1000);
 ```
 
-:::warning 提示
+:::warning Note
 
-默认支持三种视频文件格式：`.mp4`, `.ogg`, `.webm`
+The default support is for three video file formats: `.mp4`, `.ogg`, `.webm`.
 
-如需要播放 `.m3u8` 或者 `.flv` 等其它格式，请参考左侧的 `第三方库`
+If you need to play other formats such as `.m3u8` or `.flv`, please refer to the `Third-party Libraries` on the left side.
 
 :::
-
-
 ## `id`
 
--   Type: `String`
--   Default: `''`
+- Type: `String`
+- Default: `''`
 
-播放器的唯一标识，目前只用于记忆播放 `autoplayback`
+The unique identifier of the player, currently used only for remembering playback with `autoplayback`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -98,10 +95,10 @@ var art = new Artplayer({
 
 ## `onReady`
 
--   Type: `Function`
--   Default: `undefined`
+- Type: `Function`
+- Default: `undefined`
 
-构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和`ready`事件一样
+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
 
 <div className="run-code">▶ Run Code</div>
 
@@ -117,8 +114,7 @@ var art = new Artplayer(
     },
 );
 ```
-
-等同于:
+Equivalent to:
 
 ```js{7-9}
 var art = new Artplayer({
@@ -132,9 +128,9 @@ art.on('ready', () => {
 });
 ```
 
-:::warning 提示
+:::warning Warning
 
-回调函数里的`this`就是播放器实例，但回调函数假如使用了箭头函数，`this`则不会指向播放器实例
+The `this` inside the callback function refers to the player instance, but if an arrow function is used for the callback, `this` will not point to the player instance.
 
 :::
 
@@ -143,7 +139,7 @@ art.on('ready', () => {
 -   Type: `String`
 -   Default: `''`
 
-视频的海报，只会出现在播放器初始化且未播放的状态下
+The poster of the video, which only appears when the player is initialized and before it starts playing.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -154,13 +150,12 @@ var art = new Artplayer({
     poster: '/assets/sample/poster.jpg',
 });
 ```
-
 ## `theme`
 
--   Type: `String`
--   Default: `#f00`
+- Type: `String`
+- Default: `#f00`
 
-播放器主题颜色，目前用于 `进度条` 和 `高亮元素` 上
+Player theme color, currently used for `progress bar` and `highlight elements`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -174,10 +169,10 @@ var art = new Artplayer({
 
 ## `volume`
 
--   Type: `Number`
--   Default: `0.7`
+- Type: `Number`
+- Default: `0.7`
 
-播放器的默认音量
+The default volume of the player
 
 <div className="run-code">▶ Run Code</div>
 
@@ -189,18 +184,17 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 提示
+:::warning Warning
 
-播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值
+The player will cache the size of the last volume. When the player is initialized next time (such as refreshing the page), it will read this cached value.
 
 :::
-
 ## `isLive`
 
 -   Type: `Boolean`
 -   Default: `false`
 
-使用直播模式，会隐藏进度条和播放时间
+Use live mode, which will hide the progress bar and playback time
 
 <div className="run-code">▶ Run Code</div>
 
@@ -217,7 +211,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否默认静音
+Whether to mute by default
 
 <div className="run-code">▶ Run Code</div>
 
@@ -234,7 +228,10 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否自动播放
+Whether to play automatically
+- Default: `false`
+
+Autoplay
 
 <div className="run-code">▶ Run Code</div>
 
@@ -247,18 +244,18 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 提示
+:::warning Warning
 
-假如希望默认进入页面就能自动播放视频，`muted` 必需为 `true`，更多信息请阅读 [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
+If you want the video to autoplay by default upon entering the page, `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)
 
 :::
 
 ## `autoSize`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-播放器的尺寸默认会填充整个 `container` 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 `css` 的 `object-fit: cover;`
+The size of the player will by default fill the entire `container`, which often results in black bars. This value can automatically adjust the player size to hide the black bars, similar to `css`'s `object-fit: cover;`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -275,7 +272,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-当播放器滚动到浏览器视口以外时，自动进入 `迷你播放` 模式
+Automatically enter `mini mode` when the player scrolls out of the browser viewport
 
 <div className="run-code">▶ Run Code</div>
 
@@ -292,7 +289,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否循环播放
+Whether to loop the video
 
 <div className="run-code">▶ Run Code</div>
 
@@ -306,10 +303,10 @@ var art = new Artplayer({
 
 ## `flip`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-是否显示视频翻转功能，目前只出现在 `设置面板` 和 `右键菜单` 里
+Whether to show the video flip feature, currently only available in `Settings Panel` and `Context Menu`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -324,10 +321,10 @@ var art = new Artplayer({
 
 ## `playbackRate`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-是否显示视频播放速度功能，会出现在 `设置面板` 和 `右键菜单` 里
+Whether to show the playback speed feature of the video, it will appear in `Settings Panel` and `Context Menu`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -345,7 +342,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否显示视频长宽比功能，会出现在 `设置面板` 和 `右键菜单` 里
+Displays the video aspect ratio feature, it will appear in the `Settings Panel` and `Context Menu`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -363,7 +360,8 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否在底部控制栏里显示 `视频截图` 功能
+Whether to show the screenshot button, it will appear in the `toolbar` and `context menu`
+Display `Screenshot` function in the bottom control bar
 
 <div className="run-code">▶ Run Code</div>
 
@@ -375,18 +373,18 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 提示
+:::warning Warning
 
-由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
+Due to browser security mechanisms, if the video source address and the website are cross-origin, screenshot failure may occur
 
 :::
 
 ## `setting`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-是否在底部控制栏里显示 `设置面板` 的开关按钮
+Display the toggle button for the `Settings Panel` in the bottom control bar
 
 <div className="run-code">▶ Run Code</div>
 
@@ -397,13 +395,12 @@ var art = new Artplayer({
     setting: true,
 });
 ```
-
 ## `hotkey`
 
--   Type: `Boolean`
--   Default: `true`
+- Type: `Boolean`
+- Default: `true`
 
-是否使用快捷键
+Whether to use hotkeys
 
 <div className="run-code">▶ Run Code</div>
 
@@ -415,26 +412,25 @@ var art = new Artplayer({
 });
 ```
 
-| 热键    | 描述          |
-| ------- | ------------- |
-| `↑`     | 增加音量      |
-| `↓`     | 降低音量      |
-| `←`     | 视频快进      |
-| `→`     | 视频快退      |
-| `space` | 切换播放/暂停 |
+| Hotkey  | Description          |
+| ------- | --------------------- |
+| `↑`     | Increase volume       |
+| `↓`     | Decrease volume       |
+| `←`     | Fast forward video    |
+| `→`     | Rewind video          |
+| `space` | Toggle play/pause     |
 
-:::warning 提示
+:::warning Tip
 
-只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
+These hotkeys will only work after the player gains focus (such as after clicking on the player).
 
 :::
 
 ## `pip`
 
--   Type: `Boolean`
--   Default: `false`
-
-是否在底部控制栏里显示 `画中画` 的开关按钮
+- Type: `Boolean`
+- Default: `false`
+Show the `Picture in Picture` switch button on the bottom control bar
 
 <div className="run-code">▶ Run Code</div>
 
@@ -451,7 +447,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `true`
 
-假如页面里同时存在多个播放器，是否只能让一个播放器播放
+If there are multiple players on the page, should only one player be allowed to play at a time
 
 <div className="run-code">▶ Run Code</div>
 
@@ -467,8 +463,7 @@ var art = new Artplayer({
 
 -   Type: `Boolean`
 -   Default: `false`
-
-是否在底部控制栏里显示播放器 `窗口全屏` 按钮
+Display the `Window Fullscreen` button on the control bar at the bottom
 
 <div className="run-code">▶ Run Code</div>
 
@@ -485,7 +480,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否在底部控制栏里显示播放器 `网页全屏` 按钮
+Display the `Web Fullscreen` button on the control bar at the bottom
 
 <div className="run-code">▶ Run Code</div>
 
@@ -500,9 +495,10 @@ var art = new Artplayer({
 ## `subtitleOffset`
 
 -   Type: `Boolean`
+
 -   Default: `false`
 
-字幕时间偏移，范围在 `[-5s, 5s]`，出现在 `设置面板` 里
+Subtitle time offset, the range is `[-5s, 5s]`, appearing in the `Settings panel`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -523,7 +519,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-迷你进度条，只在播放器失去焦点后且正在播放时出现
+Mini progress bar, only appears when the player loses focus and is playing
 
 <div className="run-code">▶ Run Code</div>
 
@@ -540,9 +536,9 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否使用 `SSR` 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 `HTML` 时有用
+Whether to use `SSR` (Server-Side Rendering) mount mode, useful if you want to pre-render the player's required `HTML` before the player mounts
 
-你可以通过 `Artplayer.html` 访问到播放器所需的 `HTML`
+You can access the player's required `HTML` through `Artplayer.html`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -562,7 +558,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `true`
 
-在移动端是否使用 `playsInline` 模式
+Whether to use `playsInline` mode on mobile devices
 
 <div className="run-code">▶ Run Code</div>
 
@@ -579,7 +575,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-初始化自定义的 `层`
+Initializes custom `layers`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -590,7 +586,7 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     layers: [
         {
-            name: 'potser',
+            name: 'poster',
             html: `<img style="width: 100px" src="${img}">`,
             style: {
                 position: 'absolute',
@@ -609,8 +605,7 @@ var art = new Artplayer({
     ],
 });
 ```
-
-:::warning `组件配置` 请参考以下地址：
+:::warning `Component Configuration` Please refer to the following address:
 
 [/component/layers.html](/component/layers.html)
 
@@ -621,7 +616,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-初始化自定义的 `设置面板`
+Initializes custom `settings panel`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -662,8 +657,7 @@ var art = new Artplayer({
     ],
 });
 ```
-
-:::warning `设置面板` 请参考以下地址
+:::warning `Settings Panel` Please refer to the following address
 
 [/component/setting.html](/component/setting.html)
 
@@ -674,7 +668,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-初始化自定义的 `右键菜单`
+Initialize custom `context menu`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -693,8 +687,7 @@ var art = new Artplayer({
     ],
 });
 ```
-
-:::warning `组件配置` 请参考以下地址：
+:::warning `Component Configuration` Please refer to the following address:
 
 [/component/contextmenu.html](/component/contextmenu.html)-   Type:
 
@@ -705,7 +698,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-初始化自定义的底部 `控制栏`
+Initializes custom bottom `control bar`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -728,8 +721,7 @@ var art = new Artplayer({
     ],
 });
 ```
-
-:::warning `组件配置` 请参考以下地址：
+:::warning `Component Configuration` Refer to the following address:
 
 [/component/controls.html](/component/controls.html)
 
@@ -740,13 +732,13 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-是否在底部控制栏里显示 `画质选择` 列表
+Whether to show the `quality selection` list in the bottom control bar
 
-| 属性      | 类型      | 描述     |
-| --------- | --------- | -------- |
-| `default` | `Boolean` | 默认画质 |
-| `html`    | `String`  | 画质名字 |
-| `url`     | `String`  | 画质地址 |
+| Property   | Type      | Description    |
+| ---------- | --------- | -------------- |
+| `default`  | `Boolean` | Default quality|
+| `html`     | `String`  | Quality name   |
+| `url`      | `String`  | Quality URL    |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -767,18 +759,17 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `highlight`
 
--   Type: `Array`
--   Default: `[]`
+- Type: `Array`
+- Default: `[]`
 
-在进度条上显示 `高亮信息`
+Show `highlight information` on the progress bar
 
-| 属性   | 类型     | 描述               |
-| ------ | -------- | ------------------ |
-| `time` | `Number` | 高亮时间（单位秒） |
-| `text` | `String` | 高亮文本           |
+| Property | Type     | Description          |
+| -------- | -------- | -------------------- |
+| `time`   | `Number` | Highlight time (in seconds)|
+| `text`   | `String` | Highlight text       |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -810,13 +801,12 @@ var art = new Artplayer({
     ],
 });
 ```
-
 ## `plugins`
 
 -   Type: `Array`
 -   Default: `[]`
 
-初始化自定义的 `插件`
+Initialize custom `plugins`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -844,15 +834,15 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-在进度条上设置 `预览图`
+Set `thumbnails` on the progress bar
 
-| 属性     | 类型     | 描述       |
-| -------- | -------- | ---------- |
-| `url`    | `String` | 预览图地址 |
-| `number` | `Number` | 预览图数量 |
-| `column` | `Number` | 预览图列数 |
-| `width`  | `Number` | 预览图宽度 |
-| `height` | `Number` | 预览图高度 |
+| Property | Type     | Description         |
+| -------- | -------- | ------------------- |
+| `url`    | `String` | Thumbnail URL       |
+| `number` | `Number` | Number of thumbnails|
+| `column` | `Number` | Columns of thumbnails|
+| `width`  | `Number` | Thumbnail width     |
+| `height` | `Number` | Thumbnail height    |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -867,8 +857,7 @@ var art = new Artplayer({
     },
 });
 ```
-
-:::warning 在线生成预览图
+:::warning Online thumbnail generation
 
 [artplayer-tool-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail)
 
@@ -879,17 +868,18 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-设置视频的字幕，支持字幕格式：`vtt`, `srt`, `ass`
+Set the video subtitles, supporting subtitle formats: `vtt`, `srt`, `ass`
 
-| 属性        | 类型       | 描述                                |
+| Property    | Type       | Description                          |
 | ----------- | ---------- | ----------------------------------- |
-| `name`       | `String`   | 字幕名字                            |
-| `url`       | `String`   | 字幕地址                            |
-| `type`      | `String`   | 字幕类型，可选 `vtt`, `srt`, `ass`  |
-| `style`     | `Object`   | 字幕样式                            |
-| `encoding`  | `String`   | 字幕编码，默认 `utf-8`              |
-| `escape`    | `Boolean`  | 是否转义 `html` 标签，默认为 `true` |
-| `onVttLoad` | `Function` | 用于修改 `vtt` 文本的函数           |
+| `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 to modify `vtt` text       |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -909,13 +899,12 @@ var art = new Artplayer({
     },
 });
 ```
-
 ## `moreVideoAttr`
 
 -   Type: `Object`
--   Default: `{'controls': false,'preload': 'metadata'}`
+-   Default: `{'controls': false, 'preload': 'metadata'}`
 
-更多视频属性，这些属性将直接写入视频元素里
+Additional video attributes, these attributes will be directly written into the video element
 
 <div className="run-code">▶ Run Code</div>
 
@@ -935,7 +924,7 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-用于替换默认图标，支持 `Html` 字符串和 `HTMLElement`
+Used to replace default icons, supports `Html` strings and `HTMLElement`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -944,13 +933,12 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
+        loading: '<img src="/assets/img/loading.gif">',
         state: '<img src="/assets/img/state.png">',
     },
 });
 ```
-
-:::warning 全部图标的定义
+:::warning Definition of all icons
 
 [artplayer/types/icons.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts)
 
@@ -961,7 +949,7 @@ var art = new Artplayer({
 -   Type: `String`
 -   Default: `''`
 
-用于指明视频的格式，需要配合 `customType` 一起使用，默认视频的格式就是视频地址的后缀（如 `.m3u8`, `.mkv`, `.ts`），但有时候视频地地址没有正确的后缀，所以需要特别指明
+Used to specify the format of the video, which is used in conjunction with `customType`. By default, the video format is the same as the file extension of the video URL (such as `.m3u8`, `.mkv`, `.ts`). However, sometimes the video URL does not have the correct file extension, so it needs to be specifically stated.
 
 <div className="run-code">▶ Run Code</div>
 
@@ -973,26 +961,25 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 后缀的识别
+:::warning Recognition of file extensions
 
-播放器只能解析这种后缀：`/assets/sample/video.m3u8`
+The player can only parse this type of file extension: `/assets/sample/video.m3u8`
 
-但无法解析这种后缀：`/assets/sample/video?type=m3u8`
+But it cannot parse this type of file extension: `/assets/sample/video?type=m3u8`
 
-所以假如你使用了 `customType`，最好同时要指明 `type`
+Therefore, if you use `customType`, it is best to specify `type` as well
 
 :::
-
 ## `customType`
 
 -   Type: `Object`
 -   Default: `{}`
 
-通过视频的 `type` 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数
+Matches the video's `type` to delegate the video decoding to a third-party program for processing. The processing function can receive three parameters:
 
-- `video` : 视频 `DOM` 元素
-- `url` : 视频地址
-- `art` : 当前实例
+- `video`: Video `DOM` element
+- `url`: Video address
+- `art`: Current instance
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1013,8 +1000,7 @@ var art = new Artplayer({
 -   Type: `String`
 -   Default: `navigator.language.toLowerCase()`
 
-默认显示语言，目前支持：`en`, `zh-cn`
-
+Default display language, currently supports: `en`, `zh-cn`
 <div className="run-code">▶ Run Code</div>
 
 ```js{4}
@@ -1025,7 +1011,7 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 更多的语言设置
+:::warning More language settings
 
 [/start/i18n.html](/start/i18n.html)
 
@@ -1036,9 +1022,9 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-自定义 `i18n` 配置，该配置会和自带的 `i18n` 进行深度合并
+Custom `i18n` configuration, which will be deeply merged with the built-in `i18n`
 
-新增你的语言:
+Add your language:
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1054,8 +1040,7 @@ var art = new Artplayer({
     },
 });
 ```
-
-修改现有的语言
+Modifying the existing language
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1074,7 +1059,7 @@ var art = new Artplayer({
 });
 ```
 
-:::warning 更多的语言设置
+:::warning More language settings
 
 [/start/i18n.html](/start/i18n.html)
 
@@ -1085,7 +1070,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-是否在移动端显示一个 `锁定按钮` ，用于隐藏底部 `控制栏`
+Whether to display a `lock button` on mobile to hide the bottom `control bar`
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1099,10 +1084,10 @@ var art = new Artplayer({
 
 ## `fastForward`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-是否在移动端添加长按视频快进功能
+Whether to add fast forward function by long pressing on the video on mobile devices
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1116,10 +1101,10 @@ var art = new Artplayer({
 
 ## `autoPlayback`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-是否使用自动 `回放功能`
+Whether to use the automatic playback feature
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1131,21 +1116,20 @@ var art = new Artplayer({
     autoPlayback: true,
 });
 ```
+:::warning Warning
 
-:::warning 提示
+Because the player by default uses `url` as the `key` to cache the playback progress
 
-因为播放器默认使用 `url` 作为 `key` 来缓存播放进度的
-
-但假如你的同一个视频的 `url` 是不同的话，那么你需要使用 `id` 来标识视频的唯一 `key`
+But if the `url` of the same video is different, then you need to use `id` to identify the unique `key` of the video
 
 :::
 
 ## `autoOrientation`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
+Whether to rotate the player on mobile web pages in full screen according to the video size and the viewport dimensions
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1159,10 +1143,10 @@ var art = new Artplayer({
 
 ## `airplay`
 
--   Type: `Boolean`
--   Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
-是否显示 `airplay` 按钮，当前只有部分浏览器支持该功能
+Whether to display the `airplay` button, currently only some browsers support this feature
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1179,7 +1163,7 @@ var art = new Artplayer({
 -   Type: `Object`
 -   Default: `{}`
 
-用于改变内置的css变量
+Used to change built-in CSS variables
 
 <div className="run-code">▶ Run Code</div>
 
@@ -1193,8 +1177,8 @@ var art = new Artplayer({
 });
 ```
 
-:::warning cssVar 写法参考
+:::warning Reference for cssVar syntax
 
-[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)
 
 :::
\ No newline at end of file
diff --git a/scripts/trans-docs.js b/scripts/trans-docs.js
index b0bdc66ab..a27f7f9d4 100644
--- a/scripts/trans-docs.js
+++ b/scripts/trans-docs.js
@@ -4,37 +4,42 @@ import path from 'path';
 import axios from 'axios';
 import { glob } from 'glob';
 import { removeDir } from './utils.js';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 function splitMarkdown(text, maxChars) {
     const parts = [];
     let currentPart = '';
-    let buffer = '';
     let inCodeBlock = false;
+    let inSpecialBlock = false;
 
     const lines = text.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
 
-    for (let line of lines) {
-        if (line.startsWith('```')) {
+        // 检测代码块
+        if (line.trim().startsWith('```')) {
             inCodeBlock = !inCodeBlock;
         }
 
-        buffer += line + '\n';
+        // 检测特殊块
+        if (line.trim().startsWith(':::')) {
+            inSpecialBlock = !inSpecialBlock;
+        }
 
-        if (!inCodeBlock && buffer.length > maxChars) {
-            // 如果当前不在代码块内，且缓冲区字符数超过限制，进行分割
-            let splitPoint = buffer.lastIndexOf('\n\n', maxChars);
-            if (splitPoint === -1) splitPoint = maxChars;
+        // 添加当前行到当前部分
+        currentPart += line + '\n';
 
-            currentPart += buffer.substring(0, splitPoint);
+        // 检测是否达到字符限制
+        if (!inCodeBlock && !inSpecialBlock && currentPart.length > maxChars && i < lines.length - 1) {
             parts.push(currentPart);
             currentPart = '';
-            buffer = buffer.substring(splitPoint).trimStart() + '\n';
         }
     }
 
-    // 处理剩余的缓冲区
-    currentPart += buffer;
-    if (currentPart.trim() !== '') {
+    // 添加最后一部分
+    if (currentPart !== '') {
         parts.push(currentPart);
     }
 
@@ -43,11 +48,11 @@ function splitMarkdown(text, maxChars) {
 
 const translateContent = async (content, targetLanguage) => {
     try {
-        console.log('Content:', content.length);
+        const TRANSLATE_URL = process.env.TRANSLATE_URL;
         const response = await axios.post(
-            'https://api.aimu.app/openai/chat',
+            TRANSLATE_URL,
             {
-                content: `The following is the text in markdown format and translate it to ${targetLanguage}:\n\n${content}`,
+                content: `The following text is written in VitePress's extended Markdown syntax, Please translate it into ${targetLanguage}, and keep the Markdown format and don't add your explanation:\n\n${content}`,
             },
             {
                 headers: {
@@ -56,29 +61,43 @@ const translateContent = async (content, targetLanguage) => {
                 timeout: 60000,
             },
         );
-
-        const result = response.data.data;
-        console.log('Result:', result.length);
-        return result;
+        return response.data.data;
     } catch (error) {
         console.error(error.message);
-        return '';
+        return content;
     }
 };
 
 const translateMarkdownFiles = async (filePaths, targetLanguage, maxCharsPerRequest) => {
+    let totalParts = 0;
+    let translatedPartsCount = 0;
+
     for (const filePath of filePaths) {
         const content = fs.readFileSync(filePath, 'utf-8');
         const parts = splitMarkdown(content, maxCharsPerRequest);
-        console.log('Translating:', filePath);
-        console.log('Parts:', parts.length);
+        totalParts += parts.length;
+    }
+
+    console.log(`开始翻译 ${filePaths.length} 个文件，总共 ${totalParts} 部分。`);
+
+    for (const filePath of filePaths) {
+        console.log(`翻译开始: ${filePath}`);
+
+        const content = fs.readFileSync(filePath, 'utf-8');
+        const parts = splitMarkdown(content, maxCharsPerRequest);
         const translatedParts = [];
+
         for (const part of parts) {
             const translatedPart = await translateContent(part, targetLanguage);
             translatedParts.push(translatedPart);
+            translatedPartsCount++;
+            const progressPercentage = ((translatedPartsCount / totalParts) * 100).toFixed(2);
+            console.log(`总体翻译进度: ${progressPercentage}%`);
         }
-        const translatedContent = translatedParts.join('');
+
+        const translatedContent = translatedParts.join('\n');
         fs.writeFileSync(filePath, translatedContent);
+        console.log(`翻译结束: ${filePath}`);
     }
 };
 
@@ -93,6 +112,6 @@ const translateMarkdownFiles = async (filePaths, targetLanguage, maxCharsPerRequ
         await cpy(path.resolve(basePath, dir), path.resolve(enPath, dir), { flat: true });
     }
     const mdsPaths = glob.sync(path.resolve(enPath, '**/*.md'));
-    const maxCharsPerRequest = 1024;
+    const maxCharsPerRequest = 512;
     await translateMarkdownFiles(mdsPaths, 'English', maxCharsPerRequest);
 })();