Skip to main content

Handle a single component

When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component.

Here are three ways to get the DOM element of the component: component method mounted, instance method query, recommended through name direct acquisition.

▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,

art.on('ready', () => {
name: 'layer1',
html: 'your-layer',
mounted: function($layer1) {

name: 'contextmenu1',
html: 'your-contextmenu',
mounted: function($contextmenu1) {

name: 'control1',
html: 'your-control',
position: 'right',
mounted: function($control1) {

// Use the query method to get the DOM element of the component
var $layer1 = art.query('.art-layer-layer1');
var $contextmenu1 = art.query('.art-contextmenu-contextmenu1');
var $control1 = art.query('.art-control-control1');

// Recommended use the name to get the DOM element of the component
var $layer1 = art.layers['layer1'];
var $contextmenu1 = art.contextmenu['contextmenu1'];
var $control1 = art.controls['control1'];

Note that you can't create components with the same name