mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-30 03:51:25 -08:00
V5 (#509)
* update artplayer.d.ts * update variables.less * update artplayerPluginControl * build:all * update docs * update docs * update docs * Update layers.md * update index.js * update docs * update docs
This commit is contained in:
Harvey Zack authored and GitHub committed
1 parent
c8c08137c4
commit
ee49a0435e
202 files changed
+5293
-3466
No files matched your search
@@ -258,7 +258,7 @@ art.on('ready', () => {
|
||||
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
[/component/layers.html](/component/layers.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -292,7 +292,7 @@ art.on('ready', () => {
|
||||
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
[/component/controls.html](/component/controls.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -326,7 +326,7 @@ art.on('ready', () => {
|
||||
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
[/component/contextmenu.html](/component/contextmenu.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -465,7 +465,7 @@ art.on('ready', () => {
|
||||
|
||||
:::warning `设置面板` 请参考以下地址
|
||||
|
||||
[/start/setting.html](/start/setting.html)
|
||||
[/component/setting.html](/component/setting.html)
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
# 右键菜单
|
||||
|
||||
## 配置
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
## 创建
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{4-13}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
contextmenu: [
|
||||
{
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.contextmenu.show = true;
|
||||
|
||||
// Get the Element of contextmenu by name
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6-13}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.contextmenu.add({
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
});
|
||||
|
||||
art.contextmenu.show = true;
|
||||
|
||||
// Get the Element of contextmenu by name
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{21}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
contextmenu: [
|
||||
{
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.contextmenu.show = true;
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Delete the contextmenu by name
|
||||
art.contextmenu.remove('your-menu')
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{21-24}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
contextmenu: [
|
||||
{
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.contextmenu.show = true;
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Update the contextmenu by name
|
||||
art.contextmenu.update({
|
||||
name: 'your-menu',
|
||||
html: 'Your New Menu',
|
||||
})
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,178 @@
|
||||
# 控制器
|
||||
|
||||
## 配置
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ------------------------------------------ |
|
||||
| `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` | 选择列表的元素被点击时触发的函数 |
|
||||
|
||||
## 创建
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'your-button',
|
||||
index: 10,
|
||||
position: 'left',
|
||||
html: 'Your Button',
|
||||
tooltip: 'Your Button',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'subtitle',
|
||||
position: 'right',
|
||||
html: 'Subtitle',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '<span style="color:red">subtitle 01</span>',
|
||||
},
|
||||
{
|
||||
html: '<span style="color:yellow">subtitle 02</span>',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom) {
|
||||
console.info(item, $dom);
|
||||
return 'Your ' + item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Get the Element of control by name
|
||||
console.info(art.controls['your-button']);
|
||||
console.info(art.controls.subtitle);
|
||||
```
|
||||
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6-21}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'button1',
|
||||
index: 10,
|
||||
position: 'left',
|
||||
html: 'Your Button',
|
||||
tooltip: 'Your Button',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
});
|
||||
|
||||
// Get the Element of control by name
|
||||
console.info(art.controls.button1);
|
||||
```
|
||||
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{21}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'button1',
|
||||
index: 10,
|
||||
position: 'right',
|
||||
html: 'Your Button',
|
||||
tooltip: 'Your Button',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Delete the control by name
|
||||
art.controls.remove('button1');
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{26-40}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'button1',
|
||||
index: 10,
|
||||
position: 'right',
|
||||
html: 'Subtitle',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: 'subtitle 01',
|
||||
},
|
||||
{
|
||||
html: 'subtitle 02',
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Update the control by name
|
||||
art.controls.update({
|
||||
name: 'button1',
|
||||
index: 10,
|
||||
position: 'right',
|
||||
html: 'New Subtitle',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: 'new subtitle 01',
|
||||
},
|
||||
{
|
||||
html: 'new subtitle 02',
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,147 @@
|
||||
# 业务层
|
||||
|
||||
## 配置
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
## 创建
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{5-22}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Get the Element of layer by name
|
||||
console.info(art.layers['potser']);
|
||||
```
|
||||
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7-22}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.layers.add({
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
});
|
||||
|
||||
// Get the Element of layer by name
|
||||
console.info(art.layers['potser']);
|
||||
```
|
||||
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{21}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Delete the layer by name
|
||||
art.layers.remove('potser');
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{21-29}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Update the layer by name
|
||||
art.layers.update({
|
||||
name: 'potser',
|
||||
html: `<img style="width: 200px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
left: '50px',
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
+119
-28
@@ -1,6 +1,8 @@
|
||||
# 设置面板
|
||||
|
||||
You need to open the settings panel first. The player has four settings by default: `flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
|
||||
## 内置
|
||||
|
||||
需先打开设置面板，然后自带四个内置项：`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -16,16 +18,17 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Selection list
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | ------------------- | ------------------- |
|
||||
| `html` | `String`, `Element` | DOM of element |
|
||||
| `icon` | `String`, `Element` | Icon of element |
|
||||
| `selector` | `Array` | Element list |
|
||||
| `onSelect` | `Function` | Element click event |
|
||||
| `width` | `Number` | List width |
|
||||
| `tooltip` | `String` | Prompt text |
|
||||
## 创建 - 选择列表
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ------------ |
|
||||
| `html` | `String`, `Element` | 元素的 DOM |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `selector` | `Array` | 元素列表 |
|
||||
| `onSelect` | `Function` | 元素点击事件 |
|
||||
| `width` | `Number` | 列表宽度 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -85,7 +88,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## List nesting
|
||||
## 创建 - 列表嵌套
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -136,15 +139,15 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Toggle button
|
||||
## 创建 - 切换按钮
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | ------------------- | ---------------------- |
|
||||
| `html` | `String`, `Element` | DOM of element |
|
||||
| `icon` | `String`, `Element` | Icon of element |
|
||||
| `switch` | `Boolean` | Button default state |
|
||||
| `onSwitch` | `Function` | Button switching event |
|
||||
| `tooltip` | `String` | Prompt text |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | --------------- |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `switch` | `Boolean` | 按钮默认状态 |
|
||||
| `onSwitch` | `Function` | 按钮切换事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -171,16 +174,16 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Range Slider
|
||||
## 创建 - 范围滑块
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | ------------------- | ------------------------------ |
|
||||
| `html` | `String`, `Element` | DOM of element |
|
||||
| `icon` | `String`, `Element` | Icon of element |
|
||||
| `range` | `Array` | Default state array |
|
||||
| `onRange` | `Function` | Event triggered on completion |
|
||||
| `onChange` | `Function` | Events triggered when changing |
|
||||
| `tooltip` | `String` | Prompt text |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ---------------- |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `range` | `Array` | 默认状态数组 |
|
||||
| `onRange` | `Function` | 完成时触发的事件 |
|
||||
| `onChange` | `Function` | 变化时触发的事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
```js
|
||||
const range = [5, 1, 10, 1];
|
||||
@@ -211,3 +214,91 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{9-14}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.setting.show = true;
|
||||
|
||||
art.setting.add({
|
||||
html: 'Slider',
|
||||
tooltip: '5x',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
range: [5, 1, 10, 1],
|
||||
});
|
||||
```
|
||||
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{22}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
settings: [
|
||||
{
|
||||
name: 'slider',
|
||||
html: 'Slider',
|
||||
tooltip: '5x',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
range: [5, 1, 10, 1],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.setting.show = true;
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Delete the setting by name
|
||||
art.setting.remove('slider');
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{21-27}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
settings: [
|
||||
{
|
||||
name: 'slider',
|
||||
html: 'Slider',
|
||||
tooltip: '5x',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
range: [5, 1, 10, 1],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.setting.show = true;
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
// Update the setting by name
|
||||
art.setting.update({
|
||||
name: 'slider',
|
||||
html: 'PIP Mode',
|
||||
tooltip: 'Close',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
switch: false,
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
@@ -1,3 +1,7 @@
|
||||
::: danger Important Note
|
||||
The English document has not yet been completed, everything is subject to the Chinese document.
|
||||
:::
|
||||
|
||||
# Install
|
||||
|
||||
## Install
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
# webtorrent.js
|
||||
|
||||
👉 [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/webtorrent@2.0.13/index.min.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{21-24,28}
|
||||
function playTorrent(video, url, art) {
|
||||
if (art.torrent) art.torrent.destroy();
|
||||
const torrent = new WebTorrent();
|
||||
torrent.add(url, function (torrent) {
|
||||
var file = torrent.files[0];
|
||||
file.renderTo(video, {
|
||||
autoplay: art.option.autoplay,
|
||||
});
|
||||
});
|
||||
art.torrent = torrent;
|
||||
art.on('destroy', () => torrent.destroy());
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
|
||||
type: 'torrent',
|
||||
customType: {
|
||||
torrent: playTorrent,
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.video.controls = false;
|
||||
console.info(art.torrent);
|
||||
});
|
||||
```
|
||||
@@ -1,222 +0,0 @@
|
||||
# Component
|
||||
|
||||
The component configuration mentioned here mainly refers to three common configurations: `layers`, `controls` and `contextmenu`:
|
||||
|
||||
| Property | Type | Describe |
|
||||
| --------- | ------------------- | -------------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable components |
|
||||
| `name` | `String` | Component unique name, used to mark the class name |
|
||||
| `index` | `Number` | Component index, used to display the priority of |
|
||||
| `html` | `String`, `Element` | DOM element of component |
|
||||
| `style` | `Object` | Component Style Object |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Prompt text for component |
|
||||
|
||||
:::warning Tip
|
||||
|
||||
- The current component can only be added, not destroyed
|
||||
- Use the 'name' option to quickly obtain the 'DOM' element of a component
|
||||
- The order in which components appear can be controlled through the 'index' option
|
||||
|
||||
:::
|
||||
|
||||
## `layers`
|
||||
|
||||
Add a layer during instantiation, such as `logo` or `advertisement`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{5-22}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.info(art.layers.potser);
|
||||
```
|
||||
|
||||
You can also add a layer after instantiation
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7-22}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.layers.add({
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
});
|
||||
|
||||
console.info(art.layers.potser);
|
||||
```
|
||||
|
||||
## `controls`
|
||||
|
||||
Add a control during instantiation
|
||||
|
||||
:::warning There are three additional options for controls
|
||||
|
||||
- `position`: `left` and `right` positions of control controller
|
||||
- `selector`: Object array of selection list
|
||||
- `onSelect`: Function triggered when an element of the selection list is clicked
|
||||
|
||||
:::
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'your-button',
|
||||
index: 10,
|
||||
position: 'left',
|
||||
html: 'Your Button',
|
||||
tooltip: 'Your Button',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'subtitle',
|
||||
position: 'right',
|
||||
html: 'Subtitle',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '<span style="color:red">subtitle 01</span>',
|
||||
},
|
||||
{
|
||||
html: '<span style="color:yellow">subtitle 02</span>',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom) {
|
||||
console.info(item, $dom);
|
||||
return 'Your ' + item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.info(art.controls['your-button']);
|
||||
console.info(art.controls.subtitle);
|
||||
```
|
||||
|
||||
You can also add a control after instantiation
|
||||
|
||||
```js{6-22}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'button1',
|
||||
index: 10,
|
||||
position: 'left',
|
||||
html: 'Your Button',
|
||||
tooltip: 'Your Button',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
});
|
||||
|
||||
console.info(art.controls.button1);
|
||||
```
|
||||
|
||||
## `contextmenu`
|
||||
|
||||
Add a contextmenu during instantiation
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{4-13}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
contextmenu: [
|
||||
{
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
You can also add a contextmenu after instantiation
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6-13}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.contextmenu.add({
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
});
|
||||
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
@@ -630,7 +630,7 @@ var art = new Artplayer({
|
||||
|
||||
:::warning Please refer to the following address for `Component`:
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
[/component/layers.html](/component/layers.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -683,7 +683,7 @@ var art = new Artplayer({
|
||||
|
||||
:::warning Please refer to the following address for `Setting`
|
||||
|
||||
[/start/setting.html](/start/setting.html)
|
||||
[/component/setting.html](/component/setting.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -714,7 +714,7 @@ var art = new Artplayer({
|
||||
|
||||
:::warning Please refer to the following address for `Component`:
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
[/component/contextmenu.html](/component/contextmenu.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -749,7 +749,7 @@ var art = new Artplayer({
|
||||
|
||||
:::warning Please refer to the following address for `Setting`
|
||||
|
||||
[/start/setting.html](/start/setting.html)
|
||||
[/component/controls.html](/component/controls.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -928,13 +928,14 @@ var art = new Artplayer({
|
||||
|
||||
Set the subtitle of the video and support the subtitle format: `vtt`, `srt`, `ass`
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | --------- | ------------------------------------------------ |
|
||||
| `url` | `String` | Subtitle url |
|
||||
| `type` | `String` | Subtitle type: `vtt`, `srt`, `ass` |
|
||||
| `style` | `Object` | Subtitle style |
|
||||
| `encoding` | `String` | Subtitle code, Default: `utf-8` |
|
||||
| `escape` | `Boolean` | Whether to escape the `html` tag,Default: `true` |
|
||||
| Property | Type | Describe |
|
||||
| ----------- | ---------- | ------------------------------------------------ |
|
||||
| `url` | `String` | Subtitle url |
|
||||
| `type` | `String` | Subtitle type: `vtt`, `srt`, `ass` |
|
||||
| `style` | `Object` | Subtitle style |
|
||||
| `encoding` | `String` | Subtitle code, Default: `utf-8` |
|
||||
| `escape` | `Boolean` | Whether to escape the `html` tag,Default: `true` |
|
||||
| `onVttLoad` | `Function` | Functions for modifying `vtt` text |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1212,3 +1213,28 @@ var art = new Artplayer({
|
||||
airplay: true,
|
||||
});
|
||||
```
|
||||
|
||||
## `cssVar`
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Used to change built-in CSS variables
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{4}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
cssVar: {
|
||||
//
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
:::warning cssVar definitions
|
||||
|
||||
[artplayer/types/cssVar.d.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/cssVar.d.ts)
|
||||
|
||||
:::
|
||||
Reference in new issue
Block a user