Skip to main content

How to add setting panel

Add selector list

Settings panels are similar to a collection of list selections, and support multi-layer nested

PropertyTypeDescription
htmlStringElementDOM elements of selector
iconStringElementIcon of selector
selectorArraySelector list
onSelectFunctionSelector click event
widthNumberPanel width
defaultBooleanDefault selected
tooltipStringTooltip text
▶ Run Code
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,
tooltip: 'Subtitle 01',
selector: [
{
default: true,
html: '<span style="color:red">Subtitle 01</span>',
url: '/assets/sample/subtitle.srt?id=1',
},
{
html: '<span style="color:yellow">Subtitle 02</span>',
url: '/assets/sample/subtitle.srt?id=2',
},
],
onSelect: function (item, $dom, event) {
console.info(item, $dom, event);
art.subtitle.url = item.url;

// Change the tooltip
return item.html;
},
},
{
html: 'Select Quality',
width: 150,
tooltip: '1080P',
selector: [
{
default: true,
html: '1080P',
url: '/assets/sample/video.mp4?id=1080',
},
{
html: '720P',
url: '/assets/sample/video.mp4?id=720',
},
{
html: '360P',
url: '/assets/sample/video.mp4?id=360',
},
],
onSelect: function (item, $dom, event) {
console.info(item, $dom, event);
art.switchQuality(item.url, item.html);

// Change the tooltip
return item.html;
},
},
{
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',
},
],
},
],
},
],
});

Add switch button

PropertyTypeDescription
htmlStringElementDOM elements of selector
iconStringElementIcon of selector
switchBooleanButton default state
onSwitchFunctionButton toggle event
tooltipStringTooltip text
▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
settings: [
{
html: 'PIP Mode',
tooltip: 'OFF',
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 tooltip
item.tooltip = nextState ? 'ON' : 'OFF';

// 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',
icon: '',
switch: true,
onSwitch: function (item, $dom, event) {
return !item.switch;
},
},
],
onSelect: function (item) {
return item.html;
},
},
],
});

Add range slider

PropertyTypeDescription
htmlStringElementDOM elements of selector
iconStringElementIcon of selector
rangeArrayRange default state
onRangeFunctionRange change event
tooltipStringTooltip text
const range = [5, 1, 10, 1];
const value = range[0];
const min = range[1];
const max = range[2];
const step = range[3];
▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
settings: [
{
html: 'Range',
tooltip: '5x',
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
range: [5, 1, 10, 1],
onRange: function (item) {
// Change the tooltip
return item.range + 'x';
},
},
{
html: 'Use with selector',
width: 240,
selector: [
{
default: true,
html: 'Setting 01',
},
{
html: 'Setting 02',
},
{
html: 'Setting 03',
tooltip: '5x',
range: [5, 1, 10, 1],
onRange: function (item) {
return item.range + 'x';
},
},
{
html: 'Setting 04',
icon: '',
tooltip: '5x',
range: [5, 1, 10, 1],
onRange: function (item) {
return item.range + 'x';
},
},
],
onSelect: function (item) {
return item.html;
},
},
],
});