Advanced Properties
The advanced properties
here refer to the secondary attributes
mounted on the instance
, which are less commonly used
option
Options for the player
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.
- The
proxy
method is used to proxyDOM
events - The
hover
method is used to proxy customhover
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);
});
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
- The
name
attribute is used to set the cachekey
- The
set
method is used to set the cache - The
get
method is used to get the cache - The
del
method is used to delete the cache - The
clear
method is used to clear the cache
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();
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
- The
get
method is used to retrieve the value ofi18n
- The
update
method is used to update thei18n
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 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
- The
add
method is used for dynamically adding layers - The
remove
method is used for dynamically removing layers - The
update
method is used for dynamically updating layers - The
show
property is used to set whether to display all layers or not - The
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);
});
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 controllers
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);
});
Component Configuration
Please refer to the following address:
contextmenu
Manage the right-click context menu of the player
- The
add
method is used to dynamically add menu items - The
remove
method is used to dynamically remove menu items - The
update
method is used to dynamically update menu items - The
show
attribute is used to set whether to show all menu items - The
toggle
method is used to switch the visibility of all menu items
var 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 optionstextTrack
Get the current subtitle trackactiveCues
Get the currently active subtitle listcues
Get the the subtitle list
var 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 layer- The
toggle
attribute is used to toggle the display of the loading layer
var 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
- The
add
method is used to add a hotkey - The
remove
method is used to remove a hotkey
var 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 layer
var 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 items
var 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);
});