mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -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,656 @@
|
||||
---
|
||||
title: 高级属性
|
||||
sidebar_position: 4
|
||||
slug: /advance
|
||||
---
|
||||
|
||||
:::tip 提示
|
||||
|
||||
这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读
|
||||
|
||||
:::
|
||||
|
||||
## id
|
||||
|
||||
- 类型: `Number`
|
||||
|
||||
播放器实例的一个自增编号
|
||||
|
||||
## option
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
播放器实例经合并后的参数对象
|
||||
|
||||
## isFocus
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否获得了焦点，如最后被用户点击过
|
||||
|
||||
## isDestroy
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否被销毁
|
||||
|
||||
## userAgent
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
等于 `window.navigator.userAgent`
|
||||
|
||||
## isMobile
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
当前环境是否移动设备
|
||||
|
||||
## isWechat
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
当前环境是否微信设备
|
||||
|
||||
## whitelist
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理白名单的对象
|
||||
|
||||
## template
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理播放器 `Html` 的对象
|
||||
|
||||
方法 `query` 可以查找当前播放器实例内的 dom 元素，等同于 `document.querySelector('.artplayer-app').querySelector`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
var $video = art.template.query('.art-video');
|
||||
console.info($video);
|
||||
});
|
||||
```
|
||||
|
||||
## query
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
等于 `art.template.query`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
var $video = art.query('.art-video');
|
||||
console.info($video);
|
||||
});
|
||||
```
|
||||
|
||||
## storage
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理持久化存储的对象
|
||||
|
||||
播放器会自动添加一个名为 `artplayer_settings` 的 JSON 对象到的 `localStorage` 里
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ------- | ---------- | -------- |
|
||||
| `get` | `Function` | 获取值 |
|
||||
| `set` | `Function` | 设置值 |
|
||||
| `del` | `Function` | 删除值 |
|
||||
| `clean` | `Function` | 清空对象 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.storage.set('your-key', 'your-value');
|
||||
art.storage.get('your-key');
|
||||
art.storage.del('your-key');
|
||||
art.storage.clean();
|
||||
```
|
||||
|
||||
## icons
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理图标的对象
|
||||
|
||||
## i18n
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理多语言的对象
|
||||
|
||||
方法 `get` 可以获取到对应的语言的值
|
||||
|
||||
<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.i18n.get('Play'));
|
||||
});
|
||||
```
|
||||
|
||||
方法 `update` 可以动态添加更多语言
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
lang: 'jp',
|
||||
});
|
||||
|
||||
art.i18n.update({
|
||||
'zh-cn': {
|
||||
Language: '简体',
|
||||
},
|
||||
'zh-tw': {
|
||||
Language: '繁體',
|
||||
},
|
||||
en: {
|
||||
Language: 'English',
|
||||
},
|
||||
jp: {
|
||||
Language: '日文',
|
||||
},
|
||||
fr: {
|
||||
Language: 'Français',
|
||||
},
|
||||
ru: {
|
||||
Language: 'Russe',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## player
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理核心功能的对象，所以属性和方法都代理到播放器实例上了
|
||||
|
||||
## subtitle
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理字幕的对象
|
||||
|
||||
方法 `style` 可以动态修改字幕样式
|
||||
|
||||
<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: '#03A9F4',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.style({
|
||||
color: 'red',
|
||||
'font-size': '40px',
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
方法 `switch` 可以动态修改字幕地址
|
||||
|
||||
<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: '#03A9F4',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt');
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## 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` 可以动态添加业务层
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
<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` 可以动态添加控制器
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
| `position` | `String` | 位置在 `left` 或者 `right` |
|
||||
|
||||
<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` 可以动态添加菜单项
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
<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` 可以动态添加设置项
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
<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` 可以动态添加插件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
function myPlugin(art) {
|
||||
console.info('你可以在插件里访问到播放器的实例');
|
||||
return {
|
||||
name: 'myPlugin',
|
||||
something: '自定义导出的属性',
|
||||
doSomething: function () {
|
||||
console.info('自定义导出的方法');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.plugins.add(myPlugin);
|
||||
console.info(art.plugins.myPlugin.something);
|
||||
console.info(art.plugins.myPlugin.doSomething());
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
title: 静态属性
|
||||
sidebar_position: 5
|
||||
slug: /class
|
||||
---
|
||||
|
||||
:::tip 提示
|
||||
|
||||
静态属性存在于构造函数 `Artplayer` 上，和播放器实例没有直接关联
|
||||
|
||||
:::
|
||||
|
||||
## instances
|
||||
|
||||
- 类型: `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(Artplayer.instances.length)
|
||||
})
|
||||
```
|
||||
|
||||
## version
|
||||
|
||||
- 类型: `String`
|
||||
|
||||
当前播放器版本号
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.version)
|
||||
```
|
||||
|
||||
## env
|
||||
|
||||
- 类型: `String`
|
||||
|
||||
当前播放器环境变量
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.env)
|
||||
```
|
||||
|
||||
## utils
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
播放器的常用工具集
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Object.keys(Artplayer.utils))
|
||||
```
|
||||
|
||||
## config
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
存放了播放器的原生属性和方法
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.config)
|
||||
```
|
||||
|
||||
## scheme
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
播放器参数的校验方案
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.scheme)
|
||||
```
|
||||
|
||||
## validator
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
播放器参数的校验器
|
||||
|
||||
## option
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
播放器默认参数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.option)
|
||||
```
|
||||
|
||||
## html
|
||||
|
||||
- 类型: `String`
|
||||
|
||||
播放器默认 `Html` 字符串，通常用于 `SSR` 的提前渲染，更多信息请访问 [配合SSR使用](/document/zh-cn/Questions/ssr)
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.html)
|
||||
```
|
||||
|
||||
## kindOf
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
JS类型识别函数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.kindOf('0'))
|
||||
console.info(Artplayer.kindOf(0))
|
||||
console.info(Artplayer.kindOf({}))
|
||||
console.info(Artplayer.kindOf([]))
|
||||
```
|
||||
@@ -0,0 +1,310 @@
|
||||
---
|
||||
title: 实例事件
|
||||
sidebar_position: 6
|
||||
slug: /events
|
||||
---
|
||||
|
||||
播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 `video` 元素，是直接监听`video`元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 `video:`
|
||||
|
||||
## 原生事件
|
||||
|
||||
更多信息请阅读 [Mozilla Video Events](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events)
|
||||
|
||||
| 事件名字 | 触发时间 |
|
||||
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `video:canplay` | The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. |
|
||||
| `video:canplaythrough` | The browser estimates it can play the media up to its end without stopping for content buffering. |
|
||||
| `video:complete` | The rendering of an OfflineAudioContext is terminated. |
|
||||
| `video:durationchange` | The duration attribute has been updated. |
|
||||
| `video:emptied` | The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. |
|
||||
| `video:ended` | Playback has stopped because the end of the media was reached. |
|
||||
| `video:loadeddata` | The first frame of the media has finished loading. |
|
||||
| `video:loadedmetadata` | The metadata has been loaded. |
|
||||
| `video:pause` | Playback has been paused. |
|
||||
| `video:play` | Playback has begun. |
|
||||
| `video:playing` | Playback is ready to start after having been paused or delayed due to lack of data. |
|
||||
| `video:progress` | Fired periodically as the browser loads a resource. |
|
||||
| `video:ratechange` | The playback rate has changed. |
|
||||
| `video:seeked` | A seek operation completed. |
|
||||
| `video:seeking` | A seek operation began. |
|
||||
| `video:stalled` | The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. |
|
||||
| `video:suspend` | Media data loading has been suspended. |
|
||||
| `video:timeupdate` | The time indicated by the currentTime attribute has been updated. |
|
||||
| `video:volumechange` | The volume has changed. |
|
||||
| `video:waiting` | Playback has stopped because of a temporary lack of data |
|
||||
|
||||
## 自定义事件
|
||||
|
||||
### ready
|
||||
|
||||
当实例初始化完成，并视频可以被播放时触发，只会触发一个，哪怕视频地址变化了
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### play
|
||||
|
||||
在视频被播放后触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('play', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### pause
|
||||
|
||||
在视频被暂停后触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('pause', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### seek
|
||||
|
||||
在视频进行时间跳转时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('seek', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
|
||||
art.on('ready', (...args) => {
|
||||
art.seek = 5;
|
||||
});
|
||||
```
|
||||
|
||||
### volume
|
||||
|
||||
在视频音量变化时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('volume', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
|
||||
art.on('ready', (...args) => {
|
||||
art.volume = 0.5;
|
||||
});
|
||||
```
|
||||
|
||||
### destroy
|
||||
|
||||
在播放器实例被销毁时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('destroy', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
|
||||
art.on('ready', (...args) => {
|
||||
art.destroy();
|
||||
});
|
||||
```
|
||||
|
||||
### focus
|
||||
|
||||
在播放器获得焦点时触发，如点击了播放器
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('focus', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### blur
|
||||
|
||||
在播放器失去焦点时触发，如点击播放器以外的区域
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('blur', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### hover
|
||||
|
||||
在鼠标移动进播放器时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('hover', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### resize
|
||||
|
||||
在播放器尺寸变化时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
});
|
||||
|
||||
art.on('resize', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### mousemove
|
||||
|
||||
在鼠标经过播放器时触发，和`hover`不一样，它会触发多次
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('mousemove', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### url
|
||||
|
||||
在视频地址变化时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('url', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
|
||||
art.on('ready', (...args) => {
|
||||
art.url = '/assets/sample/video.mp4?t=0';
|
||||
});
|
||||
```
|
||||
|
||||
### fullscreen
|
||||
|
||||
在播放器窗口全屏时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
});
|
||||
|
||||
art.on('fullscreen', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### fullscreenWeb
|
||||
|
||||
在播放器网页全屏时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreenWeb: true,
|
||||
});
|
||||
|
||||
art.on('fullscreenWeb', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
### hotkey
|
||||
|
||||
在快捷键被使用时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('hotkey', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
title: 第三方库
|
||||
sidebar_position: 7
|
||||
slug: /libraries
|
||||
---
|
||||
|
||||
## flv.js
|
||||
|
||||
- 主页: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: '/assets/sample/video.flv',
|
||||
customType: {
|
||||
flv: function (video, url) {
|
||||
const flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: url,
|
||||
});
|
||||
flvPlayer.attachMediaElement(video);
|
||||
flvPlayer.load();
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## hls.js
|
||||
|
||||
- 主页: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/hls.js@1.1.1/dist/hls.min.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
|
||||
customType: {
|
||||
m3u8: function (video, url) {
|
||||
var hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## dash.js
|
||||
|
||||
- 主页: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/dashjs@4.1.0/dist/dash.all.debug.min.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
|
||||
customType: {
|
||||
mpd: function (video, url) {
|
||||
var player = dashjs.MediaPlayer().create();
|
||||
player.initialize(video, url, true);
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## shaka-player
|
||||
|
||||
- 主页: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/shaka-player@3.2.1/dist/shaka-player.compiled.min.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
|
||||
customType: {
|
||||
mpd: function (video, url) {
|
||||
shaka.polyfill.installAll();
|
||||
var player = new shaka.Player(video);
|
||||
player.load(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## webtorrent
|
||||
|
||||
- 主页: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/webtorrent@1.5.8/webtorrent.min.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url:
|
||||
'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
|
||||
type: 'torrent',
|
||||
customType: {
|
||||
torrent: function (video, url, art) {
|
||||
var client = new WebTorrent();
|
||||
art.loading.show = true;
|
||||
client.add(url, function (torrent) {
|
||||
var file = torrent.files[0];
|
||||
file.renderTo(video, {
|
||||
autoplay: true,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.template.$video.controls = false;
|
||||
});
|
||||
```
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,72 +1,247 @@
|
||||
---
|
||||
title: Overview
|
||||
title: Quick start
|
||||
sidebar_position: 1
|
||||
slug: /
|
||||
---
|
||||
|
||||
## Integration Guides
|
||||
## Install
|
||||
|
||||
- Require confirmation from AWDA to implement to production after complete UAT for all services.
|
||||
### Install by `npm`:
|
||||
|
||||
- You can use API tools to test some services during your development。
|
||||
```bash
|
||||
$ npm install artplayer
|
||||
```
|
||||
|
||||
- You can check the response code or contact us when you have problems during the testing
|
||||
### Install by `yarn`:
|
||||
|
||||
- All services using POST method to send request（Including Inquiry）
|
||||
```bash
|
||||
$ yarn add artplayer
|
||||
```
|
||||
|
||||
- All requests and responses are JSON format. NOTE: Header Content-Type -> application/json UTF-8 encoding
|
||||
Then load the `Artplayer` module:
|
||||
|
||||
- All requests require signature
|
||||
```js
|
||||
// ES6
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
## Document Change Control
|
||||
// CommonJS
|
||||
const Artplayer = require('artplayer');
|
||||
```
|
||||
|
||||
| Version | Date | Authors | Summary of changes |
|
||||
| ------- | ---------- | ------- | -------------------- |
|
||||
| 1.0.0 | 2019.06.03 | ZHIBO | Thumbnails image url |
|
||||
### Install by `script`:
|
||||
|
||||
## API Summary
|
||||
```html
|
||||
<!-- locally -->
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
|
||||
| **Service name** | **Description** |
|
||||
| -----------------| --------------- |
|
||||
| user registration| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : All other services can be used only after user registration success</p>|
|
||||
| Authorization list inquiry| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : NO</p><p>Description : Get the authorization list and check the authorization status</p>|
|
||||
| Get the authorization detail page| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : NO</p><p>Description : Customer complete the authorization in the pages</p>
|
||||
| Call back for authorization status| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : NO</p><p>Description : To receive the authorization status</p>|
|
||||
| Bank card inquiry| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : To inquiry bank card status</p>|
|
||||
| Get bank list| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Get the bank list for bank card input</p>|
|
||||
| Bank card verification| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Verify and submit bank card</p>|
|
||||
| Submit loan| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Submit loan info, including (personal info, work info and emergency contact)</p> |
|
||||
| Loan agreement inquiry| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Get loan agreement</p>|
|
||||
| Sign agreement| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Sign agreement (Confirm disbursement)</p>|
|
||||
| Get loan information| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Get loan info based on loan number (include repayment schedule if disbursed)</p> |
|
||||
| Get repayment VA| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Get the repayment VA</p>|
|
||||
| Push notification| <p>Provider: Third party </p><p>User : AWDA</p><p>Mandatory: NO</p><p>Description : Push the loan status update to Third party </p>|
|
||||
| Eligible Check| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : YES</p><p>Description : Verify Customer</p>|
|
||||
| Get the token for uploading image| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : NO</p><p>Description : To get the token which used for api Upload Image (1)</p>|
|
||||
| Upload Image (1)| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : NO</p><p>Description : By sending file stream with token</p>|
|
||||
| Upload Image (2)| <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : NO</p><p>Description : By sending base64 or url format</p>|
|
||||
| Get the redirect url<br/>(For H5 pages of Digital Signature, Loan detail and Repayment detail) | <p>Provider : AWDA</p><p>User : Third party </p><p>Mandatory : NO</p><p>Description : Redirect to the specific H5 pages</p>|
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
|
||||
|
||||
## Environment information
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
|
||||
```
|
||||
|
||||
- Testing environment：`https://sea-staging.wolaidai.com`
|
||||
- Production environment：`https://japi.maucash.id`
|
||||
- Note: All APIs URL will be environment `url` + `service url`
|
||||
Then you can access the constructor via `window.ArtPlayer`
|
||||
|
||||
## List Of Response Code
|
||||
|
||||
| Code|Description|
|
||||
| ----|----|
|
||||
| 0 | Success|
|
||||
| 1000| System is busy|
|
||||
| 1001| Repeat request|
|
||||
| 1002| Unvalid token|
|
||||
| 1003| Timestamp error or expired (only valid within 60s)|
|
||||
| 1004| Signature error|
|
||||
| 1005| appId invalid|
|
||||
| 1006| Parameters cannot be empty|
|
||||
| 1007| Parameters error|
|
||||
| 1008| User already existed|
|
||||
| 1009| User not found|
|
||||
| 1010| Loan not found|
|
||||
| 1012| Authorization info not found|
|
||||
## Use
|
||||
|
||||
:::danger Tip
|
||||
|
||||
The size of the player depends on the size of the `container`, so your `container` must have a size.
|
||||
|
||||
:::
|
||||
|
||||
### Use in `Html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer Demo</title>
|
||||
<meta charset="UTF-8" />
|
||||
<style>
|
||||
.artplayer-app {
|
||||
idth:400px;
|
||||
height:300px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="artplayer-app"></div>
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
<script>
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Use in `Vue`
|
||||
|
||||
Create component: `Artplayer.vue`
|
||||
|
||||
```js
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
getInstance: Function,
|
||||
},
|
||||
mounted() {
|
||||
this.instance = new Artplayer({
|
||||
...this.option,
|
||||
container: this.$refs.artRef,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit('getInstance', this.instance);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.instance && this.instance.destroy) {
|
||||
this.instance.destroy();
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
return h('div', {
|
||||
ref: 'artRef',
|
||||
});
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Import the `Artplayer.vue` component
|
||||
|
||||
```jsx
|
||||
<template>
|
||||
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Artplayer from "./Artplayer.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
url: "https://artplayer.org/assets/sample/video.mp4",
|
||||
},
|
||||
style: {
|
||||
width: "600px",
|
||||
height: "400px",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Artplayer,
|
||||
},
|
||||
methods: {
|
||||
getInstance(art) {
|
||||
console.log(art);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Use in `React`
|
||||
|
||||
Create component: `Artplayer.jsx`
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
export default class ArtplayerReact extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.instance = null;
|
||||
this.artRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { option, getInstance } = this.props;
|
||||
this.instance = new Artplayer({
|
||||
...option,
|
||||
container: this.artRef.current,
|
||||
});
|
||||
|
||||
if (getInstance && typeof getInstance === 'function') {
|
||||
getInstance(this.instance);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.instance && this.instance.destroy) {
|
||||
this.instance.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { option, getInstance, ...rest } = this.props;
|
||||
return React.createElement('div', {
|
||||
ref: this.artRef,
|
||||
...rest,
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Import the `Artplayer.jsx` component
|
||||
|
||||
```jsx
|
||||
import Artplayer from "./Artplayer.jsx";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Artplayer
|
||||
option={{
|
||||
url: "https://artplayer.org/assets/sample/video.mp4",
|
||||
}}
|
||||
style={{
|
||||
width: "600px",
|
||||
height: "400px",
|
||||
}}
|
||||
getInstance={ins => console.log(ins)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
:::caution Tip
|
||||
|
||||
Modifying `option` not dynamically modified ArtPlayer instances in `Vue` and `React`
|
||||
|
||||
:::
|
||||
|
||||
## Demo
|
||||
|
||||
:::tip Tip
|
||||
|
||||
In this document, by clicking the `Run Code` button before the code block, you can immediately enter the demo.
|
||||
|
||||
:::
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
@@ -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();
|
||||
})
|
||||
```
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: 在控制栏添加按钮
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 `bootstrap`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var time = 0;
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '<button type="button">Click Me!</button>',
|
||||
click: function (_, event) {
|
||||
// 第二个参数是事件对象
|
||||
time += 1;
|
||||
event.target.innerText = 'You Click ' + time;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 在控制栏添加列表
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 `selector` 和 `onSelect` 属性
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Subtitle 01',
|
||||
selector: [
|
||||
{
|
||||
html: '<span style="color:red">Subtitle 01</span>',
|
||||
url: '/assets/sample/subtitle.srt?id=1',
|
||||
},
|
||||
{
|
||||
html: '<span style="color:yellow">Subtitle 02</span>',
|
||||
url: '/assets/sample/subtitle.srt?id=2',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom) {
|
||||
art.subtitle.switch(item.url, {
|
||||
name: $dom.innerText,
|
||||
});
|
||||
|
||||
return '你点击了' + item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"label": "常见问题",
|
||||
"position": 7,
|
||||
"collapsed": true
|
||||
}
|
||||
@@ -12,7 +12,7 @@ slug: /zh-cn
|
||||
$ npm install artplayer
|
||||
```
|
||||
|
||||
### 通过 `yarn` 安装：
|
||||
### 通过 `yarn` 安装：
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer
|
||||
|
||||
Reference in new issue
Block a user