mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-28 02:01:20 -08:00
Update build:docs and trans:docs scripts
This commit is contained in:
Harvey Zack committed
1 parent
a2d3e20479
commit
a2b57495a2
20 files changed
+749
-775
No files matched your search
@@ -1,19 +1,19 @@
|
||||
# 右键菜单
|
||||
# Context Menu
|
||||
|
||||
## 配置
|
||||
## Configuration
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
| Property | Type | Description |
|
||||
| --------- | ------------------- | ----------------------------|
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | Unique name of the component, used for marking the class name |
|
||||
| `index` | `Number` | Component index, used for display priority |
|
||||
| `html` | `String`, `Element` | The DOM element of the component |
|
||||
| `style` | `Object` | Style object for the component |
|
||||
| `click` | `Function` | Click event for the component |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Tooltip text for the component |
|
||||
|
||||
## 创建
|
||||
## Creation
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -38,8 +38,7 @@ art.contextmenu.show = true;
|
||||
// Get the Element of contextmenu by name
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
## 添加
|
||||
## Add
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -64,7 +63,7 @@ art.contextmenu.show = true;
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
## 删除
|
||||
## Delete
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -88,13 +87,13 @@ art.contextmenu.show = true;
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Delete the contextmenu by name
|
||||
// Delete the context menu by name
|
||||
art.contextmenu.remove('your-menu')
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
## Updates
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
# 控制器
|
||||
# Controller
|
||||
|
||||
## 配置
|
||||
## Configuration
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| Property | Type | Description |
|
||||
| ---------- | ------------------- | ------------------------------------------ |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
| `position` | `String` | `left` 和 `right` 控制控制器出现的左右位置 |
|
||||
| `selector` | `Array` | 选择列表的对象数组 |
|
||||
| `onSelect` | `Function` | 选择列表的元素被点击时触发的函数 |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | The unique name of the component for class identification |
|
||||
| `index` | `Number` | The index of the component, used for display priority |
|
||||
| `html` | `String`, `Element` | The component's DOM element |
|
||||
| `style` | `Object` | The style object for the component |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Tooltip text for the component |
|
||||
| `position` | `String` | `left` and `right` control the position of the controller |
|
||||
| `selector` | `Array` | An array of objects for the selection list |
|
||||
| `onSelect` | `Function` | Function triggered when an item from the selection list is clicked |
|
||||
|
||||
## 创建
|
||||
## Creation
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -66,8 +66,7 @@ var art = new Artplayer({
|
||||
console.info(art.controls['your-button']);
|
||||
console.info(art.controls['subtitle']);
|
||||
```
|
||||
|
||||
## 添加
|
||||
## Adding
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -97,8 +96,7 @@ art.controls.add({
|
||||
// Get the Element of control by name
|
||||
console.info(art.controls['button1']);
|
||||
```
|
||||
|
||||
## 删除
|
||||
## Delete
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -127,8 +125,7 @@ art.on('ready', () => {
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
## Update
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
# 业务层
|
||||
# Layer
|
||||
|
||||
## 配置
|
||||
## Configuration
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
| Property | Type | Description |
|
||||
| --------- | --------------------- | ---------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | Unique name of the component, used for marking class name |
|
||||
| `index` | `Number` | Component index, used for display priority |
|
||||
| `html` | `String`, `Element` | The DOM element of the component |
|
||||
| `style` | `Object` | Style object for the component |
|
||||
| `click` | `Function` | Click event for the component |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Tooltip text for the component |
|
||||
|
||||
## 创建
|
||||
## Creation
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -24,9 +24,9 @@ var art = new Artplayer({
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
name: 'poster',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
tooltip: 'Poster Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
@@ -43,10 +43,9 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
// Get the Element of layer by name
|
||||
console.info(art.layers['potser']);
|
||||
console.info(art.layers['poster']);
|
||||
```
|
||||
|
||||
## 添加
|
||||
## Add
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -58,9 +57,9 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.layers.add({
|
||||
name: 'potser',
|
||||
name: 'poster',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
tooltip: 'Poster Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
@@ -75,10 +74,9 @@ art.layers.add({
|
||||
});
|
||||
|
||||
// Get the Element of layer by name
|
||||
console.info(art.layers['potser']);
|
||||
console.info(art.layers['poster']);
|
||||
```
|
||||
|
||||
## 删除
|
||||
## Delete
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -89,7 +87,7 @@ var art = new Artplayer({
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
name: 'poster',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
@@ -103,12 +101,11 @@ var art = new Artplayer({
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Delete the layer by name
|
||||
art.layers.remove('potser');
|
||||
art.layers.remove('poster');
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
## Update
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -119,7 +116,7 @@ var art = new Artplayer({
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
name: 'poster',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
@@ -134,7 +131,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Update the layer by name
|
||||
art.layers.update({
|
||||
name: 'potser',
|
||||
name: 'poster',
|
||||
html: `<img style="width: 200px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# 设置面板
|
||||
# Settings Panel
|
||||
|
||||
## 内置
|
||||
## Built-in
|
||||
|
||||
须先打开设置面板，然后自带四个内置项：`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
|
||||
First, open the settings panel, and then it comes with four built-in items: `flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
@@ -18,12 +18,12 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Create - Selection List
|
||||
|
||||
## 创建 - 选择列表
|
||||
| Property | Type | Description |
|
||||
| ---------- | ------------------- | ------------ |
|
||||
| `html` | `String`, `Element` | Element's DOM |
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ------------ |
|
||||
| `html` | `String`, `Element` | 元素的 DOM |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `selector` | `Array` | 元素列表 |
|
||||
| `onSelect` | `Function` | 元素点击事件 |
|
||||
@@ -88,7 +88,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## 创建 - 列表嵌套
|
||||
## Creating - Nested Lists
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -138,16 +138,15 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
## Create - Toggle Button
|
||||
|
||||
## 创建 - 切换按钮
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | --------------- |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `switch` | `Boolean` | 按钮默认状态 |
|
||||
| `onSwitch` | `Function` | 按钮切换事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
| Property | Type | Description |
|
||||
| ---------- | ------------------- | ----------------- |
|
||||
| `html` | `String`, `Element` | Element's DOM element |
|
||||
| `icon` | `String`, `Element` | Element's icon |
|
||||
| `switch` | `Boolean` | Button's default state |
|
||||
| `onSwitch` | `Function` | Button toggle event |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -173,17 +172,16 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
## Create - Range Slider
|
||||
|
||||
## 创建 - 范围滑块
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ---------------- |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `range` | `Array` | 默认状态数组 |
|
||||
| `onRange` | `Function` | 完成时触发的事件 |
|
||||
| `onChange` | `Function` | 变化时触发的事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
| Attribute | Type | Description |
|
||||
| ---------- | ------------------- | --------------------------- |
|
||||
| `html` | `String`, `Element` | The element's DOM element |
|
||||
| `icon` | `String`, `Element` | The element's icon |
|
||||
| `range` | `Array` | Default state array |
|
||||
| `onRange` | `Function` | Event triggered upon completion |
|
||||
| `onChange` | `Function` | Event triggered on change |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
```js
|
||||
const range = [5, 1, 10, 1];
|
||||
@@ -192,7 +190,6 @@ const min = range[1];
|
||||
const max = range[2];
|
||||
const step = range[3];
|
||||
```
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
@@ -204,7 +201,7 @@ var art = new Artplayer({
|
||||
{
|
||||
html: 'Slider',
|
||||
tooltip: '5x',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
||||
range: [5, 1, 10, 1],
|
||||
onChange: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
@@ -214,8 +211,7 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 添加
|
||||
## Add
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -236,7 +232,7 @@ art.setting.add({
|
||||
});
|
||||
```
|
||||
|
||||
## 删除
|
||||
## Delete
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -266,8 +262,7 @@ art.on('ready', () => {
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
## Updates
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user