Fix build:docs script order in package.json

package.json

@@ -9,7 +9,7 @@
         "lint": "npx eslint packages/*/src",
         "build:sw": "node ./scripts/build-sw.js",
         "build:ts": "node ./scripts/build-ts.js",
-        "build:docs": "node ./scripts/build-docs.js && node ./scripts/trans-docs.js",
+        "build:docs": "node ./scripts/trans-docs.js && node ./scripts/build-docs.js",
         "build:i18n": "node ./scripts/build-i18n.js",
         "dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js",
         "build": "npx cross-env NODE_ENV=production node ./scripts/build.js",

packages/artplayer-vitepress/docs/en/index.md

@@ -0,0 +1,342 @@
+# 安装使用
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer
+```
+
+```bash [yarn]
+yarn add artplayer
+```
+
+```bash [pnpm]
+pnpm add artplayer
+```
+
+```html [script]
+<script src="path/to/artplayer.js"></script>
+```
+
+:::
+
+## `CDN`
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer/dist/artplayer.js
+```
+
+:::
+
+## 使用
+
+::: code-group
+
+```js [index.js]
+import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
+```
+
+```html [index.html]
+<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>
+```
+
+::: 
+
+::: warning 提示
+
+播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
+
+:::
+
+::: tip 以下链接可以看到更多的使用例子
+
+[/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
+
+:::
+
+## `Vue.js`
+
+::: code-group
+
+```vue [Artplayer.vue]
+<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
+
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
+```
+
+```vue [app.vue]
+<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from "./Artplayer.vue";
+
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>
+```
+
+:::
+
+::: warning Artplayer 非响应式：
+
+在 `Vue.js` 里直接修改 `option` 是不会改变播放器的
+
+:::
+
+## `React.js`
+
+::: code-group
+
+```jsx [Artplayer.jsx]
+import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
+
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
+
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
+
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
+
+    return <div ref={artRef} {...rest}></div>;
+}
+```
+
+```jsx [app.jsx]
+import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
+
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
+
+export default App;
+```
+
+:::
+
+::: warning Artplayer 非响应式：
+
+在 `React.js` 里直接修改 `option` 是不会改变播放器的
+
+:::
+
+## TypeScript
+
+导入 `Artplayer` 时会自动导入的 `artplayer.d.ts`，但你也可以单独导入选项的类型
+
+```ts{2}
+import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
+
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art = new Artplayer(option);
+```
+
+::: tip 全部 TypeScript 定义
+
+[packages/artplayer/types](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer/types)
+
+:::
+
+## JavaScript
+
+有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型 
+
+变量：
+
+```js{1-3}
+/**
+ * @type {import("artplayer")}
+ */
+let art = null;
+```
+
+参数：
+
+```js{1-3}
+/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}
+```
+
+属性：
+
+```js{4-6}
+export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}
+```
+
+选项：
+
+```js{1-3}
+/**
+ * @type {import("artplayer/types/option").Option}
+ */
+
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art8 = new Artplayer(option);
+```
+
+## 古老的浏览器
+
+生产构建的 `artplayer.js` 只兼容最新一个主版本的 `Chrome`：`last 1 Chrome version`
+
+对于古老的浏览器，可以使用 `artplayer.legacy.js` 文件，可以兼容到：`IE 11`
+
+```js
+import Artplayer from 'artplayer/dist/artplayer.legacy.js';
+```
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer/dist/artplayer.legacy.js
+```
+
+:::
+
+::: tip 假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
+
+构建配置：[scripts/build.js](https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29)
+
+参考文档：[browserslist](https://github.com/browserslist/browserslist#full-list)
+
+:::
+

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

@@ -0,0 +1,98 @@
+# 视频广告
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-ads
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-ads
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-ads
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-ads.js"></script>
+```
+
+:::
+
+## CDN
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
+```
+
+:::
+
+## 使用
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如是视频广告则忽略该值
+            html: '<img src="/assets/sample/poster.jpg">',
+
+            // 视频广告的地址
+            video: '/assets/sample/test1.mp4',
+
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
+
+            // 必须观看的时长，期间不能被跳过，单位为秒
+            // 当该值大于或等于totalDuration时，不能提前关闭广告
+            // 当该值等于或小于0时，则随时都可以关闭广告
+            playDuration: 5,
+
+            // 广告总时长，单位为秒
+            totalDuration: 10,
+
+            // 视频广告是否默认静音
+            muted: false,
+
+            // 多语言支持
+            i18n: {
+                close: '关闭广告',
+                countdown: '%s秒',
+                detail: '查看详情',
+                canBeClosed: '%s秒后可关闭广告',
+            },
+        }),
+    ],
+});
+
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
+
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
+```

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

@@ -0,0 +1,463 @@
+# 弹幕库
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-danmuku
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-danmuku
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-danmuku
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-danmuku.js"></script>
+```
+
+:::
+
+## CDN
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
+```
+
+:::
+
+## 选项
+
+```js
+{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}
+```
+
+## 使用弹幕数组
+
+<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',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕数组
+            danmuku: [
+                {
+                    text: '111', // 弹幕文本
+                    time: 1, // 发送时间，单位秒
+                    color: '#fff', // 弹幕局部颜色
+                    border: false, // 是否显示描边
+                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});
+```
+
+## 使用弹幕 XML
+
+<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({
+            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+```
+
+## 使用异步调用
+
+<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 异步返回
+            danmuku: function () {
+                return new Promise((resovle) => {
+                    return resovle([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});
+```
+
+## `hide/show`
+
+通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
+
+<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({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: '显示弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});
+```
+
+## `isHide`
+
+通过属性 `isHide` 判断当前弹幕是隐藏或者显示
+
+<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({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = '隐藏弹幕';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = '显示弹幕';
+                }
+            },
+        },
+    ],
+});
+```
+
+## `emit`
+
+通过方法 `emit` 发送一条实时弹幕
+
+<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({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '发送弹幕',
+            click: function () {
+                var text = prompt('请输入弹幕文本', '弹幕测试文本');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});
+```
+
+## `config`
+
+通过方法 `config` 实时改变弹幕配置，支持属性有：
+
+-   `danmuku`
+-   `speed`
+-   `opacity`
+-   `fontSize`
+-   `color`
+-   `mode`
+-   `margin`
+-   `antiOverlap`
+-   `synchronousPlayback`
+-   `filter`
+-   `lockTime`
+-   `beforeEmit`
+
+<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({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});
+```
+
+## `load`
+
+通过 load 方法可以重载弹幕源，或者切换新弹幕
+
+<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({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '重载弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: '切换弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});
+```
+
+## `reset`
+
+用于清空当前显示的弹幕
+
+<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',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});
+```
+
+## `option`
+
+用于获取当前弹幕配置
+
+<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',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});
+```
+
+## 事件
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
+```

packages/artplayer-vitepress/docs/en/plugin/dash-quality.md

@@ -1,10 +1,10 @@
-# Dash Video Quality
+# Dash 画质
 
-## Demo
+## 演示
 
-👉 [View 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)
+👉 [查看完整演示](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
 

packages/artplayer-vitepress/docs/en/plugin/hls-quality.md

@@ -1,10 +1,10 @@
-# HLS Quality
+# HLS 画质
 
-## Demo
+## 演示
 
-👉 [View 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)
+👉 [查看完整演示](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
 

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

@@ -0,0 +1,294 @@
+# Iframe 控制
+
+## 说明
+
+通过该插件，你可以轻松在 `index.html` 里控制跨域 `iframe.html` 页面里的播放器，如在 `index.html` 里通过代码控制 `iframe.html` 播放器的功能，或者获取 `iframe.html` 播放器的值
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-iframe
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-iframe
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-iframe
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-iframe.js"></script>
+```
+
+:::
+
+## `CDN`
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
+```
+
+:::
+
+## 使用
+
+::: code-group
+
+```html [index.html]
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
+
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
+```
+
+```html [iframe.html]
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
+```
+
+:::
+
+## `index.html` 接口
+
+### `commit`
+
+从 `index.html` 将消息推送到 `iframe.html`，该函数将在 `iframe.html` 内部运行，同时它也能用于异步获取 `iframe.html` 里的值
+
+```js
+iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
+
+iframe.commit(() => {
+    art.seek = 5;
+});
+
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
+
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();
+```
+
+### `message`
+
+在 `index.html` 接收来自 `iframe.html` 的消息
+
+```js
+iframe.message((event) => {
+    console.info(event);
+});
+```
+
+### `destroy`
+
+销毁后 `index.html` 无法与 `iframe.html` 通信
+
+```js
+iframe.destroy();
+```
+
+## `iframe.html` 接口
+
+:::warning 提示
+
+`iframe.html` 接口 只能运行在 `iframe.html` 里
+
+:::
+
+### `inject`
+
+注入脚本，接收来自 `index.html` 的消息
+
+```js
+ArtplayerPluginIframe.inject();
+```
+
+### `postMessage`
+
+将消息推送到 `index.html`
+
+```js
+iframe.message((event) => {
+    console.info(event);
+});
+
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});
+```
+
+## 例子
+
+最常遇到的问题是，播放器在 `iframe.html` 里进行网页全屏，但在 `index.html` 是不生效的，这时候只要监听 `iframe.html` 里的 `fullscreenWeb` 事件并通知到 `index.html` 即可
+
+::: code-group
+
+```html [index.html]
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
+
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
+
+```
+
+```html [iframe.html]
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
+
+```
+
+:::

packages/artplayer-vitepress/docs/en/start/i18n.md

@@ -0,0 +1,104 @@
+# 语言设置
+
+::: danger
+
+鉴于捆绑的多国语言越来越多, 从 `5.1.0` 版本开始, `artplayer.js` 核心代码除了包含 `简体中文` 和 `英文` 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。
+
+:::
+
+:::warning 
+
+当无法匹配到语言时, 会默认显示英文, i18n 写法参考: [artplayer/types/i18n.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/i18n.d.ts)
+
+:::
+
+## 默认语言
+
+默认语言有: `en`, `zh-cn`, 无需手动导入
+
+```js{4}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});
+```
+
+## 导入语言
+
+打包前的语言文件存放于: `artplayer/src/i18n/*.js`, 欢迎来添加你的语言
+
+打包后的语言文件存放于: `artplayer/dist/i18n/*.js`
+
+手动导入的语言有: `cs`, `es`, `fa`, `fr`, `id`, `pl`, `ru`, `zh-tw`
+
+::: code-group
+
+```js [import]
+import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
+```
+
+```js [script]
+<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});
+```
+
+:::
+
+## 新增语言
+
+```js{4-9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});
+```
+
+## 修改语言
+
+```js
+import zhTw from 'artplayer/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        // Change the default language
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        // Change the imported language
+        'zh-tw': {
+            ...zhTw,
+            Play: 'Your Play'
+        },
+    },
+});
+```

scripts/trans-docs.js

@@ -43,10 +43,11 @@ function splitMarkdown(text, maxChars) {
 
 const translateContent = async (content, targetLanguage) => {
     try {
+        console.log('Content:', content.length);
         const response = await axios.post(
             'https://api.aimu.app/openai/chat',
             {
-                content: `Translate the following text to ${targetLanguage}:\n\n${content}`,
+                content: `The following is the text in markdown format and translate it to ${targetLanguage}:\n\n${content}`,
             },
             {
                 headers: {
@@ -55,14 +56,17 @@ const translateContent = async (content, targetLanguage) => {
                 timeout: 60000,
             },
         );
-        return response.data.data;
+
+        const result = response.data.data;
+        console.log('Result:', result.length);
+        return result;
     } catch (error) {
-        console.error('Error during translation:', error);
+        console.error(error.message);
         return '';
     }
 };
 
-const translateMarkdownFiles = async (filePaths, targetLanguage, openAIKey, maxCharsPerRequest) => {
+const translateMarkdownFiles = async (filePaths, targetLanguage, maxCharsPerRequest) => {
     for (const filePath of filePaths) {
         const content = fs.readFileSync(filePath, 'utf-8');
         const parts = splitMarkdown(content, maxCharsPerRequest);
@@ -70,7 +74,7 @@ const translateMarkdownFiles = async (filePaths, targetLanguage, openAIKey, maxC
         console.log('Parts:', parts.length);
         const translatedParts = [];
         for (const part of parts) {
-            const translatedPart = await translateContent(part, targetLanguage, openAIKey);
+            const translatedPart = await translateContent(part, targetLanguage);
             translatedParts.push(translatedPart);
         }
         const translatedContent = translatedParts.join('');