mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 09:41:20 -08:00
Update language and demo links in plugin
documentation
This commit is contained in:
Harvey Zack committed
1 parent
69197312cc
commit
b6a62f8dc5
9 files changed
+15
-2526
No files matched your search
@@ -1,342 +0,0 @@
|
|||||||
# 安装使用
|
|
||||||
|
|
||||||
## 安装
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```bash [npm]
|
|
||||||
npm install artplayer
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [yarn]
|
|
||||||
yarn add artplayer
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [pnpm]
|
|
||||||
pnpm add artplayer
|
|
||||||
```
|
|
||||||
|
|
||||||
```html [script]
|
|
||||||
<script src="path/to/artplayer.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## `CDN`
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```bash [jsdelivr.net]
|
|
||||||
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [unpkg.com]
|
|
||||||
https://unpkg.com/artplayer/dist/artplayer.js
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 使用
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```js [index.js]
|
|
||||||
import Artplayer from 'artplayer';
|
|
||||||
|
|
||||||
const art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: 'path/to/video.mp4',
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
```html [index.html]
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ArtPlayer Demo</title>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<style>
|
|
||||||
.artplayer-app {
|
|
||||||
width: 400px;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="artplayer-app"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: warning 提示
|
|
||||||
|
|
||||||
播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: tip 以下链接可以看到更多的使用例子
|
|
||||||
|
|
||||||
[/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## `Vue.js`
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```vue [Artplayer.vue]
|
|
||||||
<template>
|
|
||||||
<div ref="artRef"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Artplayer from "artplayer";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
instance: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
option: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.instance = new Artplayer({
|
|
||||||
...this.option,
|
|
||||||
container: this.$refs.artRef,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$emit("get-instance", this.instance);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (this.instance && this.instance.destroy) {
|
|
||||||
this.instance.destroy(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
```vue [app.vue]
|
|
||||||
<template>
|
|
||||||
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Artplayer from "./Artplayer.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
url: "path/to/video.mp4",
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
width: "600px",
|
|
||||||
height: "400px",
|
|
||||||
margin: "60px auto 0",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Artplayer,
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getInstance(art) {
|
|
||||||
console.info(art);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: warning Artplayer 非响应式：
|
|
||||||
|
|
||||||
在 `Vue.js` 里直接修改 `option` 是不会改变播放器的
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## `React.js`
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```jsx [Artplayer.jsx]
|
|
||||||
import { useEffect, useRef } from 'react';
|
|
||||||
import Artplayer from 'artplayer';
|
|
||||||
|
|
||||||
export default function Player({ option, getInstance, ...rest }) {
|
|
||||||
const artRef = useRef();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const art = new Artplayer({
|
|
||||||
...option,
|
|
||||||
container: artRef.current,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (getInstance && typeof getInstance === 'function') {
|
|
||||||
getInstance(art);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (art && art.destroy) {
|
|
||||||
art.destroy(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return <div ref={artRef} {...rest}></div>;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```jsx [app.jsx]
|
|
||||||
import React from 'react';
|
|
||||||
import Artplayer from './ArtPlayer.jsx';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Artplayer
|
|
||||||
option={{
|
|
||||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
width: '600px',
|
|
||||||
height: '400px',
|
|
||||||
margin: '60px auto 0',
|
|
||||||
}}
|
|
||||||
getInstance={(art) => console.info(art)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: warning Artplayer 非响应式：
|
|
||||||
|
|
||||||
在 `React.js` 里直接修改 `option` 是不会改变播放器的
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## TypeScript
|
|
||||||
|
|
||||||
导入 `Artplayer` 时会自动导入的 `artplayer.d.ts`，但你也可以单独导入选项的类型
|
|
||||||
|
|
||||||
```ts{2}
|
|
||||||
import Artplayer from 'artplayer';
|
|
||||||
import { type Option } from 'artplayer/types/option';
|
|
||||||
|
|
||||||
const option: Option = {
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: './assets/sample/video.mp4',
|
|
||||||
};
|
|
||||||
|
|
||||||
option.volume = 0.5;
|
|
||||||
|
|
||||||
const art = new Artplayer(option);
|
|
||||||
```
|
|
||||||
|
|
||||||
::: tip 全部 TypeScript 定义
|
|
||||||
|
|
||||||
[packages/artplayer/types](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer/types)
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## JavaScript
|
|
||||||
|
|
||||||
有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型
|
|
||||||
|
|
||||||
变量：
|
|
||||||
|
|
||||||
```js{1-3}
|
|
||||||
/**
|
|
||||||
* @type {import("artplayer")}
|
|
||||||
*/
|
|
||||||
let art = null;
|
|
||||||
```
|
|
||||||
|
|
||||||
参数：
|
|
||||||
|
|
||||||
```js{1-3}
|
|
||||||
/**
|
|
||||||
* @param {import("artplayer")} art
|
|
||||||
*/
|
|
||||||
function getInstance(art) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
属性：
|
|
||||||
|
|
||||||
```js{4-6}
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
/**
|
|
||||||
* @type {import("artplayer")}
|
|
||||||
*/
|
|
||||||
art: null,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
选项：
|
|
||||||
|
|
||||||
```js{1-3}
|
|
||||||
/**
|
|
||||||
* @type {import("artplayer/types/option").Option}
|
|
||||||
*/
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: './assets/sample/video.mp4',
|
|
||||||
};
|
|
||||||
|
|
||||||
option.volume = 0.5;
|
|
||||||
|
|
||||||
const art8 = new Artplayer(option);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 古老的浏览器
|
|
||||||
|
|
||||||
生产构建的 `artplayer.js` 只兼容最新一个主版本的 `Chrome`：`last 1 Chrome version`
|
|
||||||
|
|
||||||
对于古老的浏览器，可以使用 `artplayer.legacy.js` 文件，可以兼容到：`IE 11`
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
|
|
||||||
```
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```bash [jsdelivr.net]
|
|
||||||
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [unpkg.com]
|
|
||||||
https://unpkg.com/artplayer/dist/artplayer.legacy.js
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: tip 假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
|
|
||||||
|
|
||||||
构建配置：[scripts/build.js](https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29)
|
|
||||||
|
|
||||||
参考文档：[browserslist](https://github.com/browserslist/browserslist#full-list)
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
@@ -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]
|
|
||||||
<script src="path/to/artplayer-plugin-ads.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## CDN
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```bash [jsdelivr.net]
|
|
||||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [unpkg.com]
|
|
||||||
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 使用
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
autoSize: true,
|
|
||||||
fullscreen: true,
|
|
||||||
fullscreenWeb: true,
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginAds({
|
|
||||||
// html广告，假如是视频广告则忽略该值
|
|
||||||
html: '<img src="/assets/sample/poster.jpg">',
|
|
||||||
|
|
||||||
// 视频广告的地址
|
|
||||||
video: '/assets/sample/test1.mp4',
|
|
||||||
|
|
||||||
// 广告跳转网址，为空则不跳转
|
|
||||||
url: 'http://artplayer.org',
|
|
||||||
|
|
||||||
// 必须观看的时长，期间不能被跳过，单位为秒
|
|
||||||
// 当该值大于或等于totalDuration时，不能提前关闭广告
|
|
||||||
// 当该值等于或小于0时，则随时都可以关闭广告
|
|
||||||
playDuration: 5,
|
|
||||||
|
|
||||||
// 广告总时长，单位为秒
|
|
||||||
totalDuration: 10,
|
|
||||||
|
|
||||||
// 视频广告是否默认静音
|
|
||||||
muted: false,
|
|
||||||
|
|
||||||
// 多语言支持
|
|
||||||
i18n: {
|
|
||||||
close: '关闭广告',
|
|
||||||
countdown: '%s秒',
|
|
||||||
detail: '查看详情',
|
|
||||||
canBeClosed: '%s秒后可关闭广告',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
// ad is clicked
|
|
||||||
art.on('artplayerPluginAds:click', (ads) => {
|
|
||||||
console.info(ads);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Ad skipped
|
|
||||||
art.on('artplayerPluginAds:skip', (ads) => {
|
|
||||||
console.info(ads);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
@@ -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]
|
|
||||||
<script src="path/to/artplayer-plugin-danmuku.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## CDN
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```bash [jsdelivr.net]
|
|
||||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [unpkg.com]
|
|
||||||
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 选项
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
|
|
||||||
speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
|
|
||||||
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
|
|
||||||
fontSize: 25, // 字体大小，支持数字和百分比
|
|
||||||
color: '#FFFFFF', // 默认字体颜色
|
|
||||||
mode: 0, // 默认模式，0-滚动，1-静止
|
|
||||||
margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
|
|
||||||
antiOverlap: true, // 是否防重叠
|
|
||||||
useWorker: true, // 是否使用 web worker
|
|
||||||
synchronousPlayback: false, // 是否同步到播放速度
|
|
||||||
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
|
|
||||||
lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
|
|
||||||
maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
|
|
||||||
minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
|
|
||||||
maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
|
|
||||||
theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
|
|
||||||
heatmap: true, // 是否开启弹幕热度图, 默认为 false
|
|
||||||
beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
|
|
||||||
// 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
|
|
||||||
mount: document.querySelector('.artplayer-danmuku'),
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 使用弹幕数组
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
setting: true,
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
// 弹幕数组
|
|
||||||
danmuku: [
|
|
||||||
{
|
|
||||||
text: '111', // 弹幕文本
|
|
||||||
time: 1, // 发送时间，单位秒
|
|
||||||
color: '#fff', // 弹幕局部颜色
|
|
||||||
border: false, // 是否显示描边
|
|
||||||
mode: 0, // 弹幕模式: 0表示滚动, 1静止
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '222',
|
|
||||||
time: 2,
|
|
||||||
color: 'red',
|
|
||||||
border: true,
|
|
||||||
mode: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '333',
|
|
||||||
time: 3,
|
|
||||||
color: 'green',
|
|
||||||
border: false,
|
|
||||||
mode: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 使用弹幕 XML
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
// 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 使用异步调用
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
// 使用 Promise 异步返回
|
|
||||||
danmuku: function () {
|
|
||||||
return new Promise((resovle) => {
|
|
||||||
return resovle([
|
|
||||||
{
|
|
||||||
text: '111',
|
|
||||||
time: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '222',
|
|
||||||
time: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '333',
|
|
||||||
time: 3,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `hide/show`
|
|
||||||
|
|
||||||
通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
controls: [
|
|
||||||
{
|
|
||||||
position: 'right',
|
|
||||||
html: '隐藏弹幕',
|
|
||||||
click: function () {
|
|
||||||
art.plugins.artplayerPluginDanmuku.hide();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
position: 'right',
|
|
||||||
html: '显示弹幕',
|
|
||||||
click: function () {
|
|
||||||
art.plugins.artplayerPluginDanmuku.show();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `isHide`
|
|
||||||
|
|
||||||
通过属性 `isHide` 判断当前弹幕是隐藏或者显示
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
controls: [
|
|
||||||
{
|
|
||||||
position: 'right',
|
|
||||||
html: '隐藏弹幕',
|
|
||||||
click: function (_, event) {
|
|
||||||
if (art.plugins.artplayerPluginDanmuku.isHide) {
|
|
||||||
art.plugins.artplayerPluginDanmuku.show();
|
|
||||||
event.target.innerText = '隐藏弹幕';
|
|
||||||
} else {
|
|
||||||
art.plugins.artplayerPluginDanmuku.hide();
|
|
||||||
event.target.innerText = '显示弹幕';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `emit`
|
|
||||||
|
|
||||||
通过方法 `emit` 发送一条实时弹幕
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
controls: [
|
|
||||||
{
|
|
||||||
position: 'right',
|
|
||||||
html: '发送弹幕',
|
|
||||||
click: function () {
|
|
||||||
var text = prompt('请输入弹幕文本', '弹幕测试文本');
|
|
||||||
if (!text || !text.trim()) return;
|
|
||||||
var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
|
|
||||||
art.plugins.artplayerPluginDanmuku.emit({
|
|
||||||
text: text,
|
|
||||||
color: color,
|
|
||||||
border: true,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `config`
|
|
||||||
|
|
||||||
通过方法 `config` 实时改变弹幕配置，支持属性有：
|
|
||||||
|
|
||||||
- `danmuku`
|
|
||||||
- `speed`
|
|
||||||
- `opacity`
|
|
||||||
- `fontSize`
|
|
||||||
- `color`
|
|
||||||
- `mode`
|
|
||||||
- `margin`
|
|
||||||
- `antiOverlap`
|
|
||||||
- `synchronousPlayback`
|
|
||||||
- `filter`
|
|
||||||
- `lockTime`
|
|
||||||
- `beforeEmit`
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
controls: [
|
|
||||||
{
|
|
||||||
position: 'right',
|
|
||||||
html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
|
|
||||||
style: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
mounted: function ($setting) {
|
|
||||||
const $range = $setting.querySelector('input[type=range]');
|
|
||||||
$range.addEventListener('change', () => {
|
|
||||||
art.plugins.artplayerPluginDanmuku.config({
|
|
||||||
fontSize: Number($range.value),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `load`
|
|
||||||
|
|
||||||
通过 load 方法可以重载弹幕源，或者切换新弹幕
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
controls: [
|
|
||||||
{
|
|
||||||
position: 'right',
|
|
||||||
html: '重载弹幕',
|
|
||||||
click: function () {
|
|
||||||
art.plugins.artplayerPluginDanmuku.load();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
position: 'right',
|
|
||||||
html: '切换弹幕',
|
|
||||||
click: function () {
|
|
||||||
art.plugins.artplayerPluginDanmuku.config({
|
|
||||||
danmuku: '/assets/sample/danmuku-v2.xml',
|
|
||||||
});
|
|
||||||
art.plugins.artplayerPluginDanmuku.load();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `reset`
|
|
||||||
|
|
||||||
用于清空当前显示的弹幕
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
setting: true,
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('resize', () => {
|
|
||||||
art.plugins.artplayerPluginDanmuku.reset();
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## `option`
|
|
||||||
|
|
||||||
用于获取当前弹幕配置
|
|
||||||
|
|
||||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
|
||||||
▶ Run Code
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
setting: true,
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('ready', () => {
|
|
||||||
console.info(art.plugins.artplayerPluginDanmuku.option);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 事件
|
|
||||||
|
|
||||||
```js
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
setting: true,
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:emit', (danmu) => {
|
|
||||||
console.info('新增弹幕', danmu);
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:loaded', (danmus) => {
|
|
||||||
console.info('加载弹幕', danmus.length);
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:error', (error) => {
|
|
||||||
console.info('加载错误', error);
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:config', (option) => {
|
|
||||||
console.info('配置变化', option);
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:stop', () => {
|
|
||||||
console.info('弹幕停止');
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:start', () => {
|
|
||||||
console.info('弹幕开始');
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:hide', () => {
|
|
||||||
console.info('弹幕隐藏');
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:show', () => {
|
|
||||||
console.info('弹幕显示');
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('artplayerPluginDanmuku:destroy', () => {
|
|
||||||
console.info('弹幕销毁');
|
|
||||||
});
|
|
||||||
```
|
|
||||||
@@ -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
|
::: code-group
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
::: code-group
|
||||||
|
|
||||||
|
|||||||
@@ -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]
|
|
||||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## `CDN`
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```bash [jsdelivr.net]
|
|
||||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [unpkg.com]
|
|
||||||
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 使用
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```html [index.html]
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ArtPlayer</title>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<iframe id="iframe"></iframe>
|
|
||||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
|
||||||
<script>
|
|
||||||
const iframe = new ArtplayerPluginIframe({
|
|
||||||
// Iframe element
|
|
||||||
iframe: document.querySelector('#iframe'),
|
|
||||||
// Iframe url
|
|
||||||
url: 'path/to/iframe.html',
|
|
||||||
});
|
|
||||||
|
|
||||||
// Send message to iframe
|
|
||||||
iframe.commit(() => {
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: 'path/to/video.mp4',
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
```html [iframe.html]
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ArtPlayer</title>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="artplayer-app" style="width: 100%; height: 100%;"></div>
|
|
||||||
<script src="path/to/artplayer.js"></script>
|
|
||||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
|
||||||
<script>
|
|
||||||
// Inject scripts to receive messages from instances
|
|
||||||
ArtplayerPluginIframe.inject();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## `index.html` 接口
|
|
||||||
|
|
||||||
### `commit`
|
|
||||||
|
|
||||||
从 `index.html` 将消息推送到 `iframe.html`，该函数将在 `iframe.html` 内部运行，同时它也能用于异步获取 `iframe.html` 里的值
|
|
||||||
|
|
||||||
```js
|
|
||||||
iframe.commit(() => {
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: 'path/to/video.mp4',
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
iframe.commit(() => {
|
|
||||||
art.seek = 5;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get the value from the iframe.html
|
|
||||||
(async function () {
|
|
||||||
// Use the return keyword
|
|
||||||
var currentTime = await iframe.commit(() => {
|
|
||||||
return art.currentTime;
|
|
||||||
});
|
|
||||||
|
|
||||||
// or use the resolve method
|
|
||||||
var currentTime2 = await iframe.commit((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve(art.currentTime);
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
```
|
|
||||||
|
|
||||||
### `message`
|
|
||||||
|
|
||||||
在 `index.html` 接收来自 `iframe.html` 的消息
|
|
||||||
|
|
||||||
```js
|
|
||||||
iframe.message((event) => {
|
|
||||||
console.info(event);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### `destroy`
|
|
||||||
|
|
||||||
销毁后 `index.html` 无法与 `iframe.html` 通信
|
|
||||||
|
|
||||||
```js
|
|
||||||
iframe.destroy();
|
|
||||||
```
|
|
||||||
|
|
||||||
## `iframe.html` 接口
|
|
||||||
|
|
||||||
:::warning 提示
|
|
||||||
|
|
||||||
`iframe.html` 接口 只能运行在 `iframe.html` 里
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
### `inject`
|
|
||||||
|
|
||||||
注入脚本，接收来自 `index.html` 的消息
|
|
||||||
|
|
||||||
```js
|
|
||||||
ArtplayerPluginIframe.inject();
|
|
||||||
```
|
|
||||||
|
|
||||||
### `postMessage`
|
|
||||||
|
|
||||||
将消息推送到 `index.html`
|
|
||||||
|
|
||||||
```js
|
|
||||||
iframe.message((event) => {
|
|
||||||
console.info(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
iframe.commit(() => {
|
|
||||||
ArtplayerPluginIframe.postMessage({
|
|
||||||
type: 'currentTime',
|
|
||||||
data: art.currentTime,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 例子
|
|
||||||
|
|
||||||
最常遇到的问题是，播放器在 `iframe.html` 里进行网页全屏，但在 `index.html` 是不生效的，这时候只要监听 `iframe.html` 里的 `fullscreenWeb` 事件并通知到 `index.html` 即可
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
|
|
||||||
```html [index.html]
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ArtPlayer</title>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<iframe id="iframe"></iframe>
|
|
||||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
|
||||||
<style>
|
|
||||||
.fullscreenWeb {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 9999;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
const $iframe = document.querySelector('#iframe');
|
|
||||||
const iframe = new ArtplayerPluginIframe({
|
|
||||||
iframe: $iframe,
|
|
||||||
url: 'path/to/iframe.html',
|
|
||||||
});
|
|
||||||
|
|
||||||
iframe.message(({ type, data }) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'fullscreenWeb':
|
|
||||||
if (data) {
|
|
||||||
$iframe.classList.add('fullscreenWeb');
|
|
||||||
} else {
|
|
||||||
$iframe.classList.remove('fullscreenWeb');
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
iframe.commit(() => {
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: 'path/to/video.mp4',
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('fullscreenWeb', (state) => {
|
|
||||||
ArtplayerPluginIframe.postMessage({
|
|
||||||
type: 'fullscreenWeb',
|
|
||||||
data: state,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
```html [iframe.html]
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ArtPlayer</title>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="artplayer-app" style="width: 100%; height: 100%;"></div>
|
|
||||||
<script src="path/to/artplayer.js"></script>
|
|
||||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
|
||||||
<script>
|
|
||||||
ArtplayerPluginIframe.inject();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
@@ -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]
|
|
||||||
<script src="artplayer/dist/i18n/id.js"></script>
|
|
||||||
<script src="artplayer/dist/i18n/zh-tw.js"></script>
|
|
||||||
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
i18n: {
|
|
||||||
id: window['artplayer-i18n-id'],
|
|
||||||
'zh-tw': window['artplayer-i18n-zh-tw'],
|
|
||||||
},
|
|
||||||
lang: 'zh-tw',
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 新增语言
|
|
||||||
|
|
||||||
```js{4-9}
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
lang: 'your-lang',
|
|
||||||
i18n: {
|
|
||||||
'your-lang': {
|
|
||||||
Play: 'Your Play'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 修改语言
|
|
||||||
|
|
||||||
```js
|
|
||||||
import zhTw from 'artplayer/i18n/zh-tw.js';
|
|
||||||
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
i18n: {
|
|
||||||
// Change the default language
|
|
||||||
'zh-cn': {
|
|
||||||
Play: 'Your Play'
|
|
||||||
},
|
|
||||||
// Change the imported language
|
|
||||||
'zh-tw': {
|
|
||||||
...zhTw,
|
|
||||||
Play: 'Your Play'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
```
|
|
||||||
File diff suppressed because it is too large.
Load diff
+7
-17
@@ -3,11 +3,8 @@ import cpy from 'cpy';
|
|||||||
import path from 'path';
|
import path from 'path';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { glob } from 'glob';
|
import { glob } from 'glob';
|
||||||
import dotenv from 'dotenv';
|
|
||||||
import { removeDir } from './utils.js';
|
import { removeDir } from './utils.js';
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
function splitMarkdown(text, maxChars) {
|
function splitMarkdown(text, maxChars) {
|
||||||
const parts = [];
|
const parts = [];
|
||||||
let currentPart = '';
|
let currentPart = '';
|
||||||
@@ -44,23 +41,21 @@ function splitMarkdown(text, maxChars) {
|
|||||||
return parts;
|
return parts;
|
||||||
}
|
}
|
||||||
|
|
||||||
const translateContent = async (content, targetLanguage, openAIKey) => {
|
const translateContent = async (content, targetLanguage) => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.post(
|
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}`,
|
content: `Translate the following text to ${targetLanguage}:\n\n${content}`,
|
||||||
max_tokens: 2048,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${openAIKey}`,
|
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
|
timeout: 60000,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
return response.data.data;
|
||||||
return response.data.choices[0].text;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error during translation:', error);
|
console.error('Error during translation:', error);
|
||||||
return '';
|
return '';
|
||||||
@@ -94,11 +89,6 @@ const translateMarkdownFiles = async (filePaths, targetLanguage, openAIKey, maxC
|
|||||||
await cpy(path.resolve(basePath, dir), path.resolve(enPath, dir), { flat: true });
|
await cpy(path.resolve(basePath, dir), path.resolve(enPath, dir), { flat: true });
|
||||||
}
|
}
|
||||||
const mdsPaths = glob.sync(path.resolve(enPath, '**/*.md'));
|
const mdsPaths = glob.sync(path.resolve(enPath, '**/*.md'));
|
||||||
const openAIKey = process.env.OPENAI_KEY;
|
const maxCharsPerRequest = 1024;
|
||||||
const maxCharsPerRequest = 2000;
|
await translateMarkdownFiles(mdsPaths, 'English', maxCharsPerRequest);
|
||||||
if (openAIKey) {
|
|
||||||
await translateMarkdownFiles(mdsPaths, 'English', openAIKey, maxCharsPerRequest);
|
|
||||||
} else {
|
|
||||||
console.log('OPENAI_KEY is not set');
|
|
||||||
}
|
|
||||||
})();
|
})();
|
||||||
Reference in new issue
Block a user