Update build:docs and trans:docs scripts

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>