常用属性
play
- 类型:
Function
播放视频
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
muted: true,
});
art.on('ready', () => {
art.play();
});
pause
- 类型:
Function
暂停视频
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
切换视频的播放和暂停
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
视频时间跳转,单位秒
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.seek = 5;
});
forward
- 类型:
Setter
- 参数:
Number
视频时间快进,单位秒
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.forward = 5;
});
backward
- 类型:
Setter
- 参数:
Number
视频时间快退,单位秒
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]
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
设置和获取视频地址
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
类似,但会执行一些优化操作
函数支持两个参数,第一个为新的视频地址,第二个为新的视频名字
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
类似,但会带上之前的播放进度
函数支持两个参数,第一个为新的视频地址,第二个为新的视频名字
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
设置和获取视频是否静音
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
类似,但它不会触发额外的事件
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
获取视频时长
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.duration);
});
提示
有的视频是没有时长的,例如直播中的视频或者没被解码完成的视频,这个时候获取的时长会是 0
screenshot
- 类型:
Function
下载当前视频帧的截图
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
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
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
设置和获取播放器窗口全屏
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
设置和获取播放器网页全屏
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
设置和获取播放器画中画模式
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
设置和获取视频海报,只有在视频播放前才能看到海报效果
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
设置和获取播放器迷你模式
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.mini = true;
});
playing
- 类型:
Getter
- 参数:
Boolean
获取视频是否正在播放中
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
之后它会只执行一次
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
获取播放器的尺寸和坐标信息
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
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
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
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
设置和获取区间循序播放,单位秒
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
当容器只有宽度,但你希望容器高度能自适应播放器的长宽比
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 元素的属性
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
动态获取和设置播放器标题
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
动态获取和设置播放器主题颜色
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
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.destroy();
});