import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"advanced/property.md","lastUpdated":1673441101000}'),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),u=n("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

视频时间快退，单位秒

`,4),h=n("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),_=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 类似，但会执行一些优化操作

函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字

`,5),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 类似，但会带上之前的播放进度

函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字

`,5),k=n("div",{className:"run-code"},"▶ Run Code",-1),f=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),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=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=n("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),I=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),j=n("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=n("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

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

`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),z=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),U=n("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: '全屏开关',
            click: function () {
                art.fullscreen = !art.fullscreen;
            },
        },
    ],
});

提示

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

`fullscreenWeb`

Type: Setter/Getter
Parameter: Boolean

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

`,5),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=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),H=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: Setter/Getter
Parameter: Boolean

设置视频是否自适应尺寸，设置为 true 之后它会只执行一次

`,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', () => {
    console.info(art.autoSize);
    art.autoSize = true;
    console.info(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: Setter/Getter
Parameter: Boolean

当容器只有宽度，该属性可以自动计算出并设置视频的高度，设置为 true 之后它会只执行一次

`,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 = true;
});

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

提示

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

`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 = '新标题';
    console.info(art.title);
});

`type`

Type: Setter/Getter
Parameter: String

动态获取和设置视频类型

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

`theme`

Type: Setter/Getter
Parameter: String

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

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

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

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

`video`

Type: Element

快捷返回播放器的 video 元素

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

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

console.info(art.video);

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