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

Instance Property ​

The Instance Property here refers to the Primary Property attached to the Instance, which is more commonly used

play ​

Play video

',5),r=n("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    muted: true,
});

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

pause ​

Pause video

`,4),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
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 ​

Toggle video playback and pause

`,4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
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 ​

To destroy the player, accept a parameter indicating whether to remove the player's html after destruction. The default value is true

`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

seek ​

Video time jump in seconds

`,4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

forward ​

Video time fast forward in seconds

`,4),u=n("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

backward ​

Video time rewind in seconds

`,4),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
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 ​

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

`,4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
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 ​

Set and get video url

`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

switchUrl ​

Setting the video url is similar to that of url, but some optimization operations will be performed

`,4),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
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);
});

switchQuality ​

Set the video quality address, similar to switchUrl, but with the previous playback progress

`,4),f=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
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 ​

Set and get whether the video is muted

`,4),w=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
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 ​

Set and get the current time of the video. Setting the time is similar to seek, but it will not trigger additional events

`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
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 ​

Get video duration

`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

Tip

Some videos have no duration, such as live videos or videos that have not been decoded. The duration obtained at this time will be 0

screenshot ​

Download a screenshot of the current video frame

`,5),V=n("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

getDataURL ​

Get the base64 address of the screenshot of the current video frame, and return a Promise

`,4),x=n("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
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 ​

Get the blob address of the screenshot of the current video frame, and return a Promise

`,4),B=n("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
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 ​

Set and get full screen of player window

`,4),U=n("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
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;
            },
        },
    ],
});

Tip

Due to the browser security mechanism, the page must have interaction before triggering the full screen of the window (for example, the user has clicked on the page)

fullscreenWeb ​

Set and get full screen of player web page

`,5),H=n("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
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 ​

Set and get the picture-in-picture mode of the player

`,4),O=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    controls: [
        {
            position: 'right',
            html: 'PIP',
            click: function () {
                art.pip = !art.pip;
            },
        },
    ],
});

Tip

Due to the browser security mechanism, before triggering picture-in-picture, the page must have interaction (for example, the user has clicked on the page)

poster ​

Set and obtain video posters. You can only see the poster effect before the video is played

`,5),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
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 ​

Set and get player mini mode

`,4),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

playing ​

Get whether the video is playing

`,4),Y=n("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    muted: true,
});

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

autoSize ​

Set whether the video is adaptive size. After setting it to true, it will only be executed once

`,4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

rect ​

Get the size and coordinate information of the player

`,4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

Tip

Dimension and coordinate information are obtained through getBoundingClientRect

flip ​

Set and get player rollover, support normal, horizontal, vertical

`,5),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
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 ​

Set and get player playback speed

`,4),os=n("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
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 ​

Set and obtain the player aspect ratio

`,4),rs=n("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
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);
});

loop ​

Set and obtain interval sequential playback in seconds

`,4),cs=n("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    console.info(art.loop);
    art.loop = [5, 10];
    console.info(art.loop);
});

Tip

To delete interval looping, just set loop to []

art.loop and art.option.loop aer two different things, please don't mix them up

autoHeight ​

When the container has only width, this attribute can automatically calculate and set the height of the video. After it is set to true, it will only be executed once

`,5),ys=n("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

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

提示

This attribute is useful when your container has only width but does not know the specific height. It can automatically calculate the height of the video, but you need to determine the time to set this attribute

attr ​

Get and set the attributes of the video element dynamically

`,5),is=n("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
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'));
});

title ​

Get and set player titles dynamically

`,4),Cs=n("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    console.info(art.title);
    art.title = 'New Title';
    console.info(art.title);
});

type ​

Get and set video types dynamically

`,4),us=n("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
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 ​

Get and set player theme color dynamically

`,4),ms=n("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`
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 ​

Enable airplay

`,4),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    controls: [
        {
            position: 'right',
            html: 'AirPlay',
            click: function () {
                art.airplay();
            },
        },
    ],
});

loaded ​

The proportion of video cache, with the range of [0, 1], is often used in conjunction with the video:timeupdate event

`,4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

played ​

The proportion of video playback, with the range of [0, 1], is often used in conjunction with the video:timeupdate event

`,4),Es=n("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

proxy ​

The proxy function of DOM event essentially proxies addEventListener and removeEventListener. When proxy is used to process the event, the player will also automatically destroy the event when it is destroyed

`,4),fs=n("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`
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);
});

Tip

If you need some DOM events only exist in the life cycle of the player, we strongly recommend using this function to avoid memory leakage

query ​

The query function of DOM is similar to document.querySelector, but the queried object is limited to the current player, which can avoid errors of the same class name

`,5),ws=n("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
	container: '.artplayer-app',
	url: '/assets/sample/video.mp4',
});

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

video ​

Return the video element of the player

`,4),qs=n("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
	container: '.artplayer-app',
	url: '/assets/sample/video.mp4',
});

console.info(art.video);

quality ​

Dynamically set the quality list

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