mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-13 15:56:15 -08:00
update
This commit is contained in:
Harvey committed
1 parent
058d4c4cd7
commit
b9ccea7189
5 files changed
+630
-40
No files matched your search
@@ -0,0 +1,442 @@
|
||||
---
|
||||
title: 高级属性
|
||||
sidebar_position: 4
|
||||
slug: /zh-cn/advance
|
||||
---
|
||||
|
||||
:::tip 提示
|
||||
|
||||
这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读
|
||||
|
||||
:::
|
||||
|
||||
## id
|
||||
|
||||
- 类型: `Number`
|
||||
|
||||
播放器实例的一个自增编号
|
||||
|
||||
## option
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
播放器实例的参数对象
|
||||
|
||||
## isFocus
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否获得了焦点，如最后被用户点击过
|
||||
|
||||
## isDestroy
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否被销毁
|
||||
|
||||
## userAgent
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
等于 `window.navigator.userAgent`
|
||||
|
||||
## isMobile
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
当前环境是否移动设备
|
||||
|
||||
## isWechat
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
当前环境是否微信设备
|
||||
|
||||
## whitelist
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理白名单的对象
|
||||
|
||||
## template
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理播放器 `Html` 的对象
|
||||
|
||||
## storage
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理持久化存储的对象
|
||||
|
||||
## icons
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理图标的对象
|
||||
|
||||
## i18n
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理多语言的对象
|
||||
|
||||
## player
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理核心功能的对象
|
||||
|
||||
## subtitle
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理字幕的对象
|
||||
|
||||
## info
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理统计信息的对象
|
||||
|
||||
## layers
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理业务层的对象
|
||||
|
||||
属性 `show` 可以控制全部图层是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.layers.show = false;
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加业务层，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
var img = '/assets/sample/layer.png';
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.layers.add({
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
## notice
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理提示信息的对象
|
||||
|
||||
属性 `show` 输出自定义提示信息，默认停留时间为两秒，且新的信息会马上覆盖旧的信息
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.notice.show = '自定义提示信息1';
|
||||
art.notice.show = '自定义提示信息2';
|
||||
})
|
||||
```
|
||||
|
||||
## controls
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理业务层的对象
|
||||
|
||||
属性 `show` 可以控制控制栏是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.controls.show = false;
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加控制器，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.controls.add({
|
||||
position: 'right',
|
||||
index: 10,
|
||||
html: '自定义按钮',
|
||||
tooltip: '自定义按钮的提示',
|
||||
click: function () {
|
||||
console.log('你点击了自定义按钮');
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
## contextmenu
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理右键菜单的对象
|
||||
|
||||
属性 `show` 可以控制菜单是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.contextmenu.show = true;
|
||||
setTimeout(() => {
|
||||
art.contextmenu.show = false;
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加菜单项，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.contextmenu.show = true;
|
||||
setTimeout(() => {
|
||||
art.contextmenu.add({
|
||||
html: '自定义菜单',
|
||||
click: function () {
|
||||
console.info('你点击了自定义菜单');
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
## loading
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理提示信息的对象
|
||||
|
||||
属性 `show` 可以控制菜单是否加载层
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.loading.show = true;
|
||||
setTimeout(() => {
|
||||
art.loading.show = false;
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
## mask
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理遮罩层的对象
|
||||
|
||||
属性 `show` 可以控制遮罩层是否加载层
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.mask.show = true;
|
||||
setTimeout(() => {
|
||||
art.mask.show = false;
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
## hotkey
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理快捷键的对象
|
||||
|
||||
方法 `add` 可以动态添加快捷键，第一个参数是 `key code` 数字，第二个参数是回调函数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.hotkey.add(65, () => {
|
||||
console.info('你点击了 A 键')
|
||||
})
|
||||
|
||||
art.hotkey.add(66, () => {
|
||||
console.info('你点击了 B 键')
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
|
||||
只在播放器获得焦点后（如点击了播放器后），该快捷键才会生效
|
||||
|
||||
:::
|
||||
|
||||
## setting
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理设置面板的对象
|
||||
|
||||
属性 `show` 可以控制设置面板是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
autoSize: true,
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
art.setting.show = true;
|
||||
setTimeout(() => {
|
||||
art.setting.show = false;
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加设置项，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
autoSize: true,
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
art.setting.show = true;
|
||||
art.setting.add({
|
||||
html: '自定义设置',
|
||||
click: function () {
|
||||
console.info('你点击了自定义设置');
|
||||
art.setting.show = false;
|
||||
},
|
||||
});
|
||||
})
|
||||
```
|
||||
|
||||
## plugins
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理插件的对象
|
||||
|
||||
方法 `add` 可以动态添加插件，更多信息请访问 [自定义插件的使用](/document/zh-cn/Questions/plugin)
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.plugins.add(function myPlugin(art) {
|
||||
console.info('myPlugin running...');
|
||||
return {
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('Do something here...');
|
||||
},
|
||||
};
|
||||
});
|
||||
})
|
||||
```
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 静态属性
|
||||
sidebar_position: 5
|
||||
sidebar_position: 6
|
||||
slug: /zh-cn/class
|
||||
---
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 实例事件
|
||||
sidebar_position: 4
|
||||
sidebar_position: 5
|
||||
slug: /zh-cn/events
|
||||
---
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 第三方库
|
||||
sidebar_position: 6
|
||||
sidebar_position: 7
|
||||
slug: /zh-cn/libraries
|
||||
---
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 实例属性
|
||||
title: 常用属性
|
||||
sidebar_position: 3
|
||||
slug: /zh-cn/propertie
|
||||
---
|
||||
@@ -181,6 +181,56 @@ art.on('ready', () => {
|
||||
})
|
||||
```
|
||||
|
||||
## 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`
|
||||
@@ -514,41 +564,139 @@ art.on('ready', () => {
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
[
|
||||
"option",
|
||||
"isFocus",
|
||||
"isDestroy",
|
||||
"userAgent",
|
||||
"isMobile",
|
||||
"isWechat",
|
||||
"whitelist",
|
||||
"template",
|
||||
"events",
|
||||
"storage",
|
||||
"icons",
|
||||
"i18n",
|
||||
"notice",
|
||||
## flip
|
||||
|
||||
"flip",
|
||||
"loop",
|
||||
"rotate",
|
||||
"switchQuality",
|
||||
"switchUrl",
|
||||
"playbackRate",
|
||||
"aspectRatio",
|
||||
|
||||
"player",
|
||||
"layers",
|
||||
"controls",
|
||||
"contextmenu",
|
||||
"subtitle",
|
||||
"info",
|
||||
"loading",
|
||||
"hotkey",
|
||||
"mask",
|
||||
"setting",
|
||||
"plugins",
|
||||
"id"
|
||||
]
|
||||
- 类型: `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