Skip to main content

Common properties

play

  • Type: Function

Play video

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

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

pause

  • Type: Function

Pause video

▶ 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

  • Type: Function

Switch video playback and pause

▶ 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

  • Type: Setter
  • Parameter: Number

Video time jump, unit seconds

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

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

forward

  • Type: Setter
  • Parameter: Number

Video time forward, unit seconds

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

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

backward

  • Type: Setter
  • Parameter: Number

Video time backward, unit seconds

▶ 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

  • Type: Setter/Getter
  • Parameter: Number

Set and get video volume, range: [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

  • Type: Setter/Getter
  • Parameter: String

Set and get video url

▶ 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

  • Type: Function
  • Parameter: String

Set video url, set, like the url, but will perform some optimization operations

The function supports two parameters, the first one for the new video url, the second is new video name

▶ 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', 'New video name');
}, 3000);
});

switchQuality

  • Type: Function
  • Parameter: String

Set the video quality address, like the switchUrl, but will bring the previous play progress

The function supports two parameters, the first one for the new video url, the second is new video name

▶ 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', 'New video name');
}, 3000);
});

muted

  • Type: Setter/Getter
  • Parameter: Boolean

Setting up and getting the video mute

▶ 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

  • Type: Setter/Getter
  • Parameter: Number

Set and get the video current time, set time like the seek, but it does not trigger additional events

▶ 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

  • Type: Getter

Get video duration

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

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

Some videos are there is no duration, such as the live video or video is not decoded, the duration will be 0

screenshot

  • Type: Function

Download the current video frame screenshot

▶ 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

  • Type: Function

Get the base64 url of the current video frame, return to a 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

  • Type: Function

Get the blob url of the current video frame, return to a 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

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get a player window full screen

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

Due to the browser security mechanism, the page must be exchanged before the window full screen, such as the user click on the page)

fullscreenWeb

  • Type: Setter/Getter
  • Parameter: Boolean

Setting up and get a player web page full screen

▶ 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

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get player PIP mode

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

Due to the browser security mechanism, the page must be exchanged first before the PIP (such as user clicking over the page)

poster

  • Type: Setter/Getter
  • Parameter: String

Setting up and get a video poster, only the poster effect can only be seen before the video is played

▶ 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

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get player mini mode

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

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

playing

  • Type: Getter
  • Parameter: Boolean

Get the video is playing

▶ 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

  • Type: Setter/Getter
  • Parameter: Boolean

Set whether the video is adaptive, set to true, it will only execute once

▶ 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

  • Type: Getter

Get the size and coordinate information of the player

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

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

Size and coordinate information is obtained by getBoundingClientRect

flip

  • Type: Setter/Getter
  • Parameter: String

Set and get player flip, support 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

  • Type: Setter/Getter
  • Parameter: Number

Set and get player rotation, support -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

  • Type: Setter/Getter
  • Parameter: Number

Set and get player playback speed, support 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

  • Type: Setter/Getter
  • Parameter: String

Set and get the player long aspect, support 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

  • Type: Setter/Getter
  • Parameter: Array

Setting and getting the interval to play in seconds, unit seconds

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

Delete interval loop play, only need to set up loop is []

autoHeight

  • Type: Setter/Getter
  • Default: Boolean

When the container has only width, you want the container height adapt to the player aspect ratio.

▶ 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

  • Type: Function
  • Parameter: String

Dynamically get and set the properties of the video element

▶ 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

  • Type: Setter/Getter
  • Parameter: String

Dynamic get and set player title

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

art.on('ready', () => {
console.info(art.title);
art.title = 'New Title';
console.info(art.title);
});

theme

  • Type: Setter/Getter
  • Parameter: String

Dynamic get and set player theme color

▶ 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

  • Type: Function
  • Parameter: Boolean

Destroy the player

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

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