From b6a62f8dc51f05bab220d7958255aa61bb8bf5ed Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Sun, 26 Nov 2023 11:26:18 +0800 Subject: [PATCH] Update language and demo links in plugin documentation --- packages/artplayer-vitepress/docs/en/index.md | 342 ----- .../artplayer-vitepress/docs/en/plugin/ads.md | 98 -- .../docs/en/plugin/danmuku.md | 463 ------- .../docs/en/plugin/dash-quality.md | 8 +- .../docs/en/plugin/hls-quality.md | 8 +- .../docs/en/plugin/iframe.md | 294 ---- .../artplayer-vitepress/docs/en/start/i18n.md | 104 -- .../docs/en/start/option.md | 1200 ----------------- scripts/trans-docs.js | 24 +- 9 files changed, 15 insertions(+), 2526 deletions(-) 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)} - /> -
- ); -} - -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) - -::: - diff --git a/packages/artplayer-vitepress/docs/en/plugin/ads.md b/packages/artplayer-vitepress/docs/en/plugin/ads.md index 56af13fa9..e69de29bb 100644 --- a/packages/artplayer-vitepress/docs/en/plugin/ads.md +++ b/packages/artplayer-vitepress/docs/en/plugin/ads.md @@ -1,98 +0,0 @@ -# 视频广告 - -## 演示 - -👉 [查看完整演示](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] - -``` - -::: - -## 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 -``` - -::: - -## 使用 - -
- ▶ 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); })();