x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-28 10:31:20 -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 * Whether the default is selected
*/ */
current?: boolean; default?: boolean;
/** /**
* Custom selector list, use in controls * Custom selector list
*/ */
selector?: SettingOption[]; selector?: SettingOption[];
/** /**
* When selector item click, use in controls * When selector item click
*/ */
onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void; 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 title: How to add setting panel
sidebar_position: 6 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> <div className="run-code">▶ Run Code</div>
```js ```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({ var art = new Artplayer({
container: '.artplayer-app', container: '.artplayer-app',
url: '/assets/sample/video.mp4', url: '/assets/sample/video.mp4',
@@ -19,25 +36,71 @@ var art = new Artplayer({
aspectRatio: true, aspectRatio: true,
settings: [ settings: [
{ {
html: 'Subtitle', html: '选择字幕',
width: 250,
selector: [ selector: [
{ {
default: true, default: true,
html: '<span style="color:red">Subtitle 01</span>', html: '<span style="color:red">Subtitle 01</span>',
url: '/assets/sample/subtitle.srt?id=1', url: '/assets/sample/subtitle.srt?id=1',
onSelect: onSubtitleSelect,
}, },
{ {
html: '<span style="color:yellow">Subtitle 02</span>', html: '<span style="color:yellow">Subtitle 02</span>',
url: '/assets/sample/subtitle.srt?id=2', 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 * Whether the default is selected
*/ */
current?: boolean; default?: boolean;
/** /**
* Custom selector list, use in controls * Custom selector list
*/ */
selector?: SettingOption[]; selector?: SettingOption[];
/** /**
* When selector item click, use in controls * When selector item click
*/ */
onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void; onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void;
}; };