Update build:docs and trans:docs scripts

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>
 

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>
 

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

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>
 

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) => {

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>