Instance Properties
Here, instance properties
refer to the primary properties
mounted on the instance
, which are quite commonly used.
play
- Type:
Function
Play video
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
muted: true,
});
art.on('ready', () => {
art.play();
});
pause
- Type:
Function
Pause video
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
muted: true,
});
art.on('ready', () => {
art.play();
setTimeout(() => {
art.pause();
}, 3000);
});
toggle
- Type:
Function
Toggle the play and pause state of the video
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
muted: true,
});
art.on('ready', () => {
art.toggle();
setTimeout(() => {
art.toggle();
}, 3000);
});
destroy
- Type:
Function
- Parameter:
Boolean
Destroy the player. Accepts a parameter indicating whether to remove the player's html
after destruction, which defaults to true
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.destroy();
});
seek
- Type:
Setter
- Parameter:
Number
Jump to a specific time in the video, in seconds.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.seek = 5;
});
forward
- Type:
Setter
- Parameter:
Number
Fast forward the video time, in seconds.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.forward = 5;
});
backward
- Type:
Setter
- Parameter:
Number
Video rewind time in seconds
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.seek = 5;
setTimeout(() => {
art.backward = 2;
}, 3000);
});
volume
- Type:
Setter/Getter
- Parameter:
Number
Sets and gets the video volume, which ranges from [0, 1]
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.volume);
art.volume = 0.5;
console.info(art.volume);
});
url
- Type:
Setter/Getter
- Parameter:
String
Set and retrieve the video address
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.url = '/assets/sample/video.mp4?t=0';
});
switch
- Type:
Setter
- Parameter:
String
Set the video address, which is similar to art.url
, but performs some optimization operations
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.seek = 10;
setTimeout(() => {
art.switch = '/assets/sample/video.mp4?t=0';
}, 3000);
});
switchUrl
- Type:
Function
- Parameter:
String
Set the video address, similar to setting art.url
, but some optimization operations will be executed.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.seek = 10;
setTimeout(() => {
art.switchUrl('/assets/sample/video.mp4?t=0');
}, 3000);
});
Warning
art.switch
and art.switchUrl
have the same functionality. However, the art.switchUrl
method will return a Promise
. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.
switchQuality
- Type:
Function
- Parameter:
String
Set video quality address, similar to art.switchUrl
, but it will carry over the previous playback progress.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.seek = 10;
setTimeout(() => {
art.switchQuality('/assets/sample/video.mp4?t=0');
}, 3000);
});
muted
- Type:
Setter/Getter
- Parameter:
Boolean
Set and get whether the video is muted.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.muted);
art.muted = true;
console.info(art.muted);
});
currentTime
- Type:
Setter/Getter
- Parameter:
Number
Set and get the current time of the video. Setting the time is similar to seek
, but it does not trigger additional events.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.currentTime);
art.currentTime = 5;
console.info(art.currentTime);
});
duration
- Type:
Getter
Get the video duration
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.duration);
});
Note
Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be 0
screenshot
- Type:
Function
Download a screenshot of the current video frame, optional parameter is the screenshot name
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.screenshot('your-name');
});
getDataURL
- Type:
Function
Gets the base64
address of the screenshot of the current video frame, which returns a Promise
.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', async () => {
const url = await art.getDataURL();
console.info(url)
});
getBlobUrl
- Type:
Function
Gets the blob
address of the screenshot of the current video frame, which returns a Promise
.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', async () => {
const url = await art.getBlobUrl();
console.info(url);
});
fullscreen
- Type:
Setter/Getter
- Parameter:
Boolean
Set and get the player window fullscreen
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
controls: [
{
position: 'right',
html: 'Fullscreen Switch',
click: function () {
art.fullscreen = !art.fullscreen;
},
},
],
});
Note
Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).
fullscreenWeb
- Type:
Setter/Getter
- Parameter:
Boolean
Set and get the player web page full screen
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fullscreenWeb: true,
});
art.on('ready', () => {
art.fullscreenWeb = true;
setTimeout(() => {
art.fullscreenWeb = false;
}, 3000);
});
pip
- Type:
Setter/Getter
- Parameter:
Boolean
Set and get the player picture-in-picture mode
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
controls: [
{
position: 'right',
html: 'PIP',
click: function () {
art.pip = !art.pip;
},
},
],
});
Warning
Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.
poster
- Type:
Setter/Getter
- Parameter:
String
Set and get the video poster, the poster effect is visible only before the video starts playing.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
poster: '/assets/sample/poster.jpg',
});
art.on('ready', () => {
console.info(art.poster);
art.poster = '/assets/sample/poster.jpg?t=0';
console.info(art.poster);
});
mini
- Type:
Setter/Getter
- Parameter:
Boolean
Set and get the player's mini mode
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.mini = true;
});
playing
- Type:
Getter
- Parameter:
Boolean
Get whether the video is currently playing
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
muted: true,
});
art.on('ready', () => {
console.info(art.playing);
});
autoSize
- Type:
Function
Sets whether the video should auto adjust its size
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.autoSize();
});
rect
- Type:
Getter
Gets the size and position information of the player
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(JSON.stringify(art.rect));
});
Warning
The size and coordinates are obtained via getBoundingClientRect
flip
- Type:
Setter/Getter
- Parameter:
String
Set and get the player flip, supports normal
, horizontal
, vertical
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.flip);
art.flip = 'horizontal';
console.info(art.flip);
});
playbackRate
- Type:
Setter/Getter
- Parameter:
Number
Set and get the playback speed of the player
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.playbackRate);
art.playbackRate = 2;
console.info(art.playbackRate);
});
aspectRatio
- Type:
Setter/Getter
- Parameter:
String
Set and get the aspect ratio of the player
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.aspectRatio);
art.aspectRatio = '16:9';
console.info(art.aspectRatio);
});
autoHeight
- Type:
Function
When the container has only width, this attribute can automatically calculate and set the height of the video
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.autoHeight();
});
art.on('resize', () => {
art.autoHeight();
});
Warning
When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.
attr
- Type:
Function
- Parameter:
String
Dynamically get and set the attributes of the video element
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.attr('playsInline'));
art.attr('playsInline', true);
console.info(art.attr('playsInline'));
});
type
- Type:
Setter/Getter
- Parameter:
String
Dynamically get and set the video type
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.type);
art.type = 'm3u8';
console.info(art.type);
});
theme
- Type:
Setter/Getter
- Parameter:
String
Dynamically get and set the player's theme color
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.theme);
art.theme = '#000';
console.info(art.theme);
});
airplay
- Type:
Function
Activate airplay
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
controls: [
{
position: 'right',
html: 'AirPlay',
click: function () {
art.airplay();
},
},
],
});
loaded
- Type:
Getter
The proportion of the video that is cached, ranging from [0, 1]
, commonly used with the video:timeupdate
event.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('video:timeupdate', () => {
console.info(art.loaded);
});
played
- Type:
Getter
The proportion of the video that has been played, ranging from [0, 1]
, commonly used with the video:timeupdate
event.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('video:timeupdate', () => {
console.info(art.played);
});
proxy
- Type:
Function
A proxy function for DOM
events, which essentially proxies addEventListener
and removeEventListener
. When using proxy
to handle events, the event will automatically be destroyed when the player is destroyed.
var container = document.querySelector('.artplayer-app');
var art = new Artplayer({
container: container,
url: '/assets/sample/video.mp4',
});
art.proxy(container, 'click', event => {
console.info(event);
});
Tip
If you need some DOM
events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.
query
- Type:
Function
DOM query function, similar to document.querySelector
, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.query('.art-video'));
video
- Type:
Element
A shortcut to return the video
element of the player.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
console.info(art.video);
cssVar
- Type:
Function
Dynamically getting or setting css
variables
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.log(art.cssVar('--art-theme'));
art.cssVar('--art-theme', 'green');
console.log(art.cssVar('--art-theme'));
});
quality
- Type:
Setter
- Parameter:
Array
Dynamically setting the list of qualities
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
quality: [
{
default: true,
html: 'SD 480P',
url: '/assets/sample/video.mp4',
},
{
html: 'HD 720P',
url: '/assets/sample/video.mp4',
},
],
});
art.on('ready', () => {
setTimeout(() => {
art.quality = [
{
default: true,
html: '1080P',
url: '/assets/sample/video.mp4',
},
{
html: '4K',
url: '/assets/sample/video.mp4',
},
];
}, 3000);
})
thumbnails
- Type:
Setter/Getter
- Parameter:
Object
Dynamically set thumbnails
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.thumbnails = {
url: '/assets/sample/thumbnails.png',
number: 60,
column: 10,
};
});
subtitleOffset
- Type:
Setter/Getter
- Parameter:
Number
Dynamically set subtitle offset
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
},
});
art.on('ready', () => {
art.subtitleOffset = 1;
});