mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-20 04:01:20 -08:00
update docs
This commit is contained in:
zhw2590582 committed
1 parent
9cbfa63584
commit
35fcbfe853
11 files changed
+3253
-54
No files matched your search
@@ -0,0 +1,702 @@
|
||||
---
|
||||
title: 常用属性
|
||||
sidebar_position: 3
|
||||
slug: /propertie
|
||||
---
|
||||
|
||||
## play
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
播放视频
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
muted: true,
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.play();
|
||||
})
|
||||
```
|
||||
|
||||
## pause
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
暂停视频
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
切换视频的播放和暂停
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
视频时间跳转，单位秒
|
||||
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 5;
|
||||
})
|
||||
```
|
||||
|
||||
## forward
|
||||
|
||||
- 类型: `Setter`
|
||||
- 参数: `Number`
|
||||
|
||||
视频时间快进，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.forward = 5;
|
||||
})
|
||||
```
|
||||
|
||||
## backward
|
||||
|
||||
- 类型: `Setter`
|
||||
- 参数: `Number`
|
||||
|
||||
视频时间快退，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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]`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
设置和获取视频地址
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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` 类似，但会执行一些优化操作
|
||||
|
||||
函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
设置视频画质地址，和 `switchQuality` 类似，但会带上之前的播放进度
|
||||
|
||||
函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
设置和获取视频是否静音
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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` 类似，但它不会触发额外的事件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
获取视频时长
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.duration);
|
||||
})
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
|
||||
有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 `0`
|
||||
|
||||
:::
|
||||
|
||||
## screenshot
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
下载当前视频帧的截图
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 10;
|
||||
art.screenshot();
|
||||
})
|
||||
```
|
||||
|
||||
## getDataURL
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
获取当前视频帧的截图的`base64`地址，返回的是一个 `Promise`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
设置和获取播放器窗口全屏
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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 提示
|
||||
|
||||
由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
|
||||
|
||||
:::
|
||||
|
||||
## fullscreenWeb
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
|
||||
设置和获取播放器网页全屏
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
设置和获取播放器画中画模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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 提示
|
||||
|
||||
由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
|
||||
|
||||
:::
|
||||
|
||||
## poster
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
|
||||
设置和获取视频海报，只有在视频播放前才能看到海报效果
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
设置和获取播放器迷你模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.mini = true;
|
||||
|
||||
setTimeout(() => {
|
||||
art.mini = false;
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
## playing
|
||||
|
||||
- 类型: `Getter`
|
||||
- 参数: `Boolean`
|
||||
|
||||
获取视频是否正在播放中
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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` 之后它会只执行一次
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
获取播放器的尺寸和坐标信息
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(JSON.stringify(art.rect));
|
||||
})
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
|
||||
尺寸和坐标信息是通过 `getBoundingClientRect` 获取的
|
||||
|
||||
:::
|
||||
|
||||
## flip
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
|
||||
设置和获取播放器翻转，支持`normal`、 `horizontal`、 `vertical`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Number`
|
||||
|
||||
设置和获取播放器旋转，支持 `-270`、`-180`、`-90`、`0`、`90`、`180`、`270`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Number`
|
||||
|
||||
设置和获取播放器播放速度，支持`0.5`、`0.75`、`1.0`、`1.25`、`1.5`、`1.75`、`2.0`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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`
|
||||
|
||||
设置和获取区间循序播放，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
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 提示
|
||||
|
||||
删除区间循环播放，只需要设置 `loop` 为 `[]` 即可
|
||||
|
||||
:::
|
||||
|
||||
## destroy
|
||||
|
||||
- 类型: `Function`
|
||||
- 参数: `Boolean`
|
||||
|
||||
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.destroy();
|
||||
})
|
||||
```
|
||||
Reference in new issue
Block a user