diff --git a/packages/artplayer-vitepress/docs/en/index.md b/packages/artplayer-vitepress/docs/en/index.md
index d3927afdd..e69de29bb 100644
--- a/packages/artplayer-vitepress/docs/en/index.md
+++ b/packages/artplayer-vitepress/docs/en/index.md
@@ -1,342 +0,0 @@
-# 安装使用
-
-## 安装
-
-::: code-group
-
-```bash [npm]
-npm install artplayer
-```
-
-```bash [yarn]
-yarn add artplayer
-```
-
-```bash [pnpm]
-pnpm add artplayer
-```
-
-```html [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]
-
-
- ArtPlayer Demo
-
-
-
-
-
-
-
-```
-
-:::
-
-::: warning 提示
-
-播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
-
-:::
-
-::: tip 以下链接可以看到更多的使用例子
-
-[/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
-
-:::
-
-## `Vue.js`
-
-::: code-group
-
-```vue [Artplayer.vue]
-
-
-
-
-
-```
-
-```vue [app.vue]
-
-
-
-
-
-```
-
-:::
-
-::: 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 ;
-}
-```
-
-```jsx [app.jsx]
-import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
-
-function App() {
- return (
-
-
console.info(art)}
- />
-
- ▶ Run Code
-
-
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- autoSize: true,
- fullscreen: true,
- fullscreenWeb: true,
- plugins: [
- artplayerPluginAds({
- // html广告，假如是视频广告则忽略该值
- html: '
',
-
- // 视频广告的地址
- 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);
-});
-```
diff --git a/packages/artplayer-vitepress/docs/en/plugin/danmuku.md b/packages/artplayer-vitepress/docs/en/plugin/danmuku.md
index 796f2246f..e69de29bb 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/danmuku.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/danmuku.md
@@ -1,463 +0,0 @@
-# 弹幕库
-
-## 演示
-
-👉 [查看完整演示](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]
-
-```
-
-:::
-
-## 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'),
-}
-```
-
-## 使用弹幕数组
-
-
- ▶ Run Code
-
-
-```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
-
-
- ▶ Run Code
-
-
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- plugins: [
- artplayerPluginDanmuku({
- // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
- danmuku: '/assets/sample/danmuku.xml',
- }),
- ],
-});
-```
-
-## 使用异步调用
-
-
- ▶ Run Code
-
-
-```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` 进行隐藏或者显示弹幕
-
-
- ▶ Run Code
-
-
-```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` 判断当前弹幕是隐藏或者显示
-
-
- ▶ Run Code
-
-
-```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` 发送一条实时弹幕
-
-
- ▶ Run Code
-
-
-```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`
-
-
- ▶ Run Code
-
-
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- plugins: [
- artplayerPluginDanmuku({
- danmuku: '/assets/sample/danmuku.xml',
- }),
- ],
- controls: [
- {
- position: 'right',
- html: '弹幕大小：',
- 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 方法可以重载弹幕源，或者切换新弹幕
-
-
- ▶ Run Code
-
-
-```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`
-
-用于清空当前显示的弹幕
-
-
- ▶ Run Code
-
-
-```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`
-
-用于获取当前弹幕配置
-
-
- ▶ Run Code
-
-
-```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('弹幕销毁');
-});
-```
diff --git a/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md b/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md
index 7e1e1451b..32cd79adf 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/dash-quality.md
@@ -1,10 +1,10 @@
-# Dash 画质
+# Dash Video Quality
-## 演示
+## Demo
-👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-quality/index.js&example=dash.quality)
+👉 [View Full Demo](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-quality/index.js&example=dash.quality)
-## 安装
+## Installation
::: code-group
diff --git a/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md b/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md
index e7adae9b2..73cf5197c 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md
@@ -1,10 +1,10 @@
-# HLS 画质
+# HLS Quality
-## 演示
+## 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)
+👉 [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)
-## 安装
+## Installation
::: code-group
diff --git a/packages/artplayer-vitepress/docs/en/plugin/iframe.md b/packages/artplayer-vitepress/docs/en/plugin/iframe.md
index ad95f73d5..e69de29bb 100644
--- a/packages/artplayer-vitepress/docs/en/plugin/iframe.md
+++ b/packages/artplayer-vitepress/docs/en/plugin/iframe.md
@@ -1,294 +0,0 @@
-# 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]
-
-```
-
-:::
-
-## `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]
-
-
-
- ArtPlayer
-
-
-
-
-
-
-
-
-```
-
-```html [iframe.html]
-
-
-
- ArtPlayer
-
-
-
-
-
-
-
-
-
-
-```
-
-:::
-
-## `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]
-
-
-
-
- ArtPlayer
-
-
-
-
-
-
-
-
-
-
-```
-
-```html [iframe.html]
-
-
-
-
- ArtPlayer
-
-
-
-
-
-
-
-
-
-
-
-```
-
-:::
\ No newline at end of file
diff --git a/packages/artplayer-vitepress/docs/en/start/i18n.md b/packages/artplayer-vitepress/docs/en/start/i18n.md
index a0fcded1e..e69de29bb 100644
--- a/packages/artplayer-vitepress/docs/en/start/i18n.md
+++ b/packages/artplayer-vitepress/docs/en/start/i18n.md
@@ -1,104 +0,0 @@
-# 语言设置
-
-::: 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]
-
-
-
-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'
- },
- },
-});
-```
\ No newline at end of file
diff --git a/packages/artplayer-vitepress/docs/en/start/option.md b/packages/artplayer-vitepress/docs/en/start/option.md
index 1dd2148cc..e69de29bb 100644
--- a/packages/artplayer-vitepress/docs/en/start/option.md
+++ b/packages/artplayer-vitepress/docs/en/start/option.md
@@ -1,1200 +0,0 @@
-# 基础选项
-
-## `container`
-
-- Type: `String, Element`
-- Default: `#artplayer`
-
-播放器挂载的 `DOM` 容器
-
-▶ Run Code
-
-```js{2}
-var art = new Artplayer({
- container: '.artplayer-app',
- // container: document.querySelector('.artplayer-app'),
- url: '/assets/sample/video.mp4',
-});
-```
-
-您可能需要初始化容器元素的大小，如:
-
-```css{2-3}
-.artplayer-app {
- width: 400px;
- height: 300px;
-}
-```
-
-或者使用 `aspect-ratio`：
-
-```css{2}
-.artplayer-app {
- aspect-ratio: 16/9;
-}
-```
-
-:::warning 提示
-
-全部选项里，只有 `container` 是必填的
-
-:::
-
-## `url`
-
-- Type: `String`
-- Default: `''`
-
-视频源地址
-
-▶ Run Code
-
-```js{3}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
-});
-```
-
-有时候 `url` 地址没那么快知道，这时候你可以异步设置 `url`
-
-▶ Run Code
-
-```js{6}
-var art = new Artplayer({
- container: '.artplayer-app',
-});
-
-setTimeout(() => {
- art.url = '/assets/sample/video.mp4';
-}, 1000);
-```
-
-:::warning 提示
-
-默认支持三种视频文件格式：`.mp4`, `.ogg`, `.webm`
-
-如需要播放 `.m3u8` 或者 `.flv` 等其它格式，请参考左侧的 `第三方库`
-
-:::
-
-
-## `id`
-
-- Type: `String`
-- Default: `''`
-
-播放器的唯一标识，目前只用于记忆播放 `autoplayback`
-
-▶ Run Code
-
-```js{2}
-var art = new Artplayer({
- id: 'your-url-id',
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
-});
-```
-
-## `onReady`
-
-- Type: `Function`
-- Default: `undefined`
-
-构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和`ready`事件一样
-
-▶ Run Code
-
-```js{7-9}
-var art = new Artplayer(
- {
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- muted: true,
- },
- function onReady(art) {
- this.play()
- },
-);
-```
-
-等同于:
-
-```js{7-9}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- muted: true,
-});
-
-art.on('ready', () => {
- art.play();
-});
-```
-
-:::warning 提示
-
-回调函数里的`this`就是播放器实例，但回调函数假如使用了箭头函数，`this`则不会指向播放器实例
-
-:::
-
-## `poster`
-
-- Type: `String`
-- Default: `''`
-
-视频的海报，只会出现在播放器初始化且未播放的状态下
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- poster: '/assets/sample/poster.jpg',
-});
-```
-
-## `theme`
-
-- Type: `String`
-- Default: `#f00`
-
-播放器主题颜色，目前用于 `进度条` 和 `高亮元素` 上
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- theme: '#ffad00',
-});
-```
-
-## `volume`
-
-- Type: `Number`
-- Default: `0.7`
-
-播放器的默认音量
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- volume: 0.5,
-});
-```
-
-:::warning 提示
-
-播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值
-
-:::
-
-## `isLive`
-
-- Type: `Boolean`
-- Default: `false`
-
-使用直播模式，会隐藏进度条和播放时间
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- isLive: true,
-});
-```
-
-## `muted`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否默认静音
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- muted: true,
-});
-```
-
-## `autoplay`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否自动播放
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- autoplay: true,
- muted: true,
-});
-```
-
-:::warning 提示
-
-假如希望默认进入页面就能自动播放视频，`muted` 必需为 `true`，更多信息请阅读 [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
-
-:::
-
-## `autoSize`
-
-- Type: `Boolean`
-- Default: `false`
-
-播放器的尺寸默认会填充整个 `container` 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 `css` 的 `object-fit: cover;`
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- autoSize: true,
-});
-```
-
-## `autoMini`
-
-- Type: `Boolean`
-- Default: `false`
-
-当播放器滚动到浏览器视口以外时，自动进入 `迷你播放` 模式
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- autoMini: true,
-});
-```
-
-## `loop`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否循环播放
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- loop: true,
-});
-```
-
-## `flip`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否显示视频翻转功能，目前只出现在 `设置面板` 和 `右键菜单` 里
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- flip: true,
- setting: true,
-});
-```
-
-## `playbackRate`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否显示视频播放速度功能，会出现在 `设置面板` 和 `右键菜单` 里
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- playbackRate: true,
- setting: true,
-});
-```
-
-## `aspectRatio`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否显示视频长宽比功能，会出现在 `设置面板` 和 `右键菜单` 里
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- aspectRatio: true,
- setting: true,
-});
-```
-
-## `screenshot`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在底部控制栏里显示 `视频截图` 功能
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- screenshot: true,
-});
-```
-
-:::warning 提示
-
-由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
-
-:::
-
-## `setting`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在底部控制栏里显示 `设置面板` 的开关按钮
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- setting: true,
-});
-```
-
-## `hotkey`
-
-- Type: `Boolean`
-- Default: `true`
-
-是否使用快捷键
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- hotkey: true,
-});
-```
-
-| 热键 | 描述 |
-| ------- | ------------- |
-| `↑` | 增加音量 |
-| `↓` | 降低音量 |
-| `←` | 视频快进 |
-| `→` | 视频快退 |
-| `space` | 切换播放/暂停 |
-
-:::warning 提示
-
-只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
-
-:::
-
-## `pip`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在底部控制栏里显示 `画中画` 的开关按钮
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- pip: true,
-});
-```
-
-## `mutex`
-
-- Type: `Boolean`
-- Default: `true`
-
-假如页面里同时存在多个播放器，是否只能让一个播放器播放
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- mutex: true,
-});
-```
-
-## `fullscreen`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在底部控制栏里显示播放器 `窗口全屏` 按钮
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- fullscreen: true,
-});
-```
-
-## `fullscreenWeb`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在底部控制栏里显示播放器 `网页全屏` 按钮
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- fullscreenWeb: true,
-});
-```
-
-## `subtitleOffset`
-
-- Type: `Boolean`
-- Default: `false`
-
-字幕时间偏移，范围在 `[-5s, 5s]`，出现在 `设置面板` 里
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- subtitleOffset: true,
- subtitle: {
- url: '/assets/sample/subtitle.srt',
- },
- setting: true,
-});
-```
-
-## `miniProgressBar`
-
-- Type: `Boolean`
-- Default: `false`
-
-迷你进度条，只在播放器失去焦点后且正在播放时出现
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- miniProgressBar: true,
-});
-```
-
-## `useSSR`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否使用 `SSR` 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 `HTML` 时有用
-
-你可以通过 `Artplayer.html` 访问到播放器所需的 `HTML`
-
-▶ Run Code
-
-```js{7}
-var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
-
-var art = new Artplayer({
- container: $container,
- url: '/assets/sample/video.mp4',
- useSSR: true,
-});
-```
-
-## `playsInline`
-
-- Type: `Boolean`
-- Default: `true`
-
-在移动端是否使用 `playsInline` 模式
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- playsInline: true,
-});
-```
-
-## `layers`
-
-- Type: `Array`
-- Default: `[]`
-
-初始化自定义的 `层`
-
-▶ Run Code
-
-```js{5-23}
-var img = '/assets/sample/layer.png';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- layers: [
- {
- name: 'potser',
- html: `
`,
- style: {
- position: 'absolute',
- top: '20px',
- right: '20px',
- opacity: '.9',
- },
- click: function (...args) {
- console.info('click', args);
- art.layers.show = false;
- },
- mounted: function (...args) {
- console.info('mounted', args);
- },
- },
- ],
-});
-```
-
-:::warning `组件配置` 请参考以下地址：
-
-[/component/layers.html](/component/layers.html)
-
-:::
-
-## `settings`
-
-- Type: `Array`
-- Default: `[]`
-
-初始化自定义的 `设置面板`
-
-▶ Run Code
-
-```js{5-34}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- setting: true,
- settings: [
- {
- html: 'setting01',
- selector: [
- {
- html: 'setting01-01',
- },
- {
- html: 'setting01-02',
- },
- ],
- onSelect: function (...args) {
- console.info(args);
- },
- },
- {
- html: 'setting02',
- selector: [
- {
- html: 'setting02-01',
- },
- {
- html: 'setting02-02',
- },
- ],
- onSelect: function (...args) {
- console.info(args);
- },
- },
- ],
-});
-```
-
-:::warning `设置面板` 请参考以下地址
-
-[/component/setting.html](/component/setting.html)
-
-:::
-
-## `contextmenu`
-
-- Type: `Array`
-- Default: `[]`
-
-初始化自定义的 `右键菜单`
-
-▶ Run Code
-
-```js{4-12}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- contextmenu: [
- {
- html: 'your-menu',
- click: function (...args) {
- console.info('click', args);
- art.contextmenu.show = false;
- },
- },
- ],
-});
-```
-
-:::warning `组件配置` 请参考以下地址：
-
-[/component/contextmenu.html](/component/contextmenu.html)- Type:
-
-:::
-
-## `controls`
-
-- Type: `Array`
-- Default: `[]`
-
-初始化自定义的底部 `控制栏`
-
-▶ Run Code
-
-```js{4-16}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- controls: [
- {
- position: 'left',
- html: 'your-control',
- tooltip: 'Your Control',
- style: {
- color: 'green',
- },
- click: function (...args) {
- console.info('click', args);
- },
- },
- ],
-});
-```
-
-:::warning `组件配置` 请参考以下地址：
-
-[/component/controls.html](/component/controls.html)
-
-:::
-
-## `quality`
-
-- Type: `Array`
-- Default: `[]`
-
-是否在底部控制栏里显示 `画质选择` 列表
-
-| 属性 | 类型 | 描述 |
-| --------- | --------- | -------- |
-| `default` | `Boolean` | 默认画质 |
-| `html` | `String` | 画质名字 |
-| `url` | `String` | 画质地址 |
-
-▶ Run Code
-
-```js{4-14}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- quality: [
- {
- default: true,
- html: 'SD 480P',
- url: '/assets/sample/video.mp4',
- },
- {
- html: 'HD 720P',
- url: '/assets/sample/video.mp4',
- },
- ],
-});
-```
-
-## `highlight`
-
-- Type: `Array`
-- Default: `[]`
-
-在进度条上显示 `高亮信息`
-
-| 属性 | 类型 | 描述 |
-| ------ | -------- | ------------------ |
-| `time` | `Number` | 高亮时间（单位秒） |
-| `text` | `String` | 高亮文本 |
-
-▶ Run Code
-
-```js{4-25}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- highlight: [
- {
- time: 60,
- text: 'One more chance',
- },
- {
- time: 120,
- text: '谁でもいいはずなのに',
- },
- {
- time: 180,
- text: '夏の想い出がまわる',
- },
- {
- time: 240,
- text: 'こんなとこにあるはずもないのに',
- },
- {
- time: 300,
- text: '－－终わり－－',
- },
- ],
-});
-```
-
-## `plugins`
-
-- Type: `Array`
-- Default: `[]`
-
-初始化自定义的 `插件`
-
-▶ Run Code
-
-```js{15}
-function myPlugin(art) {
- console.info(art);
- return {
- name: 'myPlugin',
- something: 'something',
- doSomething: function () {
- console.info('doSomething');
- },
- };
-}
-
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- plugins: [myPlugin],
-});
-```
-
-## `thumbnails`
-
-- Type: `Object`
-- Default: `{}`
-
-在进度条上设置 `预览图`
-
-| 属性 | 类型 | 描述 |
-| -------- | -------- | ---------- |
-| `url` | `String` | 预览图地址 |
-| `number` | `Number` | 预览图数量 |
-| `column` | `Number` | 预览图列数 |
-| `width` | `Number` | 预览图宽度 |
-| `height` | `Number` | 预览图高度 |
-
-▶ Run Code
-
-```js{4-8}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- thumbnails: {
- url: '/assets/sample/thumbnails.png',
- number: 60,
- column: 10,
- },
-});
-```
-
-:::warning 在线生成预览图
-
-[artplayer-tool-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail)
-
-:::
-
-## `subtitle`
-
-- Type: `Object`
-- Default: `{}`
-
-设置视频的字幕，支持字幕格式：`vtt`, `srt`, `ass`
-
-| 属性 | 类型 | 描述 |
-| ----------- | ---------- | ----------------------------------- |
-| `name` | `String` | 字幕名字 |
-| `url` | `String` | 字幕地址 |
-| `type` | `String` | 字幕类型，可选 `vtt`, `srt`, `ass` |
-| `style` | `Object` | 字幕样式 |
-| `encoding` | `String` | 字幕编码，默认 `utf-8` |
-| `escape` | `Boolean` | 是否转义 `html` 标签，默认为 `true` |
-| `onVttLoad` | `Function` | 用于修改 `vtt` 文本的函数 |
-
-▶ Run Code
-
-```js{4-12}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- subtitle: {
- url: '/assets/sample/subtitle.srt',
- type: 'srt',
- encoding: 'utf-8',
- escape: true,
- style: {
- color: '#03A9F4',
- 'font-size': '30px',
- },
- },
-});
-```
-
-## `moreVideoAttr`
-
-- Type: `Object`
-- Default: `{'controls': false,'preload': 'metadata'}`
-
-更多视频属性，这些属性将直接写入视频元素里
-
-▶ Run Code
-
-```js{4-7}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- moreVideoAttr: {
- 'webkit-playsinline': true,
- playsInline: true,
- },
-});
-```
-
-## `icons`
-
-- Type: `Object`
-- Default: `{}`
-
-用于替换默认图标，支持 `Html` 字符串和 `HTMLElement`
-
-▶ Run Code
-
-```js{4-7}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- icons: {
- loading: '
',
- state: '
',
- },
-});
-```
-
-:::warning 全部图标的定义
-
-[artplayer/types/icons.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts)
-
-:::
-
-## `type`
-
-- Type: `String`
-- Default: `''`
-
-用于指明视频的格式，需要配合 `customType` 一起使用，默认视频的格式就是视频地址的后缀（如 `.m3u8`, `.mkv`, `.ts`），但有时候视频地地址没有正确的后缀，所以需要特别指明
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.m3u8',
- type: 'm3u8',
-});
-```
-
-:::warning 后缀的识别
-
-播放器只能解析这种后缀：`/assets/sample/video.m3u8`
-
-但无法解析这种后缀：`/assets/sample/video?type=m3u8`
-
-所以假如你使用了 `customType`，最好同时要指明 `type`
-
-:::
-
-## `customType`
-
-- Type: `Object`
-- Default: `{}`
-
-通过视频的 `type` 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数
-
-- `video` : 视频 `DOM` 元素
-- `url` : 视频地址
-- `art` : 当前实例
-
-▶ Run Code
-
-```js{4-8}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.m3u8',
- customType: {
- m3u8: function (video, url, art) {
- //
- },
- },
-});
-```
-
-## `lang`
-
-- Type: `String`
-- Default: `navigator.language.toLowerCase()`
-
-默认显示语言，目前支持：`en`, `zh-cn`
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- lang: 'en',
-});
-```
-
-:::warning 更多的语言设置
-
-[/start/i18n.html](/start/i18n.html)
-
-:::
-
-## `i18n`
-
-- Type: `Object`
-- Default: `{}`
-
-自定义 `i18n` 配置，该配置会和自带的 `i18n` 进行深度合并
-
-新增你的语言:
-
-▶ Run Code
-
-```js{4-9}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- lang: 'your-lang',
- i18n: {
- 'your-lang': {
- Play: 'Your Play'
- },
- },
-});
-```
-
-修改现有的语言
-
-▶ Run Code
-
-```js{4-11}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- i18n: {
- 'zh-cn': {
- Play: 'Your Play'
- },
- 'zh-tw': {
- Play: 'Your Play'
- },
- },
-});
-```
-
-:::warning 更多的语言设置
-
-[/start/i18n.html](/start/i18n.html)
-
-:::
-
-## `lock`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在移动端显示一个 `锁定按钮` ，用于隐藏底部 `控制栏`
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- lock: true,
-});
-```
-
-## `fastForward`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在移动端添加长按视频快进功能
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- fastForward: true,
-});
-```
-
-## `autoPlayback`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否使用自动 `回放功能`
-
-▶ Run Code
-
-```js{4-5}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- id: 'your-url-id',
- autoPlayback: true,
-});
-```
-
-:::warning 提示
-
-因为播放器默认使用 `url` 作为 `key` 来缓存播放进度的
-
-但假如你的同一个视频的 `url` 是不同的话，那么你需要使用 `id` 来标识视频的唯一 `key`
-
-:::
-
-## `autoOrientation`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- autoOrientation: true,
-});
-```
-
-## `airplay`
-
-- Type: `Boolean`
-- Default: `false`
-
-是否显示 `airplay` 按钮，当前只有部分浏览器支持该功能
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- airplay: true,
-});
-```
-
-## `cssVar`
-
-- Type: `Object`
-- Default: `{}`
-
-用于改变内置的css变量
-
-▶ Run Code
-
-```js{4}
-var art = new Artplayer({
- container: '.artplayer-app',
- url: '/assets/sample/video.mp4',
- cssVar: {
- //
- },
-});
-```
-
-:::warning cssVar 写法参考
-
-[artplayer/types/cssVar.d.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/cssVar.d.ts)
-
-:::
\ No newline at end of file
diff --git a/scripts/trans-docs.js b/scripts/trans-docs.js
index 478116596..470062ee9 100644
--- a/scripts/trans-docs.js
+++ b/scripts/trans-docs.js
@@ -3,11 +3,8 @@ import cpy from 'cpy';
import path from 'path';
import axios from 'axios';
import { glob } from 'glob';
-import dotenv from 'dotenv';
import { removeDir } from './utils.js';
-dotenv.config();
-
function splitMarkdown(text, maxChars) {
const parts = [];
let currentPart = '';
@@ -44,23 +41,21 @@ function splitMarkdown(text, maxChars) {
return parts;
}
-const translateContent = async (content, targetLanguage, openAIKey) => {
+const translateContent = async (content, targetLanguage) => {
try {
const response = await axios.post(
- 'https://api.openai.com/v1/engines/gpt-4-1106-preview/completions',
+ 'https://api.aimu.app/openai/chat',
{
- prompt: `Translate the following text to ${targetLanguage}:\n\n${content}`,
- max_tokens: 2048,
+ content: `Translate the following text to ${targetLanguage}:\n\n${content}`,
},
{
headers: {
- Authorization: `Bearer ${openAIKey}`,
'Content-Type': 'application/json',
},
+ timeout: 60000,
},
);
-
- return response.data.choices[0].text;
+ return response.data.data;
} catch (error) {
console.error('Error during translation:', error);
return '';
@@ -94,11 +89,6 @@ const translateMarkdownFiles = async (filePaths, targetLanguage, openAIKey, maxC
await cpy(path.resolve(basePath, dir), path.resolve(enPath, dir), { flat: true });
}
const mdsPaths = glob.sync(path.resolve(enPath, '**/*.md'));
- const openAIKey = process.env.OPENAI_KEY;
- const maxCharsPerRequest = 2000;
- if (openAIKey) {
- await translateMarkdownFiles(mdsPaths, 'English', openAIKey, maxCharsPerRequest);
- } else {
- console.log('OPENAI_KEY is not set');
- }
+ const maxCharsPerRequest = 1024;
+ await translateMarkdownFiles(mdsPaths, 'English', maxCharsPerRequest);
})();