常用属性

play

类型: Function

播放视频

▶ Run Code

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

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

pause

类型: Function

暂停视频

▶ Run Code

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

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

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

toggle

类型: Function

切换视频的播放和暂停

▶ Run Code

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

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

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

seek

类型: Setter
参数: Number

视频时间跳转，单位秒

▶ Run Code

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

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

forward

类型: Setter
参数: Number

视频时间快进，单位秒

▶ Run Code

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

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

backward

类型: Setter
参数: Number

视频时间快退，单位秒

▶ Run Code

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

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

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

volume

类型: Setter/Getter
参数: Number

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

▶ Run Code

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

类型: Setter/Getter
参数: String

设置和获取视频地址

▶ Run Code

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

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

switchUrl

类型: Function
参数: String

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

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

▶ Run Code

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

类型: Function
参数: String

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

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

▶ Run Code

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

类型: Setter/Getter
参数: Boolean

设置和获取视频是否静音

▶ Run Code

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

类型: Setter/Getter
参数: Number

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

▶ Run Code

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

类型: Getter

获取视频时长

▶ Run Code

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

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

提示

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

screenshot

类型: Function

下载当前视频帧的截图

▶ Run Code

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

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

getDataURL

类型: Function

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

▶ Run Code

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

art.on('ready', () => {
    art.seek = 10;
    art.getDataURL().then(url => console.info(url));
})

getBlobUrl

类型: Function

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

▶ Run Code

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

art.on('ready', () => {
    art.seek = 10;
    art.getBlobUrl().then(url => console.info(url));
})

fullscreen

类型: Setter/Getter
参数: Boolean

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

▶ Run Code

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

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

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

提示

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

fullscreenWeb

类型: Setter/Getter
参数: Boolean

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

▶ Run Code

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

类型: Setter/Getter
参数: Boolean

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

▶ Run Code

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

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

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

提示

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

poster

类型: Setter/Getter
参数: String

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

▶ Run Code

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

类型: Setter/Getter
参数: Boolean

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

▶ Run Code

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

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

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

playing

类型: Getter
参数: Boolean

获取视频是否正在播放中

▶ Run Code

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

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

autoSize

类型: Setter/Getter
参数: Boolean

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

▶ Run Code

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

类型: Getter

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

▶ Run Code

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

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

提示

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

flip

类型: Setter/Getter
参数: String

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

▶ Run Code

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

rotate

类型: Setter/Getter
参数: Number

设置和获取播放器旋转，支持 -270、-180、-90、0、90、180、270

▶ Run Code

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

art.on('ready', () => {
    console.info(art.rotate)
    art.rotate = 90
    console.info(art.rotate)
})

playbackRate

类型: Setter/Getter
参数: Number

设置和获取播放器播放速度，支持0.5、0.75、1.0、1.25、1.5、1.75、2.0

▶ Run Code

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

类型: Setter/Getter
参数: String

设置和获取播放器长宽比，支持default、4:3、16:9

▶ Run Code

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

类型: Setter/Getter
参数: Array

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

▶ Run Code

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 为 [] 即可

destroy

类型: Function
参数: Boolean

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

▶ Run Code

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

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

play​

pause​

toggle​

seek​

forward​

backward​

volume​

url​

switchUrl​

switchQuality​

muted​

currentTime​

duration​

提示

screenshot​

getDataURL​

getBlobUrl​

fullscreen​

提示

fullscreenWeb​

pip​

提示

poster​

mini​

playing​

autoSize​

rect​

提示

flip​

rotate​

playbackRate​

aspectRatio​

loop​

提示

destroy​

play

pause

toggle

seek

forward

backward

volume

url

switchUrl

switchQuality

muted

currentTime

duration

screenshot

getDataURL

getBlobUrl

fullscreen

fullscreenWeb

pip

poster

mini

playing

autoSize

rect

flip

rotate

playbackRate

aspectRatio

loop

destroy