The Advanced Properties here refer to the secondary properties attached to the instance, which are less commonly used.
option The player's options.
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.option);Note
If you directly modify this option object, the player will not respond immediately.
template Manages all 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);Note
To easily distinguish between DOM elements and regular objects, all DOM elements within the player are named with a $ prefix.
This is the definition of all DOM elements: artplayer/types/template.d.ts
events Manages all DOM events for the player. It essentially proxies addEventListener and removeEventListener. When using the following methods to handle events, the events will also be automatically destroyed when the player is destroyed.
proxy method is used to proxy DOM events.hover method is used to proxy custom hover events.var 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);
});Note
If you need DOM events that should only exist during the player's lifecycle, it is strongly recommended to use these functions to avoid memory leaks.
storage Manages the player's local storage.
name property is used to set the cache key.set method is used to set a cache.get method is used to retrieve a cache.del method is used to delete a cache.clear method is used to clear all caches.var 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();Note
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.
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 Manages all svg icons for 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 Manages the player's i18n.
get method is used to retrieve an i18n value.update method is used to update the i18n object.var 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 the i18n after instantiation. If you want to update i18n before instantiation, please use the i18n option in the basic settings.
notice Manages the player's notifications. It only has a show property for displaying notifications.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.notice.show = 'Video Ready To Play';
})WARNING
If you want to hide the notice immediately: art.notice.show = '';
layers Manages the player's layers.
add method is used to dynamically add a layer.remove method is used to dynamically remove a layer.update method is used to dynamically update a layer.show property is used to set whether all layers are displayed.toggle method is used to toggle the display of all layers.var 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);
});For Component Configuration, please refer to:
controls Manages the player's controls.
The add method is used to dynamically add a control.
The remove method is used to dynamically remove a control.
The update method is used to dynamically update controls
The show property is used to set whether to display all controls
The toggle method is used to toggle the display of all controls
var 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);
});For Component Configuration, please refer to:
contextmenu Manages the player's context menu
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 property is used to set whether to display all menu itemstoggle method is used to toggle the display 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);
});For Component Configuration, please refer to:
subtitle Manages the player's subtitle functionality
url property sets and returns the current subtitle URLstyle method sets the style of the current subtitleswitch method sets the current subtitle URL and optionstextTrack gets the current text trackactiveCues gets the list of currently active cuescues gets the overall list of cuesvar 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',
});
});info Manages the player's information panel, commonly used to view the current status of the player and video, such as version number, resolution, duration, etc.
art.info.showinfo (see the event documentation for details)var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.info.show = true;
setTimeout(() => {
art.info.show = false;
}, 3000);
});loading Manages the player's loading layer
show property is used to set whether to display the loading layertoggle property 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 Manages the player's hotkey functionality
add method is used to add hotkeysremove method is used to remove hotkeysvar 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);
});Note
These hotkeys only take effect after the player gains focus (e.g., after clicking on the player)
mask Manages 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 Manages the player's settings panel
add method is used to dynamically add settings itemsremove method is used to dynamically remove settings itemsupdate method is used to dynamically update settings itemsshow property is used to set whether to display all settings itemstoggle method is used to toggle the display of all settings 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);
});For Settings Panel, please refer to
plugins Manages the player's plugin functionality, with only one method add for dynamically adding 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);
});