Skip to main content

常用属性

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

设置和获取播放器翻转,支持normalhorizontalvertical

▶ 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.50.751.01.251.51.752.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

设置和获取播放器长宽比,支持default4:316: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();
});