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

实例属性

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

`play`

Type: Function

播放视频

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

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

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

`pause`

Type: Function

暂停视频

`,4),t=n("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

切换视频的播放和暂停

`,4),y=n("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

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

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

视频时间跳转，单位秒

`,4),C=n("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

视频时间快进，单位秒

`,4),b=n("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),m=n("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

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

`,4),_=n("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

设置和获取视频地址

`,4),v=n("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';
});

`switchUrl`

Type: Function
Parameter: String

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

`,4),E=n("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);
});

`switchQuality`

Type: Function
Parameter: String

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

`,4),P=n("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

设置和获取视频是否静音

`,4),f=n("div",{className:"run-code"},"▶ Run Code",-1),w=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),q=n("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.currentTime);
    art.currentTime = 5;
    console.info(art.currentTime);
});

`duration`

Type: Getter

获取视频时长

`,4),N=n("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.duration);
});

提示

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

`screenshot`

Type: Function

下载当前视频帧的截图

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

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

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

`getDataURL`

Type: Function

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

`,4),x=n("div",{className:"run-code"},"▶ Run Code",-1),G=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),B=n("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.getBlobUrl();
    console.info(url);
});

`fullscreen`

Type: Setter/Getter
Parameter: Boolean

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

`,4),z=n("div",{className:"run-code"},"▶ Run Code",-1),H=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),L=n("div",{className:"run-code"},"▶ Run Code",-1),O=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),W=n("div",{className:"run-code"},"▶ Run Code",-1),$=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),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=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),J=n("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.mini = true;
});

`playing`

Type: Getter
Parameter: Boolean

获取视频是否正在播放中

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

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

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

`rect`

Type: Getter

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

`,4),ns=n("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(JSON.stringify(art.rect));
});

提示

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

`flip`

Type: Setter/Getter
Parameter: String

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

`,5),ls=n("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(art.flip);
    art.flip = 'horizontal';
    console.info(art.flip);
});

`playbackRate`

Type: Setter/Getter
Parameter: Number

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

`,4),os=n("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.playbackRate);
    art.playbackRate = 2;
    console.info(art.playbackRate);
});

`aspectRatio`

Type: Setter/Getter
Parameter: String

设置和获取播放器长宽比

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

`loop`

Type: Setter/Getter
Parameter: Array

设置和获取区间循序播放，单位秒

`,4),ts=n("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.loop);
    art.loop = [5, 10];
    console.info(art.loop);
});

提示

删除区间循环播放，只需要设置 loop 为 [] 即可

art.loop 与 art.option.loop 是两个不同的东西，请勿弄乱

`autoHeight`

Type: Function

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

`,5),ys=n("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();
});

提示

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

`attr`

Type: Function
Parameter: String

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

`,5),is=n("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'));
});

`title`

Type: Setter/Getter
Parameter: String

动态获取和设置播放器标题

`,4),Cs=n("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.title);
    art.title = 'New Title';
    console.info(art.title);
});

`type`

Type: Setter/Getter
Parameter: String

动态获取和设置视频类型

`,4),bs=n("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.type);
    art.type = 'm3u8';
    console.info(art.type);
});

`theme`

Type: Setter/Getter
Parameter: String

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

`,4),ms=n("div",{className:"run-code"},"▶ Run Code",-1),hs=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),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=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),vs=n("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.loaded);
});

`played`

Type: Getter

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

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

快捷返回播放器的 video 元素

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

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

console.info(art.video);

`cssVar`

Type: Function

动态获取或设置 css 变量

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

动态设置画质列表

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

实例属性 ​

play ​

pause ​

toggle ​

destroy ​

seek ​

forward ​

backward ​

volume ​

url ​

switchUrl ​

switchQuality ​

muted ​

currentTime ​

duration ​

screenshot ​

getDataURL ​

getBlobUrl ​

fullscreen ​

fullscreenWeb ​

pip ​

poster ​

mini ​

playing ​

autoSize ​

rect ​

flip ​

playbackRate ​

aspectRatio ​

loop ​

autoHeight ​

attr ​

title ​

type ​

theme ​

airplay ​

loaded ​

played ​

proxy ​

query ​

video ​

cssVar ​

quality ​