mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-23 05:41:20 -08:00
951 lines
18 KiB
Markdown
951 lines
18 KiB
Markdown
# Instance Properties
|
|
|
|
Here, `instance properties` refer to the `primary properties` mounted on the `instance`, which are quite commonly used.
|
|
|
|
## `play`
|
|
|
|
- Type: `Function`
|
|
|
|
Play video
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
muted: true,
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.play();
|
|
});
|
|
```
|
|
|
|
## `pause`
|
|
|
|
- Type: `Function`
|
|
|
|
Pause video
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{11}
|
|
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`
|
|
|
|
Toggle the play and pause state of the video
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{11}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
muted: true,
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.toggle();
|
|
|
|
setTimeout(() => {
|
|
art.toggle();
|
|
}, 3000);
|
|
});
|
|
```
|
|
|
|
## `destroy`
|
|
|
|
- Type: `Function`
|
|
- Parameter: `Boolean`
|
|
|
|
Destroy the player. Accepts a parameter indicating whether to remove the player's `html` after destruction, which defaults to `true`
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.destroy();
|
|
});
|
|
```
|
|
## `seek`
|
|
|
|
- Type: `Setter`
|
|
- Parameter: `Number`
|
|
|
|
Jump to a specific time in the video, in seconds.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.seek = 5;
|
|
});
|
|
```
|
|
|
|
## `forward`
|
|
|
|
- Type: `Setter`
|
|
- Parameter: `Number`
|
|
|
|
Fast forward the video time, in seconds.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.forward = 5;
|
|
});
|
|
```
|
|
## `backward`
|
|
|
|
- Type: `Setter`
|
|
- Parameter: `Number`
|
|
|
|
Video rewind time in seconds
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{10}
|
|
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`
|
|
|
|
Sets and gets the video volume, which ranges from `[0, 1]`
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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 retrieve the video address
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.url = '/assets/sample/video.mp4?t=0';
|
|
});
|
|
```
|
|
|
|
## `switch`
|
|
|
|
- Type: `Setter`
|
|
- Parameter: `String`
|
|
|
|
Set the video address, which is similar to `art.url`, but performs some optimization operations
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{9}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.seek = 10;
|
|
setTimeout(() => {
|
|
art.switch = '/assets/sample/video.mp4?t=0';
|
|
}, 3000);
|
|
});
|
|
```
|
|
## `switchUrl`
|
|
|
|
- Type: `Function`
|
|
- Parameter: `String`
|
|
|
|
Set the video address, similar to setting `art.url`, but some optimization operations will be executed.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{9}
|
|
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);
|
|
});
|
|
```
|
|
|
|
:::warning Warning
|
|
|
|
`art.switch` and `art.switchUrl` have the same functionality. However, the `art.switchUrl` method will return a `Promise`. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.
|
|
|
|
:::
|
|
## `switchQuality`
|
|
|
|
- Type: `Function`
|
|
- Parameter: `String`
|
|
|
|
Set video quality address, similar to `art.switchUrl`, but it will carry over the previous playback progress.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{9}
|
|
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`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `Boolean`
|
|
|
|
Set and get whether the video is muted.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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 current time of the video. Setting the time is similar to `seek`, but it does not trigger additional events.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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 the video duration
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
console.info(art.duration);
|
|
});
|
|
```
|
|
|
|
:::warning Note
|
|
|
|
Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be `0`
|
|
|
|
:::
|
|
|
|
## `screenshot`
|
|
|
|
- Type: `Function`
|
|
|
|
Download a screenshot of the current video frame, optional parameter is the screenshot name
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.screenshot('your-name');
|
|
});
|
|
```
|
|
|
|
## `getDataURL`
|
|
|
|
- Type: `Function`
|
|
|
|
Gets the `base64` address of the screenshot of the current video frame, which returns a `Promise`.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', async () => {
|
|
const url = await art.getDataURL();
|
|
console.info(url)
|
|
});
|
|
```
|
|
|
|
## `getBlobUrl`
|
|
|
|
- Type: `Function`
|
|
|
|
Gets the `blob` address of the screenshot of the current video frame, which returns a `Promise`.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', async () => {
|
|
const url = await art.getBlobUrl();
|
|
console.info(url);
|
|
});
|
|
```
|
|
## `fullscreen`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `Boolean`
|
|
|
|
Set and get the player window fullscreen
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{9}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
controls: [
|
|
{
|
|
position: 'right',
|
|
html: 'Fullscreen Switch',
|
|
click: function () {
|
|
art.fullscreen = !art.fullscreen;
|
|
},
|
|
},
|
|
],
|
|
});
|
|
```
|
|
|
|
:::warning Note
|
|
|
|
Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).
|
|
|
|
:::
|
|
## `fullscreenWeb`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `Boolean`
|
|
|
|
Set and get the player web page full screen
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8,11}
|
|
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 the player picture-in-picture mode
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{9}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
controls: [
|
|
{
|
|
position: 'right',
|
|
html: 'PIP',
|
|
click: function () {
|
|
art.pip = !art.pip;
|
|
},
|
|
},
|
|
],
|
|
});
|
|
```
|
|
|
|
:::warning Warning
|
|
|
|
Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.
|
|
|
|
:::
|
|
|
|
## `poster`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `String`
|
|
|
|
Set and get the video poster, the poster effect is visible only before the video starts playing.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{9}
|
|
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 the player's mini mode
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.mini = true;
|
|
});
|
|
```
|
|
|
|
## `playing`
|
|
|
|
- Type: `Getter`
|
|
- Parameter: `Boolean`
|
|
|
|
Get whether the video is currently playing
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
muted: true,
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
console.info(art.playing);
|
|
});
|
|
```
|
|
## `autoSize`
|
|
|
|
- Type: `Function`
|
|
|
|
Sets whether the video should auto adjust its size
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.autoSize();
|
|
});
|
|
```
|
|
|
|
## `rect`
|
|
|
|
- Type: `Getter`
|
|
|
|
Gets the size and position information of the player
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
console.info(JSON.stringify(art.rect));
|
|
});
|
|
```
|
|
:::warning Warning
|
|
|
|
The size and coordinates are obtained via `getBoundingClientRect`
|
|
|
|
:::
|
|
|
|
## `flip`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `String`
|
|
|
|
Set and get the player flip, supports `normal`, `horizontal`, `vertical`
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `Number`
|
|
Set and get the playback speed of the player
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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 aspect ratio of the player
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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);
|
|
});
|
|
```
|
|
## `autoHeight`
|
|
|
|
- Type: `Function`
|
|
|
|
When the container has only width, this attribute can automatically calculate and set the height of the video
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7,11}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.autoHeight();
|
|
});
|
|
|
|
art.on('resize', () => {
|
|
art.autoHeight();
|
|
});
|
|
```
|
|
|
|
:::warning Warning
|
|
|
|
When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.
|
|
|
|
:::
|
|
|
|
## `attr`
|
|
|
|
- Type: `Function`
|
|
- Parameter: `String`
|
|
|
|
Dynamically get and set the attributes of the video element
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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'));
|
|
});
|
|
```
|
|
|
|
## `type`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `String`
|
|
|
|
Dynamically get and set the video type
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
console.info(art.type);
|
|
art.type = 'm3u8';
|
|
console.info(art.type);
|
|
});
|
|
```
|
|
## `theme`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `String`
|
|
|
|
Dynamically get and set the player's theme color
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
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);
|
|
});
|
|
```
|
|
|
|
## `airplay`
|
|
|
|
- Type: `Function`
|
|
|
|
Activate airplay
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{9}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
controls: [
|
|
{
|
|
position: 'right',
|
|
html: 'AirPlay',
|
|
click: function () {
|
|
art.airplay();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
```
|
|
## `loaded`
|
|
|
|
- Type: `Getter`
|
|
|
|
The proportion of the video that is cached, ranging from `[0, 1]`, commonly used with the `video:timeupdate` event.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('video:timeupdate', () => {
|
|
console.info(art.loaded);
|
|
});
|
|
```
|
|
|
|
## `played`
|
|
|
|
- Type: `Getter`
|
|
|
|
The proportion of the video that has been played, ranging from `[0, 1]`, commonly used with the `video:timeupdate` event.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{7}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('video:timeupdate', () => {
|
|
console.info(art.played);
|
|
});
|
|
```
|
|
## `proxy`
|
|
|
|
- Type: `Function`
|
|
|
|
A proxy function for `DOM` events, which essentially proxies `addEventListener` and `removeEventListener`. When using `proxy` to handle events, the event will automatically be destroyed when the player is destroyed.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8-10}
|
|
var container = document.querySelector('.artplayer-app');
|
|
|
|
var art = new Artplayer({
|
|
container: container,
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.proxy(container, 'click', event => {
|
|
console.info(event);
|
|
});
|
|
```
|
|
|
|
:::warning Tip
|
|
|
|
If you need some `DOM` events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.
|
|
|
|
:::
|
|
|
|
## `query`
|
|
|
|
- Type: `Function`
|
|
|
|
DOM query function, similar to `document.querySelector`, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{6}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
console.info(art.query('.art-video'));
|
|
```
|
|
|
|
## `video`
|
|
|
|
- Type: `Element`
|
|
|
|
A shortcut to return the `video` element of the player.
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{6}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
console.info(art.video);
|
|
```
|
|
|
|
## `cssVar`
|
|
|
|
- Type: `Function`
|
|
|
|
Dynamically getting or setting `css` variables
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{8}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
console.log(art.cssVar('--art-theme'));
|
|
art.cssVar('--art-theme', 'green');
|
|
console.log(art.cssVar('--art-theme'));
|
|
});
|
|
```
|
|
|
|
## `quality`
|
|
|
|
- Type: `Setter`
|
|
- Parameter: `Array`
|
|
|
|
Dynamically setting the list of qualities
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js{19-29}
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
quality: [
|
|
{
|
|
default: true,
|
|
html: 'SD 480P',
|
|
url: '/assets/sample/video.mp4',
|
|
},
|
|
{
|
|
html: 'HD 720P',
|
|
url: '/assets/sample/video.mp4',
|
|
},
|
|
],
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
setTimeout(() => {
|
|
art.quality = [
|
|
{
|
|
default: true,
|
|
html: '1080P',
|
|
url: '/assets/sample/video.mp4',
|
|
},
|
|
{
|
|
html: '4K',
|
|
url: '/assets/sample/video.mp4',
|
|
},
|
|
];
|
|
}, 3000);
|
|
})
|
|
```
|
|
|
|
## `thumbnails`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `Object`
|
|
|
|
Dynamically set thumbnails
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.thumbnails = {
|
|
url: '/assets/sample/thumbnails.png',
|
|
number: 60,
|
|
column: 10,
|
|
};
|
|
});
|
|
``` |