diff --git a/package.json b/package.json index 58cb925de..c23ea875c 100644 --- a/package.json +++ b/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", diff --git a/packages/artplayer-vitepress/docs/en/index.md b/packages/artplayer-vitepress/docs/en/index.md index e69de29bb..d3927afdd 100644 --- a/packages/artplayer-vitepress/docs/en/index.md +++ b/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] + +``` + +::: + +## `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 e69de29bb..56af13fa9 100644 --- a/packages/artplayer-vitepress/docs/en/plugin/ads.md +++ b/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] + +``` + +::: + +## 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 e69de29bb..796f2246f 100644 --- a/packages/artplayer-vitepress/docs/en/plugin/danmuku.md +++ b/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] + +``` + +::: + +## 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 32cd79adf..7e1e1451b 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 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 diff --git a/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md b/packages/artplayer-vitepress/docs/en/plugin/hls-quality.md index 73cf5197c..e7adae9b2 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 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 diff --git a/packages/artplayer-vitepress/docs/en/plugin/iframe.md b/packages/artplayer-vitepress/docs/en/plugin/iframe.md index e69de29bb..ad95f73d5 100644 --- a/packages/artplayer-vitepress/docs/en/plugin/iframe.md +++ b/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] + +``` + +::: + +## `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 e69de29bb..a0fcded1e 100644 --- a/packages/artplayer-vitepress/docs/en/start/i18n.md +++ b/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] + + + +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 e69de29bb..1dd2148cc 100644 --- a/packages/artplayer-vitepress/docs/en/start/option.md +++ b/packages/artplayer-vitepress/docs/en/start/option.md @@ -0,0 +1,1200 @@ +# 基础选项 + +## `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 470062ee9..b0bdc66ab 100644 --- a/scripts/trans-docs.js +++ b/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('');