mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 02:51:20 -08:00
988 lines
18 KiB
Markdown
988 lines
18 KiB
Markdown
# Instance Properties
|
|
|
|
Here, `instance properties` refer to the `top-level properties` mounted on the `instance`, which are commonly used.
|
|
|
|
## `play`
|
|
|
|
- Type: `Function`
|
|
|
|
Play the 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 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.play();
|
|
|
|
setTimeout(() => {
|
|
art.pause();
|
|
}, 3000);
|
|
});
|
|
```
|
|
|
|
## `toggle`
|
|
|
|
- Type: `Function`
|
|
|
|
Toggle between playing and pausing 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 also remove the player's `html` after destruction. 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`
|
|
|
|
Seek 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 by a specified number of 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`
|
|
|
|
Rewind the video by a specified number of 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`
|
|
|
|
Set or get the video volume. Range: `[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 or get the video URL.
|
|
|
|
<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 URL. Similar to `art.url` when setting, 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 URL. Similar to `art.url` when setting, 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.switchUrl('/assets/sample/video.mp4?t=0');
|
|
}, 3000);
|
|
});
|
|
```
|
|
|
|
:::warning Note
|
|
|
|
`art.switch` and `art.switchUrl` have the same functionality, but `art.switchUrl` returns a `Promise`. It `resolves` when the new URL is playable and `rejects` when the new URL fails to load.
|
|
|
|
:::
|
|
|
|
## `switchQuality`
|
|
|
|
- Type: `Function`
|
|
- Parameter: `String`
|
|
|
|
Sets the video quality URL. Similar to `art.switchUrl`, but preserves 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`
|
|
|
|
Sets and gets 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`
|
|
|
|
Sets and gets the current playback 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`
|
|
|
|
Gets the duration of the video.
|
|
|
|
<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 may not have a duration, such as live streams or videos that haven't finished decoding. In these cases, the obtained duration will be `0`.
|
|
|
|
:::
|
|
|
|
## `screenshot`
|
|
|
|
- Type: `Function`
|
|
|
|
Downloads a screenshot of the current video frame. An optional parameter specifies the screenshot filename.
|
|
|
|
<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` URL of the screenshot for the current video frame. 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` URL of the screenshot for the current video frame. 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`
|
|
|
|
Sets and gets the fullscreen state of the player window.
|
|
|
|
<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, the page must have prior interaction (e.g., the user has clicked on the page) before triggering window fullscreen.
|
|
|
|
:::
|
|
|
|
## `fullscreenWeb`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `Boolean`
|
|
|
|
Sets and gets the web fullscreen state of the player.
|
|
|
|
<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`
|
|
|
|
Sets and gets the Picture-in-Picture mode of the player.
|
|
|
|
<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 Note
|
|
|
|
Due to browser security mechanisms, the page must have prior user interaction (e.g., a user click) before Picture-in-Picture can be triggered.
|
|
|
|
:::
|
|
|
|
## `poster`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `String`
|
|
|
|
Sets and gets the video poster. The poster is only visible before video playback starts.
|
|
|
|
<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`
|
|
|
|
Sets and gets 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`
|
|
|
|
Gets 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 automatically 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 player's dimensions and coordinate information.
|
|
|
|
<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 Note
|
|
|
|
The dimension and coordinate information is obtained via `getBoundingClientRect`.
|
|
|
|
:::
|
|
|
|
## `flip`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `String`
|
|
|
|
Sets and gets the player flip mode. 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`
|
|
|
|
Sets and gets the player's playback speed.
|
|
|
|
<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`
|
|
|
|
Sets and gets the player's aspect ratio.
|
|
|
|
<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 only has a defined width, this property can automatically calculate and set the video's height.
|
|
|
|
<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 Note
|
|
|
|
This property is useful when your container has a defined width but an unknown height, as it automatically calculates the video's height. However, you need to determine the appropriate timing to set this property.
|
|
|
|
:::
|
|
|
|
## `attr`
|
|
|
|
- Type: `Function`
|
|
- Parameter: `String`
|
|
|
|
Dynamically gets and sets 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 gets and sets 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 gets and sets 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`
|
|
|
|
Initiates 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 has been buffered, ranging from `[0, 1]`. Often 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]`. Often 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, essentially proxying `addEventListener` and `removeEventListener`. When using `proxy` to handle events, the event will be automatically removed 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 Note
|
|
|
|
If you need certain DOM events to exist only for the duration of the player's lifecycle, it is strongly recommended to use this function to avoid memory leaks.
|
|
|
|
:::
|
|
|
|
## `query`
|
|
|
|
- Type: `Function`
|
|
|
|
A DOM query function, similar to `document.querySelector`, but the search is scoped to within the current player, preventing errors from duplicate class names.
|
|
|
|
<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`
|
|
|
|
Quickly returns the player's `video` element.
|
|
|
|
<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 gets or sets 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 sets the list of available quality levels.
|
|
|
|
<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 sets the 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,
|
|
};
|
|
});
|
|
```
|
|
|
|
## `subtitleOffset`
|
|
|
|
- Type: `Setter/Getter`
|
|
- Parameter: `Number`
|
|
|
|
Dynamically set subtitle offset
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
subtitle: {
|
|
url: '/assets/sample/subtitle.srt',
|
|
},
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
art.subtitleOffset = 1;
|
|
}); |