x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 19:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Harvey authored and Harvey Zack committed 2022-02-11 11:20:54 +08:00
1 parent 17f79d0b22
commit 7bb8c3d0e5
4 files changed
+182 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/ts/artplayer.d.ts
Vendored
+3 -3
View File
@@ -89,15 +89,15 @@ type SettingOption = {
/**
* Whether the default is selected
*/
current?: boolean;
default?: boolean;
/**
* Custom selector list, use in controls
* Custom selector list
*/
selector?: SettingOption[];
/**
* When selector item click, use in controls
* When selector item click
*/
onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void;
};
packages/artplayer-document/docs/en/Questions/How to add setting panel.md
+104 -1
View File
@@ -1,4 +1,107 @@
---
title: How to add setting panel
sidebar_position: 6
---
---
Settings panels are similar to a collection of list selections, and support multi-layer nested
| Property | Type | Description |
| ---------- | ------------------- | ------------------------ |
| `html` | `String`、`Element` | DOM elements of selector |
| `icon` | `String`、`Element` | Icon of selector |
| `selector` | `Array` | Selector List |
| `onSelect` | `Function` | Selector Click event |
| `width` | `Number` | Panel width |
| `default` | `Boolean` | Default selected |
<div className="run-code">▶ Run Code</div>
```js
function onSubtitleSelect(item, $dom) {
console.info(item, $dom);
this.subtitle.url = item.url;
}
function onQualitySelect(item, $dom) {
console.info(item, $dom);
this.switchQuality(item.url, item.html);
}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
settings: [
{
html: 'Select Subtitle',
width: 250,
selector: [
{
default: true,
html: '<span style="color:red">Subtitle 01</span>',
url: '/assets/sample/subtitle.srt?id=1',
onSelect: onSubtitleSelect,
},
{
html: '<span style="color:yellow">Subtitle 02</span>',
url: '/assets/sample/subtitle.srt?id=2',
onSelect: onSubtitleSelect,
},
],
},
{
html: 'Select Quality',
width: 150,
selector: [
{
default: true,
html: '1080P',
url: '/assets/sample/video.mp4?id=1080',
onSelect: onQualitySelect,
},
{
html: '720P',
url: '/assets/sample/video.mp4?id=720',
onSelect: onQualitySelect,
},
{
html: '360P',
url: '/assets/sample/video.mp4?id=360',
onSelect: onQualitySelect,
},
],
},
{
html: 'Multi-layer nested',
selector: [
{
html: 'Nested 01',
selector: [
{
html: 'Nested 02',
},
{
html: 'Nested 02',
},
],
},
{
html: 'Nested 01',
selector: [
{
html: 'Nested 02',
},
{
html: 'Nested 02',
},
],
},
],
},
],
});
```
packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md
+72 -9
View File
@@ -5,11 +5,28 @@ sidebar_position: 6
设置面板类似于列表选择的集合，而且支持多层嵌套
### 切换字幕
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | --------------- |
| `html` | `String`、`Element` | 元素的 DOM 元素 |
| `icon` | `String`、`Element` | 元素的图标 |
| `selector` | `Array` | 元素列表 |
| `onSelect` | `Function` | 元素点击事件 |
| `width` | `Number` | 列表宽度 |
| `default` | `Boolean` | 是否默认选中 |
<div className="run-code">▶ Run Code</div>
```js
function onSubtitleSelect(item, $dom) {
console.info(item, $dom);
this.subtitle.url = item.url;
}
function onQualitySelect(item, $dom) {
console.info(item, $dom);
this.switchQuality(item.url, item.html);
}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
@@ -19,25 +36,71 @@ var art = new Artplayer({
aspectRatio: true,
settings: [
{
html: 'Subtitle',
html: '选择字幕',
width: 250,
selector: [
{
default: true,
html: '<span style="color:red">Subtitle 01</span>',
url: '/assets/sample/subtitle.srt?id=1',
onSelect: onSubtitleSelect,
},
{
html: '<span style="color:yellow">Subtitle 02</span>',
url: '/assets/sample/subtitle.srt?id=2',
onSelect: onSubtitleSelect,
},
],
},
{
html: '选择画质',
width: 150,
selector: [
{
default: true,
html: '1080P',
url: '/assets/sample/video.mp4?id=1080',
onSelect: onQualitySelect,
},
{
html: '720P',
url: '/assets/sample/video.mp4?id=720',
onSelect: onQualitySelect,
},
{
html: '360P',
url: '/assets/sample/video.mp4?id=360',
onSelect: onQualitySelect,
},
],
},
{
html: '多层嵌套',
selector: [
{
html: '嵌套01',
selector: [
{
html: '嵌套02',
},
{
html: '嵌套02',
},
],
},
{
html: '嵌套01',
selector: [
{
html: '嵌套02',
},
{
html: '嵌套02',
},
],
},
],
onSelect: function (item, $dom) {
console.info(item, $dom);
art.subtitle.url = item.url;
return '你点击了 ' + item.html;
},
},
],
});
packages/artplayer/types/artplayer.d.ts
Vendored
+3 -3
View File
@@ -89,15 +89,15 @@ type SettingOption = {
/**
* Whether the default is selected
*/
current?: boolean;
default?: boolean;
/**
* Custom selector list, use in controls
* Custom selector list
*/
selector?: SettingOption[];
/**
* When selector item click, use in controls
* When selector item click
*/
onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void;
};