mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 23:51:20 -08:00
update docs
This commit is contained in:
Harvey authored and Harvey Zack committed
1 parent
e069101c99
commit
7ff42596ef
56 files changed
+396
-175
No files matched your search
@@ -3,6 +3,8 @@ title: How to add setting panel
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
## Add selector list
|
||||
|
||||
Settings panels are similar to a collection of list selections, and support multi-layer nested
|
||||
|
||||
| Property | Type | Description |
|
||||
@@ -41,8 +43,8 @@ var art = new Artplayer({
|
||||
url: '/assets/sample/subtitle.srt?id=2',
|
||||
},
|
||||
],
|
||||
onSelect: function(item, $dom) {
|
||||
console.info(item, $dom);
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.subtitle.url = item.url;
|
||||
|
||||
// Change the tooltip
|
||||
@@ -68,8 +70,8 @@ var art = new Artplayer({
|
||||
url: '/assets/sample/video.mp4?id=360',
|
||||
},
|
||||
],
|
||||
onSelect: function(item, $dom) {
|
||||
console.info(item, $dom);
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.switchQuality(item.url, item.html);
|
||||
|
||||
// Change the tooltip
|
||||
@@ -106,3 +108,67 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Add switch button
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------- | ------------------- | ------------------------ |
|
||||
| `html` | `String`、`Element` | DOM elements of selector |
|
||||
| `icon` | `String`、`Element` | Icon of selector |
|
||||
| `switch` | `Boolean` | Button default state |
|
||||
| `onSwitch` | `Function` | Button toggle event |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: 'PIP Mode',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
const nextState = !item.switch;
|
||||
art.pip = nextState;
|
||||
|
||||
// Change the switch state
|
||||
return nextState;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Use with selector',
|
||||
width: 200,
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: 'Setting 01',
|
||||
},
|
||||
{
|
||||
html: 'Setting 02',
|
||||
},
|
||||
{
|
||||
html: 'Setting 03',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Setting 04',
|
||||
switch: true,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -3,6 +3,8 @@ title: 怎么添加设置面板
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
## 添加选择列表
|
||||
|
||||
设置面板类似于列表选择的集合，而且支持多层嵌套
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
@@ -41,8 +43,8 @@ var art = new Artplayer({
|
||||
url: '/assets/sample/subtitle.srt?id=2',
|
||||
},
|
||||
],
|
||||
onSelect: function(item, $dom) {
|
||||
console.info(item, $dom);
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.subtitle.url = item.url;
|
||||
|
||||
// 改变提示文本
|
||||
@@ -68,8 +70,8 @@ var art = new Artplayer({
|
||||
url: '/assets/sample/video.mp4?id=360',
|
||||
},
|
||||
],
|
||||
onSelect: function(item, $dom) {
|
||||
console.info(item, $dom);
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.switchQuality(item.url, item.html);
|
||||
|
||||
// 改变提示文本
|
||||
@@ -106,3 +108,69 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 添加切换按钮
|
||||
|
||||
设置面板类似于列表选择的集合，而且支持多层嵌套
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | --------------- |
|
||||
| `html` | `String`、`Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`、`Element` | 元素的图标 |
|
||||
| `switch` | `Boolean` | 按钮默认状态 |
|
||||
| `onSwitch` | `Function` | 按钮切换事件 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: '画中画模式',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
const nextState = !item.switch;
|
||||
art.pip = nextState;
|
||||
|
||||
// 改变按钮状态
|
||||
return nextState;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '和列表组合',
|
||||
width: 200,
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '设置 01',
|
||||
},
|
||||
{
|
||||
html: '设置 02',
|
||||
},
|
||||
{
|
||||
html: '设置 03',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '设置 04',
|
||||
switch: true,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
Reference in new issue
Block a user