import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const Ls=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1700976201000}'),o={name:"en/advanced/property.md"},e=s('

Instance Properties

Here, instance properties refer to the primary properties mounted on the instance, which are quite commonly used.

`play`

Type: Function

Play video

',5),r=a("div",{className:"run-code"},"▶ Run Code",-1),t=s(`

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

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

`pause`

Type: Function

Pause video

`,4),c=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`

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

`,4),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s(`

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

`,4),i=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`

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.

`,4),C=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`

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.

`,4),u=a("div",{className:"run-code"},"▶ Run Code",-1),b=s(`

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

`,4),m=a("div",{className:"run-code"},"▶ Run Code",-1),h=s(`

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]

`,4),_=a("div",{className:"run-code"},"▶ Run Code",-1),g=s(`

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

`,4),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`

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

`,4),E=a("div",{className:"run-code"},"▶ Run Code",-1),S=s(`

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.

`,4),P=a("div",{className:"run-code"},"▶ Run Code",-1),w=s(`

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.

`,5),f=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`

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.

`,4),q=a("div",{className:"run-code"},"▶ Run Code",-1),R=s(`

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.

`,4),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s(`

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

`,4),I=a("div",{className:"run-code"},"▶ Run Code",-1),j=s(`

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

`,5),x=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`

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

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

`getDataURL`

Type: Function

Gets the base64 address of the screenshot of the current video frame, which returns a Promise.

`,4),z=a("div",{className:"run-code"},"▶ Run Code",-1),B=s(`

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.

`,4),U=a("div",{className:"run-code"},"▶ Run Code",-1),W=s(`

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

`,4),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`

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

`,5),O=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`

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

`,4),J=a("div",{className:"run-code"},"▶ Run Code",-1),M=s(`

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.

`,5),Q=a("div",{className:"run-code"},"▶ Run Code",-1),K=s(`

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

`,4),X=a("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`

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

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`

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

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`

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

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`

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

`,5),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s(`

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

`,3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`

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

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`

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

`,4),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`

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

`,5),is=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`

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

`,4),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`

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

`,4),us=a("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`

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

`,4),ms=a("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`

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.

`,4),_s=a("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`

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.

`,4),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`

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.

`,4),Es=a("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`

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.

`,5),Ps=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`

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.

`,4),fs=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`

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

`,4),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`

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

`,4),Ns=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`

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);
})

`,1),Is=[e,r,t,c,D,y,F,i,A,C,d,u,b,m,h,_,g,v,T,E,S,P,w,f,k,q,R,N,V,I,j,x,G,z,B,U,W,H,L,O,$,J,M,Q,K,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,ts,cs,Ds,ys,Fs,is,As,Cs,ds,us,bs,ms,hs,_s,gs,vs,Ts,Es,Ss,Ps,ws,fs,ks,qs,Rs,Ns,Vs];function js(xs,Gs,zs,Bs,Us,Ws){return p(),l("div",null,Is)}const Os=n(o,[["render",js]]);export{Ls as __pageData,Os as default};

Instance Properties ​

play ​

pause ​

toggle ​

destroy ​

seek ​

forward ​

backward ​

volume ​

url ​

switch ​

switchUrl ​

switchQuality ​

muted ​

currentTime ​

duration ​

screenshot ​

getDataURL ​

getBlobUrl ​

fullscreen ​

fullscreenWeb ​

pip ​

poster ​

mini ​

playing ​

autoSize ​

rect ​

flip ​

playbackRate ​

aspectRatio ​

autoHeight ​

attr ​

type ​

theme ​

airplay ​

loaded ​

played ​

proxy ​

query ​

video ​

cssVar ​

quality ​

Instance Properties

`play`

`pause`

`toggle`

`destroy`

`seek`

`forward`

`backward`

`volume`

`url`

`switch`

`switchUrl`

`switchQuality`

`muted`

`currentTime`

`duration`

`screenshot`

`getDataURL`

`getBlobUrl`

`fullscreen`

`fullscreenWeb`

`pip`

`poster`

`mini`

`playing`

`autoSize`

`rect`

`flip`

`playbackRate`

`aspectRatio`

`autoHeight`

`attr`

`type`

`theme`

`airplay`

`loaded`

`played`

`proxy`

`query`

`video`

`cssVar`

`quality`