常用属性

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

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

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

▶ 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.once('video:canplay', () => {
        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;
});

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

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

autoHeight

类型: Setter/Getter
参数: Boolean

当容器只有宽度，但你希望容器高度能自适应播放器的长宽比

▶ Run Code

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

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

attr

类型: Function
参数: String

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

▶ Run Code

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

类型: Setter/Getter
参数: String

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

▶ Run Code

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

theme

类型: Setter/Getter
参数: String

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

▶ Run Code

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

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​

playbackRate​

aspectRatio​

loop​

提示

autoHeight​

attr​

title​

theme​

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

playbackRate

aspectRatio

loop

autoHeight

attr

title

theme

destroy