import{_ as a,c as l,o as p,a as s,b as n}from"./app.77a2ba76.js";const T=JSON.parse('{"title":"Component","description":"","frontmatter":{},"headers":[{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]}],"relativePath":"en/start/component.md","lastUpdated":1674028264000}'),o={name:"en/start/component.md"},e=s('

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

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

',6),t=n("div",{className:"run-code"},"▶ Run Code",-1),c=s(`

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

`,2),r=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`

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

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

`,4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`

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

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

`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`

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

`,2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`

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']);

`,1),b=[e,t,c,r,D,F,y,i,A,C,d];function h(u,m,g,_,E,f){return p(),l("div",null,b)}const x=a(o,[["render",h]]);export{T as __pageData,x as default};

Component #

layers #

controls #

contextmenu #

Component

`layers`

`controls`

`contextmenu`