The advanced properties here refer to the secondary attributes mounted on the instance, which are less commonly used
option Options for the player
',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.option);Reminder
If you directly modify this option object, the player will not respond immediately.
template Manages all of the DOM elements of the player
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.template);
console.info(art.template.$video);Warning
To easily distinguish between DOM elements and plain objects, all DOM elements in the player are named starting with a $
Here is the definition of all DOM elements: artplayer/types/template.d.ts
events Manages all DOM events in the player, which is essentially a proxy for addEventListener and removeEventListener. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.
proxy method is used to proxy DOM eventshover method is used to proxy custom hover eventsloadImg method is used to listen for the load event of imagesvar container = document.querySelector('.artplayer-app');
var art = new Artplayer({
container: container,
url: '/assets/sample/video.mp4',
});
art.events.proxy(container, 'click', event => {
console.info('click', event);
});
art.events.hover(container, (event) => {
console.info('mouseenter', event);
}, (event) => {
console.info('mouseleave', event);
});
art.events.loadImg('/assets/sample/poster.jpg').then(img => {
console.info('loadImg', img);
});Warning
If you need some DOM events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks
storage Manages the local storage of the player
name attribute is used to set the cache keyset method is used to set the cacheget method is used to get the cachedel method is used to delete the cacheclear method is used to clear the cachevar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.storage.set('test', { foo: 'bar' });
const test = art.storage.get('test');
console.info(test);
art.storage.del('test');
art.storage.clear();Warning
By default, all player instances share the same localStorage, and the default key is artplayer_settings
If you want different players to use different localStorage, you can modify art.storage.name accordingly
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.storage.name = 'your-storage-key';
art.storage.set('test', { foo: 'bar' });icons Manage all the svg icons of the player
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.icons.loading);This is the definition of all icons:
i18n Manage the player's i18n
get method is used to retrieve the value of i18nupdate method is used to update the i18n objectvar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.i18n.get('Play'));
art.i18n.update({
'zh-cn': {
Play: 'Your Play'
}
});WARNING
Using art.i18n.update can only update i18n after instantiation. If you want to update i18n before instantiation, please use the i18n from the basic options for the update.
notice Manage the player's notices, there's only one show property used to display notices.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.notice.show = 'Video Ready To Play';
})WARNING
To immediately hide the display of notice: art.notice.show = '';
layers Manage the layers of the player
add method is used for dynamically adding layersremove method is used for dynamically removing layersupdate method is used for dynamically updating layersshow property is used to set whether to display all layers or nottoggle method is used to toggle the display of all layersvar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.layers.add({
html: 'Some Text',
});
setTimeout(() => {
art.layers.show = false;
}, 1000);
});Component configuration Please refer to the following address:
controls Manage the player's controllers
add method is used to dynamically add controllersremove method is used to dynamically remove controllersupdate method is used to dynamically update controllersshow property is used to set whether to display all controllerstoggle method is used to toggle the display of all controllersvar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.controls.add({
html: 'Some Text',
position: 'left',
});
setTimeout(() => {
art.controls.show = false;
}, 1000);
});Component Configuration Please refer to the following address:
contextmenu Manage the right-click context menu of the player
add method is used to dynamically add menu itemsremove method is used to dynamically remove menu itemsupdate method is used to dynamically update menu itemsshow attribute is used to set whether to show all menu itemstoggle method is used to switch the visibility of all menu itemsvar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.contextmenu.add({
html: 'Some Text',
});
art.contextmenu.show = true;
setTimeout(() => {
art.contextmenu.show = false;
}, 1000);
});Component Configuration Please refer to the following address:
subtitle Manage the subtitle features of the player
url property sets and returns the current subtitle addressstyle method sets the style of the current subtitleswitch method sets the current subtitle address and optionsvar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.subtitle.url = '/assets/sample/subtitle.srt'
art.subtitle.style({
color: 'red',
});
});loading Manage the loading layer of the player
show property is used to set whether to display the loading layertoggle attribute is used to toggle the display of the loading layervar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.loading.show = true;
setTimeout(() => {
art.loading.show = false;
}, 1000);
});hotkey Manage the hotkey functionality of the player
add method is used to add a hotkeyremove method is used to remove a hotkeyvar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
function hotkeyEvent(event) {
console.info('click', event);
}
art.on('ready', () => {
art.hotkey.add(32, hotkeyEvent);
setTimeout(() => {
art.hotkey.remove(32, hotkeyEvent);
}, 5000);
});Warning
Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).
mask Manage the player's mask layer
show property is used to set whether to display the mask layertoggle property is used to toggle the display of the mask layervar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.mask.show = false;
setTimeout(() => {
art.mask.show = true;
}, 1000);
});setting Manage the player's settings panel
add method is used to dynamically add a setting itemremove method is used to dynamically remove a setting itemupdate method is used to dynamically update a setting itemshow property is used to set whether to display all the setting itemstoggle method is used to toggle whether to display all the setting itemsvar art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
subtitleOffset: true,
});
art.on('ready', () => {
art.setting.show = true;
setTimeout(() => {
art.setting.show = false;
}, 1000);
});Settings Panel Please refer to the following link
plugins Manage the player's plugin features, with only one method add to dynamically add plugins
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
function myPlugin(art) {
console.info(art);
return {
name: 'myPlugin',
something: 'something',
doSomething: function () {
console.info('doSomething');
},
};
}
art.on('ready', () => {
art.plugins.add(myPlugin);
});