GitHub FeedbackDocsAbout

ArtPlayer Docs

Documentation

Instance Properties Permalink to "Instance Properties"

Here, Instance Properties refer to the first-level properties mounted on the instance, which are commonly used.

play Permalink to "`play`"

  • Type: Function

Play the video.

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

art.on('ready', () => {
    art.play();
});

pause Permalink to "`pause`"

  • Type: Function

Pause the video.

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

art.on('ready', () => {
    art.play();

    setTimeout(() => {
        art.pause();
    }, 3000);
});

toggle Permalink to "`toggle`"

  • Type: Function

Toggle video play and pause.

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

art.on('ready', () => {
    art.toggle();

    setTimeout(() => {
        art.toggle();
    }, 3000);
});

destroy Permalink to "`destroy`"

  • Type: Function
  • Parameter: Boolean

Destroy the player. Accepts a parameter indicating whether to also remove the player's html after destruction. Defaults to true.

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

art.on('ready', () => {
    art.destroy();
});

reset Permalink to "`reset`"

  • Type: Function

Reset the player's video element: removes the current src and calls load() once. Commonly used to manually release media resources or reinitialize the video tag in single-page applications.

Note: The global configuration Artplayer.REMOVE_SRC_WHEN_DESTROY will also automatically execute similar logic when destroy() is called.

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

art.on('ready', () => {
    // Only reset the video, do not remove the interface
    art.reset();
});

seek Permalink to "`seek`"

  • Type: Setter
  • Parameter: Number

Seek to a specific time in the video, in seconds.

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

art.on('ready', () => {
    art.seek = 5;
});

forward Permalink to "`forward`"

  • Type: Setter
  • Parameter: Number

Fast-forward the video time, in seconds.

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

art.on('ready', () => {
    art.forward = 5;
});

backward Permalink to "`backward`"

  • Type: Setter
  • Parameter: Number

Rewind the video time, in seconds.

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

art.on('ready', () => {
    art.seek = 5;

    setTimeout(() => {
        art.backward = 2;
    }, 3000);
});

volume Permalink to "`volume`"

  • Type: Setter/Getter
  • Parameter: Number

Set and get the video volume, range: [0, 1].

▶ Run Code
js
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 Permalink to "`url`"

  • Type: Setter/Getter
  • Parameter: String

Set and get the video URL.

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

art.on('ready', () => {
    art.url = '/assets/sample/video.mp4?t=0';
});

switch Permalink to "`switch`"

  • Type: Setter
  • Parameter: String

Set the video URL. Similar to art.url when setting, but performs some optimization operations.

▶ Run Code
js
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 Permalink to "`switchUrl`"

  • Type: Function
  • Parameter: String

Set the video URL. Similar to art.url when setting, but performs some optimization operations.

▶ Run Code
js
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);
});

Note

art.switch and art.switchUrl have the same functionality, but the art.switchUrl method returns a Promise. It resolves when the new URL is playable and rejects when the new URL fails to load.

switchQuality Permalink to "`switchQuality`"

  • Type: Function
  • Parameter: String

Sets the video quality URL. Similar to art.switchUrl, but retains the previous playback progress.

▶ Run Code
js
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 Permalink to "`muted`"

  • Type: Setter/Getter
  • Parameter: Boolean

Sets or gets whether the video is muted.

▶ Run Code
js
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 Permalink to "`currentTime`"

  • Type: Setter/Getter
  • Parameter: Number

Sets or gets the current playback time of the video. Setting the time is similar to seek, but it does not trigger additional events.

▶ Run Code
js
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 Permalink to "`duration`"

  • Type: Getter

Gets the duration of the video.

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

art.on('ready', () => {
    console.info(art.duration);
});

Note

Some videos may not have a duration, such as live streams or videos that have not been fully decoded. In such cases, the obtained duration will be 0.

screenshot Permalink to "`screenshot`"

  • Type: Function

Downloads a screenshot of the current video frame. An optional parameter specifies the screenshot filename.

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

art.on('ready', () => {
    art.screenshot('your-name');
});

getDataURL Permalink to "`getDataURL`"

  • Type: Function

Gets the base64 URL of a screenshot of the current video frame. Returns a Promise.

▶ Run Code
js
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 Permalink to "`getBlobUrl`"

  • Type: Function

Gets the blob URL of a screenshot of the current video frame. Returns a Promise.

▶ Run Code
js
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 Permalink to "`fullscreen`"

  • Type: Setter/Getter
  • Parameter: Boolean

Sets or gets the player's window fullscreen state.

▶ Run Code
js
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, a user interaction (e.g., a click on the page) must occur before triggering window fullscreen.

fullscreenWeb Permalink to "`fullscreenWeb`"

  • Type: Setter/Getter
  • Parameter: Boolean

Sets or gets the player's web page fullscreen state.

▶ Run Code
js
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 Permalink to "`pip`"

  • Type: Setter/Getter
  • Parameter: Boolean

Sets or gets the player's Picture-in-Picture (PIP) mode.

▶ Run Code
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    controls: [
        {
            position: 'right',
            html: 'PIP',
            click: function () {
                art.pip = !art.pip;
            },
        },
    ],
});

Note

Due to browser security mechanisms, a user interaction (e.g., a click on the page) must occur before triggering Picture-in-Picture.

poster Permalink to "`poster`"

  • Type: Setter/Getter
  • Parameter: String

