import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Os=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1700581325000}'),p={name:"advanced/property.md"},e=s('

实例属性

这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用

`play`

Type: Function

播放视频

',5),h=i("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

暂停视频

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

切换视频的播放和暂停

`,4),E=i("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.toggle();

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

`destroy`

Type: Function
Parameter: Boolean

销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true

`,4),c=i("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.destroy();
});

`seek`

Type: Setter
Parameter: Number

视频时间跳转，单位秒

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

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

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

`forward`

Type: Setter
Parameter: Number

视频时间快进，单位秒

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

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

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

`backward`

Type: Setter
Parameter: Number

视频时间快退，单位秒

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

设置和获取视频音量，范围在：[0, 1]

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

设置和获取视频地址

`,4),v=i("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.url = '/assets/sample/video.mp4?t=0';
});

`switch`

Type: Setter
Parameter: String

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),B=i("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.seek = 10;
    setTimeout(() => {
        art.switch = '/assets/sample/video.mp4?t=0';
    }, 3000);
});

`switchUrl`

Type: Function
Parameter: String

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),D=i("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.switchUrl('/assets/sample/video.mp4?t=0');
    }, 3000);
});

提示

art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误

`switchQuality`

Type: Function
Parameter: String

设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度

`,5),P=i("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.switchQuality('/assets/sample/video.mp4?t=0');
    }, 3000);
});

`muted`

Type: Setter/Getter
Parameter: Boolean

设置和获取视频是否静音

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

设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件

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

获取视频时长

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

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

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

提示

有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0

`screenshot`

Type: Function

下载当前视频帧的截图

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

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

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

`getDataURL`

Type: Function

获取当前视频帧的截图的base64地址，返回的是一个 Promise

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

获取当前视频帧的截图的blob地址，返回的是一个 Promise

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

设置和获取播放器窗口全屏

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

提示

由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）

`fullscreenWeb`

Type: Setter/Getter
Parameter: Boolean

设置和获取播放器网页全屏

`,5),W=i("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

设置和获取播放器画中画模式

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

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

提示

由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）

`poster`

Type: Setter/Getter
Parameter: String

设置和获取视频海报，只有在视频播放前才能看到海报效果

`,5),J=i("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

设置和获取播放器迷你模式

`,4),X=i("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

获取视频是否正在播放中

`,4),Z=i("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

设置视频是否自适应尺寸

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

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

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

`rect`

Type: Getter

获取播放器的尺寸和坐标信息

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

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

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

提示

尺寸和坐标信息是通过 getBoundingClientRect 获取的

`flip`

Type: Setter/Getter
Parameter: String

设置和获取播放器翻转，支持normal, horizontal, vertical

`,5),ps=i("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

设置和获取播放器播放速度

`,4),hs=i("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

设置和获取播放器长宽比

`,4),ks=i("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.info(art.aspectRatio);
    art.aspectRatio = '16:9';
    console.info(art.aspectRatio);
});

`autoHeight`

Type: Function

当容器只有宽度，该属性可以自动计算出并设置视频的高度

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

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

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

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

提示

当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机

`attr`

Type: Function
Parameter: String

动态获取和设置 video 元素的属性

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=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

动态获取和设置视频类型

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

动态获取和设置播放器主题颜色

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

开启隔空播放

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

视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

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

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

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

`played`

Type: Getter

视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

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

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

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

`proxy`

Type: Function

DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件

`,4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=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);
});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏

`query`

Type: Function

DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误

`,5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`

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

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

`video`

Type: Element

快捷返回播放器的 video 元素

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

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

console.info(art.video);

`cssVar`

Type: Function

动态获取或设置 css 变量

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

动态设置画质列表

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

实例属性 ​

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 ​