mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-20 20:21:20 -08:00
update docs
This commit is contained in:
Harvey committed
1 parent
b6055b202a
commit
505c193331
41 files changed
+393
-122
No files matched your search
@@ -64,6 +64,10 @@ Manage the whitelist
|
||||
|
||||
Manage player `HTML`
|
||||
|
||||
### query
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `query` You can find DOM elements in the current player instance, equivalent to `document.querySelector('.artplayer-app').querySelector`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -167,6 +171,10 @@ Manage player `icons`
|
||||
|
||||
Manage player `i18n`
|
||||
|
||||
### get
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Method `get` can get the value of the language value
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -182,6 +190,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### update
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `update` can add more languages
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -227,6 +239,36 @@ Manage the object of the core function
|
||||
|
||||
Management subtitle object
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Property show can control subtitle to display
|
||||
|
||||
<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.seek = 20;
|
||||
art.subtitle.show = false;
|
||||
setTimeout(() => {
|
||||
art.subtitle.show = true;
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### style
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `style` can dynamically modify the subtitle style
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -257,7 +299,11 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
Methods `switch` can dynamically modify the subtitle url
|
||||
### url
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Propertie `url` can `set` and `get` the subtitle url
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -276,10 +322,48 @@ var art = new Artplayer({
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.subtitle.url);
|
||||
setTimeout(() => {
|
||||
art.subtitle.url = '/assets/sample/subtitle.srt?t=1';
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### switch
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Methods `switch` like the propertie `url` setter, but can modify the subtitle option
|
||||
|
||||
<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',
|
||||
encoding: 'utf-8',
|
||||
bilingual: true,
|
||||
style: {
|
||||
color: 'red',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt');
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt?t=1', {
|
||||
name: 'The new subtitle',
|
||||
bilingual: false,
|
||||
style: {
|
||||
color: 'green',
|
||||
'font-size': '24px',
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
@@ -296,6 +380,10 @@ Manage video info
|
||||
|
||||
Manage the object of the layers
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Property show can control all layers to display
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -334,6 +422,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can dynamically add a layer
|
||||
|
||||
| Property | Type | Description |
|
||||
@@ -377,6 +469,10 @@ art.on('ready', () => {
|
||||
|
||||
Manage the object of prompt information
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Attribute `show` output custom prompt information, the default residence time is two seconds, and the new information will immediately cover the old information
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -388,8 +484,8 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.notice.show = '自定义提示信息1';
|
||||
art.notice.show = '自定义提示信息2';
|
||||
art.notice.show = 'Custom prompt information 1';
|
||||
art.notice.show = 'Custom prompt information 2';
|
||||
});
|
||||
```
|
||||
|
||||
@@ -399,7 +495,11 @@ art.on('ready', () => {
|
||||
|
||||
Manage the object of the control bar
|
||||
|
||||
Attribute show can control if the control bar is displayed
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Attribute `show` can control if the control bar is displayed
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -416,6 +516,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can dynamically add a control
|
||||
|
||||
| Property | Type | Description |
|
||||
@@ -467,7 +571,11 @@ art.on('ready', () => {
|
||||
|
||||
Manage the contextmenu
|
||||
|
||||
Attribute show can control if the menu is displayed
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Attribute `show` can control if the menu is displayed
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -485,6 +593,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can dynamically add a menu items
|
||||
|
||||
| Property | Type | Description |
|
||||
@@ -526,6 +638,10 @@ art.on('ready', () => {
|
||||
|
||||
Manage `loading` icon
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Property `show` can control whether the icon in the load is displayed
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -550,6 +666,10 @@ art.on('ready', () => {
|
||||
|
||||
Manage the object of the mask layer
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Attributes `show` can control whether the mask layer is display
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -574,6 +694,10 @@ art.on('ready', () => {
|
||||
|
||||
Manage hotkey
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Methods `add` can dynamically add a hotkey, the first parameter is `key code` number, the second parameter is a callback function
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -607,6 +731,10 @@ This hotkey will take effect only after the player gets the focus (if you click
|
||||
|
||||
Manage the object of the setting panel
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Property `show` can control the setting panel to display
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -628,6 +756,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can dynamically add a setting items
|
||||
|
||||
| Property | Type | Description |
|
||||
@@ -670,6 +802,10 @@ art.on('ready', () => {
|
||||
|
||||
Manage plugin
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can be dynamically add a plugin
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -64,6 +64,10 @@ slug: /zh-cn/advance
|
||||
|
||||
管理播放器 `Html` 的对象
|
||||
|
||||
### query
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `query` 可以查找当前播放器实例内的 dom 元素，等同于 `document.querySelector('.artplayer-app').querySelector`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -167,6 +171,10 @@ art.storage.clean();
|
||||
|
||||
管理多语言的对象
|
||||
|
||||
### get
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
方法 `get` 可以获取到对应的语言的值
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -182,6 +190,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### update
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `update` 可以动态添加更多语言
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -227,6 +239,36 @@ art.i18n.update({
|
||||
|
||||
管理字幕的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 可以控制字幕显示
|
||||
|
||||
<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.seek = 20;
|
||||
art.subtitle.show = false;
|
||||
setTimeout(() => {
|
||||
art.subtitle.show = true;
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### style
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `style` 可以动态修改字幕样式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -257,7 +299,11 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
方法 `switch` 可以动态修改字幕地址
|
||||
### url
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 url 可以设置和获取字幕网址
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -276,10 +322,48 @@ var art = new Artplayer({
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.subtitle.url);
|
||||
setTimeout(() => {
|
||||
art.subtitle.url = '/assets/sample/subtitle.srt?t=1';
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### switch
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `switch` 就像属性设置 `url`，但可以修改字幕选项
|
||||
|
||||
<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',
|
||||
encoding: 'utf-8',
|
||||
bilingual: true,
|
||||
style: {
|
||||
color: 'red',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt');
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt?t=1', {
|
||||
name: 'The new subtitle',
|
||||
bilingual: false,
|
||||
style: {
|
||||
color: 'green',
|
||||
'font-size': '24px',
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
@@ -296,6 +380,10 @@ art.on('ready', () => {
|
||||
|
||||
管理业务层的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 可以控制全部图层是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -334,6 +422,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `add` 可以动态添加业务层
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
@@ -377,6 +469,10 @@ art.on('ready', () => {
|
||||
|
||||
管理提示信息的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 输出自定义提示信息，默认停留时间为两秒，且新的信息会马上覆盖旧的信息
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -399,6 +495,10 @@ art.on('ready', () => {
|
||||
|
||||
管理控制栏的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 可以控制控制栏是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -416,6 +516,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `add` 可以动态添加控制器
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
@@ -459,6 +563,10 @@ art.on('ready', () => {
|
||||
|
||||
管理右键菜单的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 可以控制菜单是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -477,6 +585,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `add` 可以动态添加菜单项
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
@@ -518,6 +630,10 @@ art.on('ready', () => {
|
||||
|
||||
管理加载中的图标
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 可以控制是否显示加载中的图标
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -542,6 +658,10 @@ art.on('ready', () => {
|
||||
|
||||
管理遮罩层的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 可以控制遮罩层是否加载层
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -566,6 +686,10 @@ art.on('ready', () => {
|
||||
|
||||
管理快捷键的对象
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `add` 可以动态添加快捷键，第一个参数是 `key code` 数字，第二个参数是回调函数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -599,6 +723,10 @@ art.on('ready', () => {
|
||||
|
||||
管理设置面板的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `show` 可以控制设置面板是否显示
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
@@ -620,6 +748,10 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `add` 可以动态添加设置项
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
@@ -662,6 +794,10 @@ art.on('ready', () => {
|
||||
|
||||
管理插件的对象
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `add` 可以动态添加插件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
Reference in new issue
Block a user