Sets and gets the video poster. The poster effect is only visible before the video starts playing.

▶ Run Code
js
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 Permalink to "`mini`"

  • Type: Setter/Getter
  • Parameter: Boolean

Sets and gets the player's mini mode.

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

art.on('ready', () => {
    art.mini = true;
});

playing Permalink to "`playing`"

  • Type: Getter
  • Parameter: Boolean

Gets whether the video is currently playing.

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

art.on('ready', () => {
    console.info(art.playing);
});

state Permalink to "`state`"

  • Type: Setter/Getter
  • Parameter: String

Gets or sets the player's current state. Supported values: standard (normal), mini (mini window), pip (picture-in-picture), fullscreen (window fullscreen), fullscreenWeb (webpage fullscreen).

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

art.on('ready', () => {
    console.info(art.state); // Default is 'standard'
    art.state = 'mini';
});

autoSize Permalink to "`autoSize`"

  • Type: Function

Sets whether the video adapts its size automatically.

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

art.on('ready', () => {
    art.autoSize();
});

rect Permalink to "`rect`"

  • Type: Getter

Gets the player's dimensions and coordinate information.

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

art.on('ready', () => {
    console.info(JSON.stringify(art.rect));
});

Note

The dimension and coordinate information is obtained via getBoundingClientRect.

bottom / top / left / right / x / y / width / height Permalink to "`bottom` / `top` / `left` / `right` / `x` / `y` / `width` / `height`"

  • Type: Getter

These properties provide quick access to rect:

  • bottom, top, left, right, x, y: Correspond to the fields of the same name in DOMRect.
  • width, height: The player's current visible width and height.
▶ Run Code
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    console.info(art.width, art.height, art.left, art.top);
});

flip Permalink to "`flip`"

  • Type: Setter/Getter
  • Parameter: String

Sets and gets the player's flip state. Supported values: normal, horizontal, vertical.

▶ Run Code
js
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 Permalink to "`playbackRate`"

  • Type: Setter/Getter
  • Parameter: Number

Sets and gets the player's playback speed.

▶ Run Code
js
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 Permalink to "`aspectRatio`"

  • Type: Setter/Getter
  • Parameter: String

Sets and gets the player's aspect ratio.

▶ Run Code
js
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 Permalink to "`autoHeight`"

  • Type: Function

When the container only has a defined width, this property can automatically calculate and set the video's height.

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

art.on('ready', () => {
    art.autoHeight();
});

art.on('resize', () => {
    art.autoHeight();
});

Note

This property is useful when your container has only a width but the exact height is unknown. It can automatically calculate the video height, but you need to determine the timing for setting this property.

attr Permalink to "`attr`"

  • Type: Function
  • Parameter: String

Dynamically get and set attributes of the video element.

▶ Run Code
js
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 Permalink to "`type`"

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the video type.

▶ Run Code
js
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 Permalink to "`theme`"

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the player's theme color.

▶ Run Code
js
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 Permalink to "`airplay`"

  • Type: Function

Initiate AirPlay.

▶ Run Code
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    controls: [
        {
            position: 'right',
            html: 'AirPlay',
            click: function () {
                art.airplay();
            },
        },
    ],
});

loaded Permalink to "`loaded`"

  • Type: Getter

The proportion of video buffered, ranging from [0, 1]. Often used with the video:timeupdate event.

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

art.on('video:timeupdate', () => {
    console.info(art.loaded);
});

loadedTime Permalink to "`loadedTime`"

  • Type: Getter

The buffered media duration in seconds. Typically used alongside loaded to display detailed buffering progress.

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

art.on('video:timeupdate', () => {
    console.info(art.loadedTime);
});

played Permalink to "`played`"

  • Type: Getter

The proportion of video played, ranging from [0, 1]. Often used with the video:timeupdate event.

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

art.on('video:timeupdate', () => {
    console.info(art.played);
});

proxy Permalink to "`proxy`"

  • Type: Function

A proxy function for DOM events, essentially proxying addEventListener and removeEventListener. When using proxy to handle events, the event is automatically cleaned up when the player is destroyed.

▶ Run Code
js
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);
});

Note

If you need certain DOM events to exist only for the player's lifecycle, it is strongly recommended to use this function to avoid memory leaks.

query Permalink to "`query`"

  • Type: Function

A DOM query function, similar to document.querySelector, but the search is scoped to the current player, preventing errors with duplicate class names.

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

console.info(art.query('.art-video'));

video Permalink to "`video`"

  • Type: Element

Quickly returns the player's video element.

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

console.info(art.video);

cssVar Permalink to "`cssVar`"

  • Type: Function

Dynamically get or set CSS variables.

▶ Run Code
js
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 Permalink to "`quality`"

  • Type: Setter
  • Parameter: Array

Dynamically set the quality list.

▶ Run Code
js
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 Permalink to "`thumbnails`"

  • Type: Setter/Getter
  • Parameter: Object

Dynamically set thumbnails.

▶ Run Code
js
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 Permalink to "`subtitleOffset`"

  • Type: Setter/Getter
  • Parameter: Number

Dynamically set subtitle offset.

▶ Run Code
js
var art = new Artplayer({
	container: '.artplayer-app',
	url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

art.on('ready', () => {
    art.subtitleOffset = 1;
});

Cookie choices

ArtPlayer uses necessary cookies for app security and preferences. Optional analytics and advertising cookies only run when you allow them.

Cookie Policy