mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-26 08:51:20 -08:00
Artplayer vitepress (#446)
* init * init * update * update * update * update * update * update * add i18n option * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update
This commit is contained in:
Harvey Zack authored and GitHub committed
1 parent
6a866f88c3
commit
fa7954de0d
295 files changed
+18695
-36337
No files matched your search
@@ -1,20 +0,0 @@
|
||||
# Dependencies
|
||||
/node_modules
|
||||
|
||||
# Production
|
||||
/build
|
||||
|
||||
# Generated files
|
||||
.docusaurus
|
||||
.cache-loader
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@@ -1,41 +0,0 @@
|
||||
# Website
|
||||
|
||||
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
|
||||
|
||||
### Installation
|
||||
|
||||
```
|
||||
$ yarn
|
||||
```
|
||||
|
||||
### Local Development
|
||||
|
||||
```
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
|
||||
|
||||
### Build
|
||||
|
||||
```
|
||||
$ yarn build
|
||||
```
|
||||
|
||||
This command generates static content into the `build` directory and can be served using any static contents hosting service.
|
||||
|
||||
### Deployment
|
||||
|
||||
Using SSH:
|
||||
|
||||
```
|
||||
$ USE_SSH=true yarn deploy
|
||||
```
|
||||
|
||||
Not using SSH:
|
||||
|
||||
```
|
||||
$ GIT_USER=<Your GitHub username> yarn deploy
|
||||
```
|
||||
|
||||
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
|
||||
@@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
};
|
||||
@@ -1,785 +0,0 @@
|
||||
---
|
||||
title: Advanced propertys
|
||||
sidebar_position: 4
|
||||
slug: /advance
|
||||
---
|
||||
|
||||
:::tip Tip
|
||||
|
||||
This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions.
|
||||
|
||||
:::
|
||||
|
||||
## id
|
||||
|
||||
- Type: `Number`
|
||||
|
||||
A self-inclusive number of the player instance
|
||||
|
||||
## option
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
After merged options
|
||||
|
||||
## isFocus
|
||||
|
||||
- Type: `Boolean`
|
||||
|
||||
Whether the player instance has been focused
|
||||
|
||||
## isInput
|
||||
|
||||
- Type: `Boolean`
|
||||
|
||||
Whether the player instance has been focused on input element
|
||||
|
||||
## isLock
|
||||
|
||||
- Type: `Boolean`
|
||||
|
||||
Whether the player instance has been locked on mobile
|
||||
|
||||
## isDestroy
|
||||
|
||||
- Type: `Boolean`
|
||||
|
||||
Whether the player instance is destroyed
|
||||
|
||||
## whitelist
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage the whitelist
|
||||
|
||||
## template
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Equal to `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);
|
||||
});
|
||||
```
|
||||
|
||||
## events
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage the `events`
|
||||
|
||||
## proxy
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Proxy native event method, easy to manage and destroy the event
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var container = document.querySelector('.artplayer-app');
|
||||
var art = new Artplayer({
|
||||
container: container,
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.proxy(container, 'click', (event) => {
|
||||
console.info(event);
|
||||
});
|
||||
```
|
||||
|
||||
## storage
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage persistent storage objects
|
||||
|
||||
The player will automatically add a json object called `artplayer_settings` to the `localstorage`
|
||||
|
||||
| Property | Type | Description |
|
||||
| -------- | ---------- | ------------ |
|
||||
| `get` | `Function` | Get value |
|
||||
| `set` | `Function` | Set value |
|
||||
| `del` | `Function` | Delete value |
|
||||
| `clear` | `Function` | Clean value |
|
||||
|
||||
<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.clear();
|
||||
```
|
||||
|
||||
## icons
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage player `icons`
|
||||
|
||||
## i18n
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage player `i18n`
|
||||
|
||||
### get
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Method `get` can get the value of the language value
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `update` can add more languages
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage the object of the core function
|
||||
|
||||
## subtitle
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
encoding: 'utf-8',
|
||||
style: {
|
||||
color: '#03A9F4',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.style({
|
||||
color: 'red',
|
||||
'font-size': '40px',
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### url
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Propertie `url` can `set` and `get` the subtitle 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',
|
||||
style: {
|
||||
color: '#03A9F4',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
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',
|
||||
style: {
|
||||
color: 'red',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt?t=1', {
|
||||
name: 'The new subtitle',
|
||||
style: {
|
||||
color: 'green',
|
||||
'font-size': '24px',
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## info
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage video info
|
||||
|
||||
## layers
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```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',
|
||||
},
|
||||
},
|
||||
{
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
left: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.layers.show = false;
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can dynamically add a layer
|
||||
|
||||
| Property | Type | Description |
|
||||
| --------- | ------------------- | ------------------------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | The unique name of the component, used to mark the class name |
|
||||
| `index` | `Number` | Component index, priority for display |
|
||||
| `html` | `String`、`Element` | DOM element of the component |
|
||||
| `style` | `Object` | Component style object |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Prompt text of the 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
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.notice.show = 'Custom prompt information 1';
|
||||
art.notice.show = 'Custom prompt information 2';
|
||||
});
|
||||
```
|
||||
|
||||
## controls
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage the object of the control bar
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Attribute `show` can control if the control bar is displayed
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can dynamically add a control
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------- | ------------------- | ------------------------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | The unique name of the component, used to mark the class name |
|
||||
| `index` | `Number` | Component index, priority for display |
|
||||
| `html` | `String`、`Element` | DOM element of the component |
|
||||
| `style` | `Object` | Component style object |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Prompt text of the component |
|
||||
| `position` | `String` | Location at `left` or `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({
|
||||
disable: false,
|
||||
name: 'button',
|
||||
index: 10,
|
||||
position: 'right',
|
||||
html: 'Custom button1',
|
||||
tooltip: 'Custom button1',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
click: function () {
|
||||
console.log('You clicked custom button 1');
|
||||
},
|
||||
mounted: function () {
|
||||
console.log('Custom button mounting is complete 1');
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## contextmenu
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage the contextmenu
|
||||
|
||||
### show
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Attribute `show` can control if the menu is displayed
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can dynamically add a menu items
|
||||
|
||||
| Property | Type | Description |
|
||||
| --------- | ------------------- | ------------------------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | The unique name of the component, used to mark the class name |
|
||||
| `index` | `Number` | Component index, priority for display |
|
||||
| `html` | `String`、`Element` | DOM element of the component |
|
||||
| `style` | `Object` | Component style object |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Prompt text of the 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: 'Custom menu',
|
||||
click: function () {
|
||||
console.info('You clicked the custom menu');
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## loading
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```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
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```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
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.hotkey.add(65, () => {
|
||||
console.info('You click A');
|
||||
});
|
||||
|
||||
art.hotkey.add(66, () => {
|
||||
console.info('You click B');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
:::tip Tip
|
||||
|
||||
This hotkey will take effect only after the player gets the focus (if you click on the player).
|
||||
|
||||
:::
|
||||
|
||||
## setting
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
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>
|
||||
|
||||
```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);
|
||||
});
|
||||
```
|
||||
|
||||
## plugins
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Manage plugin
|
||||
|
||||
### add
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Method `add` can be dynamically add a plugin
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
function myPlugin(art) {
|
||||
console.info('You can access an instance of a player in the plugin');
|
||||
return {
|
||||
name: 'myPlugin',
|
||||
something: 'Custom export properties',
|
||||
doSomething: function () {
|
||||
console.info('Custom export method');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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());
|
||||
});
|
||||
```
|
||||
@@ -1,135 +0,0 @@
|
||||
---
|
||||
title: Static propertys
|
||||
sidebar_position: 5
|
||||
slug: /class
|
||||
---
|
||||
|
||||
:::tip Tip
|
||||
|
||||
Static attributes exist in the constructor artplayer, and the player instance is not directly associated
|
||||
|
||||
:::
|
||||
|
||||
## instances
|
||||
|
||||
- Type: `Array`
|
||||
|
||||
A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time.
|
||||
|
||||
<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);
|
||||
});
|
||||
```
|
||||
|
||||
## version
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Current player version number
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.version);
|
||||
```
|
||||
|
||||
## env
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Current player environment variable
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.env);
|
||||
```
|
||||
|
||||
## utils
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Common utils for player
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.utils);
|
||||
```
|
||||
|
||||
## config
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Store native properties and methods of video
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.config);
|
||||
```
|
||||
|
||||
## scheme
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Verification scheme for player option
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.scheme);
|
||||
```
|
||||
|
||||
## validator
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Validator for player option
|
||||
|
||||
## option
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Player default option
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.option);
|
||||
```
|
||||
|
||||
## html
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Player defaults `HTML` String, usually used for `SSR`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.html);
|
||||
```
|
||||
|
||||
## kindOf
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
JS type identification function
|
||||
|
||||
<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([]));
|
||||
```
|
||||
@@ -1,332 +0,0 @@
|
||||
---
|
||||
title: Common events
|
||||
sidebar_position: 6
|
||||
slug: /events
|
||||
---
|
||||
|
||||
The event of the player is divided into two, a `native event` of a video, and another is a `custom event`. The `native event` comes from `Video Elements`, is the original event of the `Video Element`, in order to distinguish it and `custom events`, the native event adds a prefix `video:`
|
||||
|
||||
## Native event
|
||||
|
||||
For more information, please read [Mozilla Video Events](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events)
|
||||
|
||||
| Event name | Fired When |
|
||||
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `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:error` | An error occurred while fetching the media data, or the type of the resource is not a supported media format. |
|
||||
| `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 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('video:play', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
## Custom event
|
||||
|
||||
### ready
|
||||
|
||||
Fired when the player is initialized, and the video can be played
|
||||
|
||||
<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
|
||||
|
||||
Fired after the video is played
|
||||
|
||||
<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
|
||||
|
||||
Fired after the video is 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
|
||||
|
||||
Fired when the video is time jump
|
||||
|
||||
<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;
|
||||
});
|
||||
```
|
||||
|
||||
:::tip Tip
|
||||
|
||||
Set the `art.currentTime` will not fired the `seek` event
|
||||
|
||||
:::
|
||||
|
||||
### volume
|
||||
|
||||
Fired when the video volume changes
|
||||
|
||||
<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
|
||||
|
||||
Fired when the player instance is destroyed
|
||||
|
||||
<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
|
||||
|
||||
Fired when the player gets focus, if you click on the player
|
||||
|
||||
<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
|
||||
|
||||
Fired when the player loses focus, such as the area other than the player
|
||||
|
||||
<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
|
||||
|
||||
Fired when mouse moves player
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('hover', (state) => {
|
||||
// state for true, the mouse moves from the outside to the player
|
||||
// state for false, the mouse moves from the player to the outside
|
||||
console.info(state);
|
||||
});
|
||||
```
|
||||
|
||||
### resize
|
||||
|
||||
Fired when the player is changed
|
||||
|
||||
<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
|
||||
|
||||
Fired when the mouse is played, this and `hover` is different, it will trigger multiple times
|
||||
|
||||
<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
|
||||
|
||||
Fired when the video url changes
|
||||
|
||||
<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
|
||||
|
||||
Fired when the player window is full screen
|
||||
|
||||
<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
|
||||
|
||||
Fired when player webpage full screen
|
||||
|
||||
<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
|
||||
|
||||
Trigger when hotkey are used
|
||||
|
||||
<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);
|
||||
});
|
||||
```
|
||||
@@ -1,219 +0,0 @@
|
||||
---
|
||||
title: Third party librarys
|
||||
sidebar_position: 7
|
||||
slug: /libraries
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
- With the option `customType`, it is easy to integrate third-party video decoding libraries.
|
||||
When there are multiple decoders, you can add them to `customType`. When the decoding library is too large, you can also use `js` to dynamically import
|
||||
|
||||
- By default, the player will parse the video type of the `url` option (such as `m3u8`, `flv`, `mpd`).
|
||||
If the correct video type cannot be parsed, you can add the `type` option to indicate the video type
|
||||
|
||||
```js
|
||||
// Now this player can play: m3u8, flv, mpd
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.m3u8',
|
||||
type: 'm3u8', // Optional, but it is better to fill in
|
||||
customType: {
|
||||
m3u8: async function (video, url) {
|
||||
const { default: Hls } = await import('hls.js');
|
||||
},
|
||||
flv: async function (video, url) {
|
||||
const { default: flvjs } = await import('flv.js');
|
||||
},
|
||||
mpd: async function (video, url) {
|
||||
const { default: dashjs } = await import('dash.js');
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// You can switch to a new video address
|
||||
art.url = '/assets/sample/video-new.m3u8';
|
||||
|
||||
// You can also switch new video type
|
||||
art.type = 'flv';
|
||||
art.url = '/assets/sample/video.flv';
|
||||
|
||||
art.type = 'mpd';
|
||||
art.url = '/assets/sample/video.mpd';
|
||||
```
|
||||
|
||||
:::tip Tip
|
||||
|
||||
If `customType` is used, the previous decoder instance must be destroyed before switching url, otherwise memory leakage will occur
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
var hls = null;
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.m3u8',
|
||||
type: 'm3u8',
|
||||
customType: {
|
||||
m3u8: async function (video, url) {
|
||||
const { default: Hls } = await import('hls.js');
|
||||
|
||||
// Destroy the last decoder instance before switching url
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
}
|
||||
|
||||
hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// When the player is destroyed, the decoder instance must also be destroyed
|
||||
art.on('destroy', () => {
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
// Switch to a new video address
|
||||
art.url = '/assets/sample/video-new.m3u8';
|
||||
```
|
||||
|
||||
## flv.js
|
||||
|
||||
- Homepage: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
|
||||
|
||||
<div className="run-code" data-libs="https://unpkg.com/flv.js@1.6.2/dist/flv.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: '/assets/sample/video.flv',
|
||||
customType: {
|
||||
flv: function (video, url) {
|
||||
if (flvjs.isSupported()) {
|
||||
const flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: url,
|
||||
});
|
||||
flvPlayer.attachMediaElement(video);
|
||||
flvPlayer.load();
|
||||
} else {
|
||||
art.notice.show = 'Does not support playback of flv';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## hls.js
|
||||
|
||||
- Homepage: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/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) {
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url;
|
||||
} else {
|
||||
art.notice.show = 'Does not support playback of m3u8';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## dash.js
|
||||
|
||||
- Homepage: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.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
|
||||
|
||||
- Homepage: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
|
||||
|
||||
<div className="run-code" data-libs="https://unpkg.com/shaka-player@3.3.1/dist/shaka-player.compiled.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
|
||||
|
||||
- Homepage: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
|
||||
|
||||
<div className="run-code" data-libs="https://unpkg.com/webtorrent@1.8.1/index.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,275 +0,0 @@
|
||||
---
|
||||
title: Quick start
|
||||
sidebar_position: 1
|
||||
slug: /
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
## Install
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```bash
|
||||
npm install artplayer
|
||||
```
|
||||
|
||||
```js showLineNumbers
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
const art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="yarn">
|
||||
|
||||
```bash
|
||||
yarn add artplayer
|
||||
```
|
||||
|
||||
```js showLineNumbers
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
const art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="script" label="script">
|
||||
|
||||
```html showLineNumbers
|
||||
<!-- local -->
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
|
||||
```
|
||||
|
||||
```js showLineNumbers
|
||||
const art = new window.Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## 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 showLineNumbers title="index.html"
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
<style>
|
||||
.artplayer-app {
|
||||
width: 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.js` or `Nuxt.js`
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="Vue.js" label="Vue.js Template">
|
||||
|
||||
🚀 [artplayer-template/vue.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue3.js)
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Nuxt.js" label="Nuxt.js Template">
|
||||
|
||||
🚀 [artplayer-template/nuxt.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js)
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="Artplayer.vue" label="Artplayer.vue">
|
||||
|
||||
```js showLineNumbers title="Artplayer.vue"
|
||||
<template>
|
||||
<div ref="artRef"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Artplayer from "artplayer";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.instance = new Artplayer({
|
||||
...this.option,
|
||||
container: this.$refs.artRef,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit("get-instance", this.instance);
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.instance && this.instance.destroy) {
|
||||
this.instance.destroy(false);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="App.vue" label="App.vue">
|
||||
|
||||
```js showLineNumbers title="App.vue"
|
||||
<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",
|
||||
margin: "60px auto 0",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Artplayer,
|
||||
},
|
||||
methods: {
|
||||
getInstance(art) {
|
||||
console.log(art);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### Use in `React.js` or `Next.js`
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="React.js" label="React.js Template">
|
||||
|
||||
🚀 [artplayer-template/react.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js)
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Next.js" label="Next.js Template">
|
||||
|
||||
🚀 [artplayer-template/next.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js)
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="ArtPlayer.jsx" label="ArtPlayer.jsx">
|
||||
|
||||
```jsx showLineNumbers title="ArtPlayer.jsx"
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
export default function Player({ option, getInstance, ...rest }) {
|
||||
const artRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const art = new Artplayer({
|
||||
...option,
|
||||
container: artRef.current,
|
||||
});
|
||||
|
||||
if (getInstance && typeof getInstance === 'function') {
|
||||
getInstance(art);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (art && art.destroy) {
|
||||
art.destroy(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div ref={artRef} {...rest}></div>;
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="App.jsx" label="App.jsx">
|
||||
|
||||
```jsx showLineNumbers title="App.jsx"
|
||||
import React from 'react';
|
||||
import Artplayer from './ArtPlayer';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Artplayer
|
||||
option={{
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
}}
|
||||
style={{
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
}}
|
||||
getInstance={(art) => console.log(art)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "Official plugins",
|
||||
"position": 7,
|
||||
"collapsed": true
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
title: Ads Plugin
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
## Demo
|
||||
|
||||
👉 [View Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
|
||||
|
||||
## Install
|
||||
|
||||
### Install from `npm`:
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-ads
|
||||
```
|
||||
|
||||
### Install from `yarn`:
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-ads
|
||||
```
|
||||
|
||||
### Install from `script`:
|
||||
|
||||
```html
|
||||
<!-- local -->
|
||||
<script src="path/to/artplayer-plugin-ads.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>
|
||||
```
|
||||
|
||||
Then you can access the plugin function through `window.artplayerPluginAds`
|
||||
|
||||
## Use
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
plugins: [
|
||||
artplayerPluginAds({
|
||||
// html ad, ignore this value if it is a video ad
|
||||
html: '<img src="/assets/sample/poster.jpg">',
|
||||
|
||||
// The address of the video ad
|
||||
video: '/assets/sample/test1.mp4',
|
||||
|
||||
// Ad redirect URL, if empty, no redirect
|
||||
url: 'http://artplayer.org',
|
||||
|
||||
// The length of time that must be watched, the period cannot be skipped, the unit is seconds
|
||||
// When the value is greater than or equal to totalDuration, the ad cannot be closed early
|
||||
// When the value is equal to or less than 0, the ad can be turned off at any time
|
||||
playDuration: 5,
|
||||
|
||||
// The total duration of the ad, in seconds
|
||||
totalDuration: 10,
|
||||
|
||||
// Whether the video ads defaults to silence
|
||||
muted: false,
|
||||
|
||||
// Multilingual support
|
||||
i18n: {
|
||||
close: 'Close Ads',
|
||||
countdown: '%s seconds',
|
||||
detail: 'Check Detail',
|
||||
canBeClosed: 'Ads can be closed after %s seconds',
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
art.on('artplayerPluginAds:click', (ads) => {
|
||||
console.info('ad is clicked', ads);
|
||||
});
|
||||
|
||||
art.on('artplayerPluginAds:skip', (ads) => {
|
||||
console.info('Ads are skipped', ads);
|
||||
});
|
||||
```
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
title: Control Plugin
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
## Demo
|
||||
|
||||
👉 [View Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control)
|
||||
|
||||
## Install
|
||||
|
||||
### Install from `npm`:
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-control
|
||||
```
|
||||
|
||||
### Install from `yarn`:
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-control
|
||||
```
|
||||
|
||||
### Install from `script`:
|
||||
|
||||
```html
|
||||
<!-- local -->
|
||||
<script src="path/to/artplayer-plugin-control.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js"></script>
|
||||
```
|
||||
|
||||
Then you can access the plugin function through `window.artplayerPluginControl`
|
||||
|
||||
## Use
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-control/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
plugins: [
|
||||
artplayerPluginControl(),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Api
|
||||
|
||||
### enable
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
|
||||
Whether to enable the new control UI
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-control/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '<button type="button">Switcher UI</button>',
|
||||
click: function () {
|
||||
const { enable } = art.plugins.artplayerPluginControl;
|
||||
art.plugins.artplayerPluginControl.enable = !enable;
|
||||
},
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
artplayerPluginControl(),
|
||||
],
|
||||
});
|
||||
``
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
title: Danmuku plugin
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
:::danger Tip
|
||||
|
||||
The documentation of the current danmaku library plug-in, only the Chinese version
|
||||
|
||||
:::
|
||||
|
||||
👉 [https://artplayer.org/document/zh-cn/Plugins/danmuku/](https://artplayer.org/document/zh-cn/Plugins/danmuku/)
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
title: Hls Quality Plugin
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
With this plugin, you can add the `Hls` video quality list to the control or the settings panel
|
||||
|
||||
## Demo
|
||||
|
||||
👉 [View Demo](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
|
||||
|
||||
## Install
|
||||
|
||||
### Install from `npm`:
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
### Install from `yarn`:
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
### Install from `script`:
|
||||
|
||||
```html
|
||||
<!-- local -->
|
||||
<script src="path/to/artplayer-plugin-hls-quality.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
|
||||
```
|
||||
|
||||
Then you can access the plugin function through `window.artplayerPluginHlsQuality`
|
||||
@@ -1,202 +0,0 @@
|
||||
---
|
||||
title: Iframe Plugin
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
With this plugin, you can easily control the player in the `iframe` page in the `main page`.
|
||||
|
||||
For example, you can control the functions of the `iframe` player through code in the `main page`, or get the value of the `iframe` player.
|
||||
|
||||
## Demo
|
||||
|
||||
👉 [View Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
|
||||
|
||||
## Install
|
||||
|
||||
### Install from `npm`:
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
### Install from `yarn`:
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
### Install from `script`:
|
||||
|
||||
```html
|
||||
<!-- local -->
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script>
|
||||
```
|
||||
|
||||
Then you can access the plugin function through `window.artplayerPluginIframe`
|
||||
|
||||
## Use
|
||||
|
||||
### index.html
|
||||
|
||||
```html showLineNumbers title="index.html"
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="iframe"></iframe>
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<script>
|
||||
const iframe = new ArtplayerPluginIframe({
|
||||
// iframe element
|
||||
iframe: document.querySelector('#iframe'),
|
||||
// iframe url
|
||||
url: 'path/to/iframe.html',
|
||||
});
|
||||
|
||||
// Push message to iframe
|
||||
iframe.commit(() => {
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### iframe.html
|
||||
|
||||
```html showLineNumbers title="iframe.html"
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="artplayer-app" style="width: 100%; height: 100%;"></div>
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<script>
|
||||
// Inject the script, receive messages from the instance
|
||||
ArtplayerPluginIframe.inject();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Instance Api
|
||||
|
||||
### commit
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Push message to iframe, the function will run inside the iframe
|
||||
|
||||
```js
|
||||
iframe.commit(() => {
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
});
|
||||
});
|
||||
|
||||
iframe.commit(() => {
|
||||
art.seek = 5;
|
||||
});
|
||||
|
||||
// Get the value from the iframe
|
||||
(async function () {
|
||||
// Use return keyword
|
||||
var currentTime = await iframe.commit(() => {
|
||||
return art.currentTime;
|
||||
});
|
||||
|
||||
// Or use resolve method
|
||||
var currentTime2 = await iframe.commit((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(art.currentTime);
|
||||
}, 1000);
|
||||
});
|
||||
})();
|
||||
```
|
||||
|
||||
### message
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Receive message from the iframe
|
||||
|
||||
```js
|
||||
iframe.message((event) => {
|
||||
console.log(event);
|
||||
});
|
||||
```
|
||||
|
||||
### destroy
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Destroy the instance, cannot communicate with the iframe after destroy
|
||||
|
||||
```js
|
||||
iframe.destroy();
|
||||
```
|
||||
|
||||
## Iframe Api
|
||||
|
||||
:::danger Tip
|
||||
|
||||
The `Iframe Api` can only be used in `iframe`.
|
||||
|
||||
:::
|
||||
|
||||
### inject
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Inject the script, then can receive messages from the instance
|
||||
|
||||
```js
|
||||
ArtplayerPluginIframe.inject();
|
||||
```
|
||||
|
||||
### postMessage
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Push message to instance
|
||||
|
||||
```js
|
||||
iframe.message((event) => {
|
||||
console.log(event);
|
||||
});
|
||||
|
||||
iframe.commit(() => {
|
||||
ArtplayerPluginIframe.postMessage({
|
||||
type: 'currentTime',
|
||||
data: art.currentTime,
|
||||
});
|
||||
});
|
||||
```
|
||||
@@ -1,811 +0,0 @@
|
||||
---
|
||||
title: Common properties
|
||||
sidebar_position: 3
|
||||
slug: /propertie
|
||||
---
|
||||
|
||||
## play
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Play video
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Pause video
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Switch Video playback and pause
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Video time jump, unit seconds
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Video time forward, unit seconds
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Video time backward, unit seconds
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Set and get video volume, range: `[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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Set and get video url
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
Set video url, set, like the `url`, but will perform some optimization operations
|
||||
|
||||
The function supports two parameters, the first one for the new video url, the second is new video name
|
||||
|
||||
<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', 'New video name');
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## switchQuality
|
||||
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
Set the video quality address, like the `switchUrl`, but will bring the previous play progress
|
||||
|
||||
The function supports two parameters, the first one for the new video url, the second is new video name
|
||||
|
||||
<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', 'New video name');
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## muted
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Setting up and getting the video mute
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Set and get the video current time, set time like the `seek`, but it does not trigger additional events
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Getter`
|
||||
|
||||
Get video duration
|
||||
|
||||
<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 Tip
|
||||
|
||||
Some videos are there is no duration, such as the live video or video is not decoded, the duration will be `0`
|
||||
|
||||
:::
|
||||
|
||||
## screenshot
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Download the current video frame screenshot
|
||||
|
||||
<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.once('video:canplay', () => {
|
||||
art.screenshot();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## getDataURL
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Get the `base64` url of the current video frame, return to a `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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Get the `blob` url of the current video frame, return to a `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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get a player window full screen
|
||||
|
||||
<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 Tip
|
||||
|
||||
Due to the browser security mechanism, the page must be exchanged before the window full screen, such as the user click on the page)
|
||||
|
||||
:::
|
||||
|
||||
## fullscreenWeb
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Setting up and get a player web page full screen
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get player PIP Mode
|
||||
|
||||
<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 Tip
|
||||
|
||||
Due to the browser security mechanism, the page must be exchanged first before the `PIP` (such as user clicking over the page)
|
||||
|
||||
:::
|
||||
|
||||
## poster
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Setting up and get a video poster, only the poster effect can only be seen before the video is played
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get player mini mode
|
||||
|
||||
<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;
|
||||
});
|
||||
```
|
||||
|
||||
## playing
|
||||
|
||||
- Type: `Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Get the video is playing
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set whether the video is adaptive, set to `true`, it will only execute once
|
||||
|
||||
<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
|
||||
|
||||
- Type: `Getter`
|
||||
|
||||
Get the size and coordinate information of the player
|
||||
|
||||
<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 Tip
|
||||
|
||||
Size and coordinate information is obtained by `getBoundingClientRect`
|
||||
|
||||
:::
|
||||
|
||||
## flip
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Set and get player flip, support `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);
|
||||
});
|
||||
```
|
||||
|
||||
## playbackRate
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Set and get player playback speed, support `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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Set and get the player long aspect, support `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
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Array`
|
||||
|
||||
Setting and getting the interval to play in seconds, unit seconds
|
||||
|
||||
<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 Tip
|
||||
|
||||
Delete interval loop play, only need to set up `loop` is `[]`
|
||||
|
||||
:::
|
||||
|
||||
## autoHeight
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Default: `Boolean`
|
||||
|
||||
When the container has only width, you want the container height adapt to the player aspect ratio.
|
||||
|
||||
<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.autoHeight);
|
||||
art.autoHeight = true;
|
||||
console.info(art.autoHeight);
|
||||
});
|
||||
```
|
||||
|
||||
## attr
|
||||
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
Dynamically get and set the properties of the video element
|
||||
|
||||
<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.attr('playsInline'));
|
||||
art.attr('playsInline', true);
|
||||
console.info(art.attr('playsInline'));
|
||||
});
|
||||
```
|
||||
|
||||
## title
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Dynamic get and set player title
|
||||
|
||||
<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.title);
|
||||
art.title = 'New Title';
|
||||
console.info(art.title);
|
||||
});
|
||||
```
|
||||
|
||||
## type
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Dynamic get and set video type
|
||||
|
||||
<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.type);
|
||||
art.type = 'm3u8';
|
||||
console.info(art.type);
|
||||
});
|
||||
```
|
||||
|
||||
## theme
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Dynamic get and set player theme color
|
||||
|
||||
<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.theme);
|
||||
art.theme = '#000';
|
||||
console.info(art.theme);
|
||||
});
|
||||
```
|
||||
|
||||
## airplay
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Open the Airplay
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'airplay',
|
||||
position: 'right',
|
||||
html: 'AirPlay',
|
||||
click: function () {
|
||||
art.airplay();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- Type: `Function`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Destroy the player
|
||||
|
||||
<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();
|
||||
});
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: Add button to the controls
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
<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) {
|
||||
// The second parameter is an event object
|
||||
time += 1;
|
||||
event.target.innerText = 'You Click ' + time;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -1,230 +0,0 @@
|
||||
---
|
||||
title: Add select in the controls
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
Sometimes you need to add a list in the controls, then you can use the `selector` and `onSelect` attribute when adding controls
|
||||
|
||||
### Switch Subtitle
|
||||
|
||||
<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: [
|
||||
{
|
||||
default: true,
|
||||
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) {
|
||||
console.info(item, $dom);
|
||||
|
||||
art.subtitle.url = item.url;
|
||||
|
||||
return 'You click ' + item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### Switch filter
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/instagram.css@0.1.4/dist/instagram.min.css">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var instagramFilters = [
|
||||
{
|
||||
"html": "1977",
|
||||
"class": "filter-1977"
|
||||
},
|
||||
{
|
||||
"html": "Aden",
|
||||
"class": "filter-aden"
|
||||
},
|
||||
{
|
||||
"html": "Amaro",
|
||||
"class": "filter-amaro"
|
||||
},
|
||||
{
|
||||
"html": "Ashby",
|
||||
"class": "filter-ashby"
|
||||
},
|
||||
{
|
||||
"html": "Brannan",
|
||||
"class": "filter-brannan"
|
||||
},
|
||||
{
|
||||
"html": "Brooklyn",
|
||||
"class": "filter-brooklyn"
|
||||
},
|
||||
{
|
||||
"html": "Charmes",
|
||||
"class": "filter-charmes"
|
||||
},
|
||||
{
|
||||
"html": "Clarendon",
|
||||
"class": "filter-clarendon"
|
||||
},
|
||||
{
|
||||
"html": "Crema",
|
||||
"class": "filter-crema"
|
||||
},
|
||||
{
|
||||
"html": "Dogpatch",
|
||||
"class": "filter-dogpatch"
|
||||
},
|
||||
{
|
||||
"html": "Earlybird",
|
||||
"class": "filter-earlybird"
|
||||
},
|
||||
{
|
||||
"html": "Gingham",
|
||||
"class": "filter-gingham"
|
||||
},
|
||||
{
|
||||
"html": "Ginza",
|
||||
"class": "filter-ginza"
|
||||
},
|
||||
{
|
||||
"html": "Hefe",
|
||||
"class": "filter-hefe"
|
||||
},
|
||||
{
|
||||
"html": "Helena",
|
||||
"class": "filter-helena"
|
||||
},
|
||||
{
|
||||
"html": "Hudson",
|
||||
"class": "filter-hudson"
|
||||
},
|
||||
{
|
||||
"html": "Inkwell",
|
||||
"class": "filter-inkwell"
|
||||
},
|
||||
{
|
||||
"html": "Kelvin",
|
||||
"class": "filter-kelvin"
|
||||
},
|
||||
{
|
||||
"html": "Kuno",
|
||||
"class": "filter-juno"
|
||||
},
|
||||
{
|
||||
"html": "Lark",
|
||||
"class": "filter-lark"
|
||||
},
|
||||
{
|
||||
"html": "Lo-Fi",
|
||||
"class": "filter-lofi"
|
||||
},
|
||||
{
|
||||
"html": "Ludwig",
|
||||
"class": "filter-ludwig"
|
||||
},
|
||||
{
|
||||
"html": "Maven",
|
||||
"class": "filter-maven"
|
||||
},
|
||||
{
|
||||
"html": "Mayfair",
|
||||
"class": "filter-mayfair"
|
||||
},
|
||||
{
|
||||
"html": "Moon",
|
||||
"class": "filter-moon"
|
||||
},
|
||||
{
|
||||
"html": "Nashville",
|
||||
"class": "filter-nashville"
|
||||
},
|
||||
{
|
||||
"html": "Perpetua",
|
||||
"class": "filter-perpetua"
|
||||
},
|
||||
{
|
||||
"html": "Poprocket",
|
||||
"class": "filter-poprocket"
|
||||
},
|
||||
{
|
||||
"html": "Reyes",
|
||||
"class": "filter-reyes"
|
||||
},
|
||||
{
|
||||
"html": "Rise",
|
||||
"class": "filter-rise"
|
||||
},
|
||||
{
|
||||
"html": "Sierra",
|
||||
"class": "filter-sierra"
|
||||
},
|
||||
{
|
||||
"html": "Skyline",
|
||||
"class": "filter-skyline"
|
||||
},
|
||||
{
|
||||
"html": "Slumber",
|
||||
"class": "filter-slumber"
|
||||
},
|
||||
{
|
||||
"html": "Stinson",
|
||||
"class": "filter-stinson"
|
||||
},
|
||||
{
|
||||
"html": "Sutro",
|
||||
"class": "filter-sutro"
|
||||
},
|
||||
{
|
||||
"html": "Toaster",
|
||||
"class": "filter-toaster"
|
||||
},
|
||||
{
|
||||
"html": "Valencia",
|
||||
"class": "filter-valencia"
|
||||
},
|
||||
{
|
||||
"html": "Vesper",
|
||||
"class": "filter-vesper"
|
||||
},
|
||||
{
|
||||
"html": "Walden",
|
||||
"class": "filter-walden"
|
||||
},
|
||||
{
|
||||
"html": "Willow",
|
||||
"class": "filter-willow"
|
||||
},
|
||||
{
|
||||
"html": "X-Pro",
|
||||
"class": "filter-xpro-ii"
|
||||
}
|
||||
]
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Instagram Filters',
|
||||
selector: instagramFilters,
|
||||
onSelect: function (item) {
|
||||
art.template.$video.className = 'art-video ' + item.class;
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
title: Handle a single component
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
When we add custom components in `layers`, `contextmenu`, `controls`, It is best to add a `name` property that is used to position the DOM element of the component.
|
||||
|
||||
Here are three ways to get the DOM element of the component: component method `mounted`, instance method `query`, recommended through `name` direct acquisition.
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.layers.add({
|
||||
name: 'layer1',
|
||||
html: 'your-layer',
|
||||
mounted: function($layer1) {
|
||||
//
|
||||
}
|
||||
});
|
||||
|
||||
art.contextmenu.add({
|
||||
name: 'contextmenu1',
|
||||
html: 'your-contextmenu',
|
||||
mounted: function($contextmenu1) {
|
||||
//
|
||||
}
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'control1',
|
||||
html: 'your-control',
|
||||
position: 'right',
|
||||
mounted: function($control1) {
|
||||
//
|
||||
}
|
||||
});
|
||||
|
||||
// Use the query method to get the DOM element of the component
|
||||
var $layer1 = art.query('.art-layer-layer1');
|
||||
var $contextmenu1 = art.query('.art-contextmenu-contextmenu1');
|
||||
var $control1 = art.query('.art-control-control1');
|
||||
|
||||
// Recommended use the name to get the DOM element of the component
|
||||
var $layer1 = art.layers['layer1'];
|
||||
var $contextmenu1 = art.contextmenu['contextmenu1'];
|
||||
var $control1 = art.controls['control1'];
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
|
||||
Note that you can't create components with the same name
|
||||
|
||||
:::
|
||||
@@ -1,259 +0,0 @@
|
||||
---
|
||||
title: How to add setting panel
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
## Add selector list
|
||||
|
||||
Settings panels are similar to a collection of list selections, and support multi-layer nested
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------- | ------------------- | ------------------------ |
|
||||
| `html` | `String`、`Element` | DOM elements of selector |
|
||||
| `icon` | `String`、`Element` | Icon of selector |
|
||||
| `selector` | `Array` | Selector list |
|
||||
| `onSelect` | `Function` | Selector click event |
|
||||
| `width` | `Number` | Panel width |
|
||||
| `default` | `Boolean` | Default selected |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: 'Select Subtitle',
|
||||
width: 250,
|
||||
tooltip: 'Subtitle 01',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
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, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.subtitle.url = item.url;
|
||||
|
||||
// Change the tooltip
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Select Quality',
|
||||
width: 150,
|
||||
tooltip: '1080P',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '1080P',
|
||||
url: '/assets/sample/video.mp4?id=1080',
|
||||
},
|
||||
{
|
||||
html: '720P',
|
||||
url: '/assets/sample/video.mp4?id=720',
|
||||
},
|
||||
{
|
||||
html: '360P',
|
||||
url: '/assets/sample/video.mp4?id=360',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.switchQuality(item.url, item.html);
|
||||
|
||||
// Change the tooltip
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Multi-layer nested',
|
||||
selector: [
|
||||
{
|
||||
html: 'Nested 01',
|
||||
selector: [
|
||||
{
|
||||
html: 'Nested 02',
|
||||
},
|
||||
{
|
||||
html: 'Nested 02',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
html: 'Nested 01',
|
||||
selector: [
|
||||
{
|
||||
html: 'Nested 02',
|
||||
},
|
||||
{
|
||||
html: 'Nested 02',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Add switch button
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------- | ------------------- | ------------------------ |
|
||||
| `html` | `String`、`Element` | DOM elements of selector |
|
||||
| `icon` | `String`、`Element` | Icon of selector |
|
||||
| `switch` | `Boolean` | Button default state |
|
||||
| `onSwitch` | `Function` | Button toggle event |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: 'PIP Mode',
|
||||
tooltip: 'OFF',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
const nextState = !item.switch;
|
||||
art.pip = nextState;
|
||||
|
||||
// Change the tooltip
|
||||
item.tooltip = nextState ? 'ON' : 'OFF';
|
||||
|
||||
// Change the switch state
|
||||
return nextState;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Use with selector',
|
||||
width: 200,
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: 'Setting 01',
|
||||
},
|
||||
{
|
||||
html: 'Setting 02',
|
||||
},
|
||||
{
|
||||
html: 'Setting 03',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Setting 04',
|
||||
icon: '',
|
||||
switch: true,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
],
|
||||
onSelect: function (item) {
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Add range slider
|
||||
|
||||
| Property | Type | Description |
|
||||
| --------- | ------------------- | ------------------------ |
|
||||
| `html` | `String`、`Element` | DOM elements of selector |
|
||||
| `icon` | `String`、`Element` | Icon of selector |
|
||||
| `range` | `Array` | Range default state |
|
||||
| `onRange` | `Function` | Range change event |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
```js
|
||||
const range = [5, 1, 10, 1];
|
||||
const value = range[0];
|
||||
const min = range[1];
|
||||
const max = range[2];
|
||||
const step = range[3];
|
||||
```
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: 'Range',
|
||||
tooltip: '5x',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
range: [5, 1, 10, 1],
|
||||
onRange: function (item) {
|
||||
// Change the tooltip
|
||||
return item.range + 'x';
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Use with selector',
|
||||
width: 240,
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: 'Setting 01',
|
||||
},
|
||||
{
|
||||
html: 'Setting 02',
|
||||
},
|
||||
{
|
||||
html: 'Setting 03',
|
||||
tooltip: '5x',
|
||||
range: [5, 1, 10, 1],
|
||||
onRange: function (item) {
|
||||
return item.range + 'x';
|
||||
},
|
||||
},
|
||||
{
|
||||
html: 'Setting 04',
|
||||
icon: '',
|
||||
tooltip: '5x',
|
||||
range: [5, 1, 10, 1],
|
||||
onRange: function (item) {
|
||||
return item.range + 'x';
|
||||
},
|
||||
},
|
||||
],
|
||||
onSelect: function (item) {
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: How to import types
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
Sometimes you lose `TypeScript` syntax prompt, then you can import types manually
|
||||
|
||||
|
||||
```js
|
||||
/**
|
||||
* @typedef { import("artplayer/types/artplayer") } Artplayer
|
||||
*/
|
||||
|
||||
/**
|
||||
* @type {Artplayer} - An Artplayer instance.
|
||||
*/
|
||||
const art1 = {};
|
||||
|
||||
/**
|
||||
* @param {Artplayer} art2 - An Artplayer instance.
|
||||
*/
|
||||
function getInstance(art2) {
|
||||
//
|
||||
}
|
||||
```
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
title: Use with React Portal
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
It is also very easy to use `React Components` in `layers`, `contextmenu`, `controls`. Handle more complex logic through `ReactDOM.createPortal`.
|
||||
|
||||
👉 [Click to open an online demo](https://codesandbox.io/s/artplayer-react-portal-5z32h)
|
||||
|
||||
```jsx
|
||||
import React, { useState, useEffect } from "react";
|
||||
import ReactDOM, { createPortal } from "react-dom";
|
||||
import Artplayer from "artplayer/examples/react/Artplayer";
|
||||
|
||||
function Timer({ time }) {
|
||||
return <div>{time}</div>;
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [art, setArt] = useState(null);
|
||||
const [time, setTime] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const update = () => setTime((time) => time + 1);
|
||||
setInterval(update, 1000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Artplayer
|
||||
option={{
|
||||
url: "https://artplayer.org/assets/sample/video.mp4",
|
||||
layers: [
|
||||
{
|
||||
html: "",
|
||||
name: "portal"
|
||||
}
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: "right",
|
||||
name: "portal",
|
||||
html: ""
|
||||
}
|
||||
]
|
||||
}}
|
||||
style={{
|
||||
width: "600px",
|
||||
height: "400px",
|
||||
margin: "60px auto 0"
|
||||
}}
|
||||
getInstance={(art) => {
|
||||
art.on("ready", () => setArt(art));
|
||||
}}
|
||||
/>
|
||||
{art ? createPortal(<Timer time={time} />, art.layers.portal) : null}
|
||||
{art ? createPortal(<Timer time={time} />, art.controls.portal) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "Common problems",
|
||||
"position": 8,
|
||||
"collapsed": true
|
||||
}
|
||||
@@ -1,777 +0,0 @@
|
||||
---
|
||||
title: 高级属性
|
||||
sidebar_position: 4
|
||||
slug: /zh-cn/advance
|
||||
---
|
||||
|
||||
:::tip 提示
|
||||
|
||||
这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读
|
||||
|
||||
:::
|
||||
|
||||
## id
|
||||
|
||||
- 类型: `Number`
|
||||
|
||||
播放器实例的一个自增编号
|
||||
|
||||
## option
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
播放器实例经合并后的参数对象
|
||||
|
||||
## isFocus
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否获得了焦点，如最后被用户点击过
|
||||
|
||||
## isInput
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否在 input 元素上获得了焦点，如正在输入弹幕
|
||||
|
||||
## isLock
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否已在移动端锁定
|
||||
|
||||
## isDestroy
|
||||
|
||||
- 类型: `Boolean`
|
||||
|
||||
播放器实例是否被销毁
|
||||
|
||||
## whitelist
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理白名单的对象
|
||||
|
||||
## template
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理播放器 `Html` 的对象
|
||||
|
||||
### query
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `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);
|
||||
});
|
||||
```
|
||||
|
||||
## events
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理事件发生的对象
|
||||
|
||||
## proxy
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
代理原生事件的方法，便于事件的管理与销毁
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var container = document.querySelector('.artplayer-app');
|
||||
var art = new Artplayer({
|
||||
container: container,
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.proxy(container, 'click', (event) => {
|
||||
console.info(event);
|
||||
});
|
||||
```
|
||||
|
||||
## storage
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理持久化存储的对象
|
||||
|
||||
播放器会自动添加一个名为 `artplayer_settings` 的 JSON 对象到的 `localStorage` 里
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ------- | ---------- | -------- |
|
||||
| `get` | `Function` | 获取值 |
|
||||
| `set` | `Function` | 设置值 |
|
||||
| `del` | `Function` | 删除值 |
|
||||
| `clear` | `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.clear();
|
||||
```
|
||||
|
||||
## icons
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理图标的对象
|
||||
|
||||
## i18n
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理多语言的对象
|
||||
|
||||
### get
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
方法 `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
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `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`
|
||||
|
||||
管理字幕的对象
|
||||
|
||||
### 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>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
encoding: 'utf-8',
|
||||
style: {
|
||||
color: '#03A9F4',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.style({
|
||||
color: 'red',
|
||||
'font-size': '40px',
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### url
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 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',
|
||||
style: {
|
||||
color: '#03A9F4',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
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',
|
||||
style: {
|
||||
color: 'red',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 20;
|
||||
setTimeout(() => {
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt?t=1', {
|
||||
name: 'The new subtitle',
|
||||
style: {
|
||||
color: 'green',
|
||||
'font-size': '24px',
|
||||
},
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
## info
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理统计信息的对象
|
||||
|
||||
## layers
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理业务层的对象
|
||||
|
||||
### show
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `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',
|
||||
},
|
||||
},
|
||||
{
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
left: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.layers.show = false;
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `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
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `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
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `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
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `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
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `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
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `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
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `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
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `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
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `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
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
属性 `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);
|
||||
});
|
||||
```
|
||||
|
||||
## plugins
|
||||
|
||||
- 类型: `Object`
|
||||
|
||||
管理插件的对象
|
||||
|
||||
### add
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
方法 `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());
|
||||
});
|
||||
```
|
||||
@@ -1,135 +0,0 @@
|
||||
---
|
||||
title: 静态属性
|
||||
sidebar_position: 5
|
||||
slug: /zh-cn/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)
|
||||
})
|
||||
```
|
||||
|
||||
## 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(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` 的提前渲染
|
||||
|
||||
<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([]))
|
||||
```
|
||||
@@ -1,332 +0,0 @@
|
||||
---
|
||||
title: 实例事件
|
||||
sidebar_position: 6
|
||||
slug: /zh-cn/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:error` | An error occurred while fetching the media data, or the type of the resource is not a supported media format. |
|
||||
| `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 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('video:play', (...args) => {
|
||||
console.info(args);
|
||||
});
|
||||
```
|
||||
|
||||
## 自定义事件
|
||||
|
||||
### 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;
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
|
||||
设置 `art.currentTime` 时不会触发 `seek` 事件
|
||||
|
||||
:::
|
||||
|
||||
### 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', (state) => {
|
||||
// state 为true时，鼠标从外面移进播放器
|
||||
// state 为false时，鼠标从播放器移出外面
|
||||
console.info(state);
|
||||
});
|
||||
```
|
||||
|
||||
### 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);
|
||||
});
|
||||
```
|
||||
@@ -1,217 +0,0 @@
|
||||
---
|
||||
title: 第三方库
|
||||
sidebar_position: 7
|
||||
slug: /zh-cn/libraries
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
- 通过选项 `customType` 可以很容易的集成第三方的视频解码库，存在多个解码器时，你可以把他们都添加到 `customType` 里，解码库太大时，你还可以使用 `js` 动态导入
|
||||
|
||||
- 播放器默认会解析出 `url` 选项的视频类型（如 `m3u8`, `flv`, `mpd`）, 假如无法解析出正确的视频类型时，你可以添加 `type` 选项指明视频类型
|
||||
|
||||
```js
|
||||
// 现在这个播放器可以同时播放: m3u8, flv, mpd
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.m3u8',
|
||||
type: 'm3u8', // 可选，但最好填上
|
||||
customType: {
|
||||
m3u8: async function (video, url) {
|
||||
const { default: Hls } = await import('hls.js');
|
||||
},
|
||||
flv: async function (video, url) {
|
||||
const { default: flvjs } = await import('flv.js');
|
||||
},
|
||||
mpd: async function (video, url) {
|
||||
const { default: dashjs } = await import('dash.js');
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 你可以切换新的视频地址
|
||||
art.url = '/assets/sample/video-new.m3u8';
|
||||
|
||||
// 你还可以切换新的视频类型
|
||||
art.type = 'flv';
|
||||
art.url = '/assets/sample/video.flv';
|
||||
|
||||
art.type = 'mpd';
|
||||
art.url = '/assets/sample/video.mpd';
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
|
||||
假如使用了 `customType`，那么切换地址前，要销毁上一个解码器实例，否则会引起内存泄漏
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
var hls = null;
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.m3u8',
|
||||
type: 'm3u8',
|
||||
customType: {
|
||||
m3u8: async function (video, url) {
|
||||
const { default: Hls } = await import('hls.js');
|
||||
|
||||
// 切换地址前，要销毁上一个解码器实例
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
}
|
||||
|
||||
hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 播放器销毁时，也要销毁解码器实例
|
||||
art.on('destroy', () => {
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
// 切换新的视频地址
|
||||
art.url = '/assets/sample/video-new.m3u8';
|
||||
```
|
||||
|
||||
## flv.js
|
||||
|
||||
- 主页: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
|
||||
|
||||
<div className="run-code" data-libs="https://unpkg.com/flv.js@1.6.2/dist/flv.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: '/assets/sample/video.flv',
|
||||
customType: {
|
||||
flv: function (video, url) {
|
||||
if (flvjs.isSupported()) {
|
||||
const flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: url,
|
||||
});
|
||||
flvPlayer.attachMediaElement(video);
|
||||
flvPlayer.load();
|
||||
} else {
|
||||
art.notice.show = '不支持播放格式：flv';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## hls.js
|
||||
|
||||
- 主页: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/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) {
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url;
|
||||
} else {
|
||||
art.notice.show = '不支持播放格式：m3u8';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 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://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.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://unpkg.com/shaka-player@3.3.1/dist/shaka-player.compiled.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://unpkg.com/webtorrent@1.8.1/index.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;
|
||||
});
|
||||
```
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "官方插件",
|
||||
"position": 7,
|
||||
"collapsed": true
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
title: Hls 画质插件
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
## 说明
|
||||
|
||||
通过该插件，可以添加 `Hls` 画质列表到控制栏或者设置面板里
|
||||
|
||||
## 演示
|
||||
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过 `npm` 安装：
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
### 通过 `yarn` 安装：
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
### 通过 `script` 安装：
|
||||
|
||||
```html
|
||||
<!-- 本地 -->
|
||||
<script src="path/to/artplayer-plugin-hls-quality.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
|
||||
```
|
||||
|
||||
然后你可以通过 `window.artplayerPluginHlsQuality` 访问到插件函数
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
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;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -1,231 +0,0 @@
|
||||
---
|
||||
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: [
|
||||
{
|
||||
default: true,
|
||||
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) {
|
||||
console.info(item, $dom);
|
||||
|
||||
art.subtitle.url = item.url;
|
||||
|
||||
return '你点击了 ' + item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### 切换滤镜
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/instagram.css@0.1.4/dist/instagram.min.css">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var instagramFilters = [
|
||||
{
|
||||
"html": "1977",
|
||||
"class": "filter-1977"
|
||||
},
|
||||
{
|
||||
"html": "Aden",
|
||||
"class": "filter-aden"
|
||||
},
|
||||
{
|
||||
"html": "Amaro",
|
||||
"class": "filter-amaro"
|
||||
},
|
||||
{
|
||||
"html": "Ashby",
|
||||
"class": "filter-ashby"
|
||||
},
|
||||
{
|
||||
"html": "Brannan",
|
||||
"class": "filter-brannan"
|
||||
},
|
||||
{
|
||||
"html": "Brooklyn",
|
||||
"class": "filter-brooklyn"
|
||||
},
|
||||
{
|
||||
"html": "Charmes",
|
||||
"class": "filter-charmes"
|
||||
},
|
||||
{
|
||||
"html": "Clarendon",
|
||||
"class": "filter-clarendon"
|
||||
},
|
||||
{
|
||||
"html": "Crema",
|
||||
"class": "filter-crema"
|
||||
},
|
||||
{
|
||||
"html": "Dogpatch",
|
||||
"class": "filter-dogpatch"
|
||||
},
|
||||
{
|
||||
"html": "Earlybird",
|
||||
"class": "filter-earlybird"
|
||||
},
|
||||
{
|
||||
"html": "Gingham",
|
||||
"class": "filter-gingham"
|
||||
},
|
||||
{
|
||||
"html": "Ginza",
|
||||
"class": "filter-ginza"
|
||||
},
|
||||
{
|
||||
"html": "Hefe",
|
||||
"class": "filter-hefe"
|
||||
},
|
||||
{
|
||||
"html": "Helena",
|
||||
"class": "filter-helena"
|
||||
},
|
||||
{
|
||||
"html": "Hudson",
|
||||
"class": "filter-hudson"
|
||||
},
|
||||
{
|
||||
"html": "Inkwell",
|
||||
"class": "filter-inkwell"
|
||||
},
|
||||
{
|
||||
"html": "Kelvin",
|
||||
"class": "filter-kelvin"
|
||||
},
|
||||
{
|
||||
"html": "Kuno",
|
||||
"class": "filter-juno"
|
||||
},
|
||||
{
|
||||
"html": "Lark",
|
||||
"class": "filter-lark"
|
||||
},
|
||||
{
|
||||
"html": "Lo-Fi",
|
||||
"class": "filter-lofi"
|
||||
},
|
||||
{
|
||||
"html": "Ludwig",
|
||||
"class": "filter-ludwig"
|
||||
},
|
||||
{
|
||||
"html": "Maven",
|
||||
"class": "filter-maven"
|
||||
},
|
||||
{
|
||||
"html": "Mayfair",
|
||||
"class": "filter-mayfair"
|
||||
},
|
||||
{
|
||||
"html": "Moon",
|
||||
"class": "filter-moon"
|
||||
},
|
||||
{
|
||||
"html": "Nashville",
|
||||
"class": "filter-nashville"
|
||||
},
|
||||
{
|
||||
"html": "Perpetua",
|
||||
"class": "filter-perpetua"
|
||||
},
|
||||
{
|
||||
"html": "Poprocket",
|
||||
"class": "filter-poprocket"
|
||||
},
|
||||
{
|
||||
"html": "Reyes",
|
||||
"class": "filter-reyes"
|
||||
},
|
||||
{
|
||||
"html": "Rise",
|
||||
"class": "filter-rise"
|
||||
},
|
||||
{
|
||||
"html": "Sierra",
|
||||
"class": "filter-sierra"
|
||||
},
|
||||
{
|
||||
"html": "Skyline",
|
||||
"class": "filter-skyline"
|
||||
},
|
||||
{
|
||||
"html": "Slumber",
|
||||
"class": "filter-slumber"
|
||||
},
|
||||
{
|
||||
"html": "Stinson",
|
||||
"class": "filter-stinson"
|
||||
},
|
||||
{
|
||||
"html": "Sutro",
|
||||
"class": "filter-sutro"
|
||||
},
|
||||
{
|
||||
"html": "Toaster",
|
||||
"class": "filter-toaster"
|
||||
},
|
||||
{
|
||||
"html": "Valencia",
|
||||
"class": "filter-valencia"
|
||||
},
|
||||
{
|
||||
"html": "Vesper",
|
||||
"class": "filter-vesper"
|
||||
},
|
||||
{
|
||||
"html": "Walden",
|
||||
"class": "filter-walden"
|
||||
},
|
||||
{
|
||||
"html": "Willow",
|
||||
"class": "filter-willow"
|
||||
},
|
||||
{
|
||||
"html": "X-Pro",
|
||||
"class": "filter-xpro-ii"
|
||||
}
|
||||
]
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Instagram Filters',
|
||||
selector: instagramFilters,
|
||||
onSelect: function (item) {
|
||||
art.template.$video.className = 'art-video ' + item.class;
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
title: 处理单个组件
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
当我们在`layers`、`contextmenu`、`controls`里添加自定义组件时，最好带上一个唯一的 `name` 属性，该属性不但会作为类名添加到 dom 元素里，还可以用于快速定位到组件。
|
||||
|
||||
这里有三种方法获取组件的dom元素：组件方法 `mounted`、实例方法 `query`、推荐通过 `name` 直接获取
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.layers.add({
|
||||
name: 'layer1',
|
||||
html: 'your-layer',
|
||||
mounted: function($layer1) {
|
||||
//
|
||||
}
|
||||
});
|
||||
|
||||
art.contextmenu.add({
|
||||
name: 'contextmenu1',
|
||||
html: 'your-contextmenu',
|
||||
mounted: function($contextmenu1) {
|
||||
//
|
||||
}
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'control1',
|
||||
html: 'your-control',
|
||||
position: 'right',
|
||||
mounted: function($control1) {
|
||||
//
|
||||
}
|
||||
});
|
||||
|
||||
// 使用查询 query 获取组件的DOM元素
|
||||
var $layer1 = art.query('.art-layer-layer1');
|
||||
var $contextmenu1 = art.query('.art-contextmenu-contextmenu1');
|
||||
var $control1 = art.query('.art-control-control1');
|
||||
|
||||
// 推荐使用 name 获取组件的DOM元素
|
||||
var $layer1 = art.layers['layer1'];
|
||||
var $contextmenu1 = art.contextmenu['contextmenu1'];
|
||||
var $control1 = art.controls['control1'];
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
|
||||
注意，你不能创建存在相同名字的组件
|
||||
|
||||
:::
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: 如何导入类型
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
有时你会丢失 `TypeScript` 的语法提示，这时候你可以手动导入类型
|
||||
|
||||
|
||||
```js
|
||||
/**
|
||||
* @typedef { import("artplayer/types/artplayer") } Artplayer
|
||||
*/
|
||||
|
||||
/**
|
||||
* @type {Artplayer} - 一个 Artplayer 实例
|
||||
*/
|
||||
const art1 = {};
|
||||
|
||||
/**
|
||||
* @param {Artplayer} art2 - 一个 Artplayer 实例
|
||||
*/
|
||||
function getInstance(art2) {
|
||||
//
|
||||
}
|
||||
```
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
title: 与 React Portal 使用
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
在 layers、contextmenu、controls 里使用 react 组件也是非常容易的事，通过 createPortal 处理更复杂的业务逻辑
|
||||
|
||||
👉 [点击打开在线演示](https://codesandbox.io/s/artplayer-react-portal-5z32h)
|
||||
|
||||
```jsx
|
||||
import React, { useState, useEffect } from "react";
|
||||
import ReactDOM, { createPortal } from "react-dom";
|
||||
import Artplayer from "artplayer/examples/react/Artplayer";
|
||||
|
||||
function Timer({ time }) {
|
||||
return <div>{time}</div>;
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [art, setArt] = useState(null);
|
||||
const [time, setTime] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const update = () => setTime((time) => time + 1);
|
||||
setInterval(update, 1000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Artplayer
|
||||
option={{
|
||||
url: "https://artplayer.org/assets/sample/video.mp4",
|
||||
layers: [
|
||||
{
|
||||
html: "",
|
||||
name: "portal"
|
||||
}
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: "right",
|
||||
name: "portal",
|
||||
html: ""
|
||||
}
|
||||
]
|
||||
}}
|
||||
style={{
|
||||
width: "600px",
|
||||
height: "400px",
|
||||
margin: "60px auto 0"
|
||||
}}
|
||||
getInstance={(art) => {
|
||||
art.on("ready", () => setArt(art));
|
||||
}}
|
||||
/>
|
||||
{art ? createPortal(<Timer time={time} />, art.layers.portal) : null}
|
||||
{art ? createPortal(<Timer time={time} />, art.controls.portal) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "常见问题",
|
||||
"position": 8,
|
||||
"collapsed": true
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
const lightCodeTheme = require('prism-react-renderer/themes/github');
|
||||
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
|
||||
|
||||
module.exports = {
|
||||
title: 'Artplayer.js',
|
||||
tagline: 'Public Product Api Document',
|
||||
url: 'https://artplayer.org',
|
||||
baseUrl: '/document/',
|
||||
onBrokenLinks: 'ignore',
|
||||
onBrokenMarkdownLinks: 'ignore',
|
||||
organizationName: 'zhw2590582',
|
||||
projectName: 'Artplayer',
|
||||
favicon: 'img/favicon.ico',
|
||||
clientModules: [require.resolve('./src/script/main.js')],
|
||||
themeConfig: {
|
||||
docs: {
|
||||
sidebar: {
|
||||
hideable: true,
|
||||
},
|
||||
},
|
||||
navbar: {
|
||||
title: 'Artplayer.js',
|
||||
logo: {
|
||||
alt: 'Artplayer.js',
|
||||
src: 'img/logo.png',
|
||||
href: 'https://artplayer.org/document',
|
||||
target: '_self',
|
||||
width: 28,
|
||||
height: 28,
|
||||
},
|
||||
items: [
|
||||
{
|
||||
href: 'https://artplayer.org',
|
||||
position: 'left',
|
||||
label: 'Online Editor',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/zhw2590582/ArtPlayer',
|
||||
position: 'left',
|
||||
label: 'Github',
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
label: 'QQ群: 320881312',
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
label: 'English',
|
||||
position: 'right',
|
||||
items: [
|
||||
{
|
||||
label: 'English',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
label: '中文',
|
||||
href: '/zh-cn/',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: 'dark',
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Artplayer.js, Inc. Built with Docusaurus.`,
|
||||
},
|
||||
prism: {
|
||||
theme: lightCodeTheme,
|
||||
darkTheme: darkCodeTheme,
|
||||
},
|
||||
},
|
||||
plugins: [require.resolve('docusaurus-lunr-search')],
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
docs: {
|
||||
path: './docs',
|
||||
routeBasePath: '/',
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
},
|
||||
blog: false,
|
||||
theme: {
|
||||
customCss: require.resolve('./src/css/custom.css'),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
-23021
File diff suppressed because it is too large.
Load diff
@@ -1,39 +0,0 @@
|
||||
{
|
||||
"name": "artplayer-document",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build && npm run copy",
|
||||
"copy": "rm -rf ../../docs/document && mv build ../../docs/document",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy",
|
||||
"clear": "docusaurus clear",
|
||||
"serve": "docusaurus serve",
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "2.0.0-beta.20",
|
||||
"@docusaurus/preset-classic": "2.0.0-beta.20",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"clsx": "^1.1.1",
|
||||
"docusaurus-lunr-search": "^2.1.15",
|
||||
"prism-react-renderer": "^1.3.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.5%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
module.exports = {
|
||||
en: [{ type: 'autogenerated', dirName: 'en' }],
|
||||
'zh-cn': [{ type: 'autogenerated', dirName: 'zh-cn' }],
|
||||
};
|
||||
@@ -1,71 +0,0 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: rgb(33, 175, 144);
|
||||
--ifm-color-primary-darker: rgb(31, 165, 136);
|
||||
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
||||
--ifm-color-primary-light: rgb(70, 203, 174);
|
||||
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
||||
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
||||
--ifm-code-font-size: 95%;
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
table {
|
||||
display: table;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
table th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
border-bottom-width: 1px !important;
|
||||
}
|
||||
|
||||
table p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.markdown li > p {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.markdown > p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.navbar__search {
|
||||
padding-left: 1rem;
|
||||
padding-left: var(--ifm-navbar-padding-horizontal);
|
||||
}
|
||||
|
||||
.run-code {
|
||||
display: inline-block;
|
||||
padding: 3px 7px;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
background-color: #25c2a0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.className === 'run-code') {
|
||||
event.preventDefault();
|
||||
const codeElement = event.target.nextElementSibling.querySelector('pre code');
|
||||
if (codeElement) {
|
||||
const libs = event.target.dataset.libs || '';
|
||||
const code = encodeURIComponent(codeElement.innerText);
|
||||
const env = window.location.host.includes('localhost') ? 'http://localhost:8081' : 'https://artplayer.org';
|
||||
const url = env + '/?libs=' + libs + '&code=' + code;
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,3 +0,0 @@
|
||||
if (typeof window !== 'undefined') {
|
||||
require('./bugfix');
|
||||
}
|
||||
@@ -1,521 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #3a3dd1;
|
||||
}
|
||||
/* Main category headers */
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
background-color: #4b54de;
|
||||
}
|
||||
/* Highlighted search terms */
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #3a33d1;
|
||||
}
|
||||
/* Highligted search terms in the main category headers */
|
||||
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
|
||||
background-color: #4d47d5;
|
||||
}
|
||||
/* Currently selected suggestion */
|
||||
.aa-cursor .algolia-docsearch-suggestion--content {
|
||||
color: #272296;
|
||||
}
|
||||
.aa-cursor .algolia-docsearch-suggestion {
|
||||
background: #ebebfb;
|
||||
}
|
||||
|
||||
/* For bigger screens, when displaying results in two columns */
|
||||
@media (min-width: 768px) {
|
||||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #7671df;
|
||||
}
|
||||
/* Left column, with secondary category header */
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
border-right-color: #7671df;
|
||||
color: #4e4726;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 32px !important;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.searchbox .algolia-autocomplete {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.searchbox__wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.searchbox__input {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: box-shadow 0.4s ease, background 0.4s ease;
|
||||
transition: box-shadow 0.4s ease, background 0.4s ease;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 0 0 1px #cccccc;
|
||||
background: #ffffff !important;
|
||||
padding: 0;
|
||||
padding-right: 26px;
|
||||
padding-left: 32px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
font-size: 12px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.searchbox__input::-webkit-search-decoration,
|
||||
.searchbox__input::-webkit-search-cancel-button,
|
||||
.searchbox__input::-webkit-search-results-button,
|
||||
.searchbox__input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.searchbox__input:hover {
|
||||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||||
}
|
||||
|
||||
.searchbox__input:focus,
|
||||
.searchbox__input:active {
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px #aaaaaa;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.searchbox__input::-webkit-input-placeholder {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.searchbox__input::-moz-placeholder {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.searchbox__input:-ms-input-placeholder {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.searchbox__input::placeholder {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.searchbox__submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 16px 0 0 16px;
|
||||
background-color: rgba(69, 142, 225, 0);
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
right: inherit;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.searchbox__submit::before {
|
||||
display: inline-block;
|
||||
margin-right: -4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.searchbox__submit:hover,
|
||||
.searchbox__submit:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.searchbox__submit:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.searchbox__submit svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
fill: #6d7e96;
|
||||
}
|
||||
|
||||
.searchbox__reset {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
fill: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.searchbox__reset.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.searchbox__reset:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.searchbox__reset svg {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.searchbox__input:valid ~ .searchbox__reset {
|
||||
display: block;
|
||||
-webkit-animation-name: sbx-reset-in;
|
||||
animation-name: sbx-reset-in;
|
||||
-webkit-animation-duration: 0.15s;
|
||||
animation-duration: 0.15s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sbx-reset-in {
|
||||
0% {
|
||||
-webkit-transform: translate3d(-20%, 0, 0);
|
||||
transform: translate3d(-20%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sbx-reset-in {
|
||||
0% {
|
||||
-webkit-transform: translate3d(-20%, 0, 0);
|
||||
transform: translate3d(-20%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #373940;
|
||||
z-index: 1000;
|
||||
top: -7px;
|
||||
border-top: 1px solid #373940;
|
||||
border-right: 1px solid #373940;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
|
||||
right: 0 !important;
|
||||
left: inherit !important;
|
||||
}
|
||||
|
||||
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
|
||||
right: 48px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
border-radius: 4px;
|
||||
margin: 6px 0 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
border: none;
|
||||
z-index: 999;
|
||||
max-width: 600px;
|
||||
min-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
z-index: 100;
|
||||
position: fixed !important;
|
||||
top: 50px !important;
|
||||
left: auto !important;
|
||||
right: 1rem !important;
|
||||
width: 600px;
|
||||
max-width: calc(100% - 2rem);
|
||||
max-height: calc(100% - 5rem);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu:before {
|
||||
right: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-cursor .algolia-docsearch-suggestion--wrapper {
|
||||
background: #f1f1f1;
|
||||
box-shadow: inset -2px 0 0 #61dafb;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
|
||||
background: #ffe564;
|
||||
padding: 0.1em 0.05em;
|
||||
}
|
||||
|
||||
.algolia-autocomplete
|
||||
.algolia-docsearch-suggestion--category-header
|
||||
.algolia-docsearch-suggestion--category-header-lvl0
|
||||
.algolia-docsearch-suggestion--highlight,
|
||||
.algolia-autocomplete
|
||||
.algolia-docsearch-suggestion--category-header
|
||||
.algolia-docsearch-suggestion--category-header-lvl1
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
|
||||
padding: 0 0 1px;
|
||||
background: inherit;
|
||||
box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--content {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
padding: 5.33333px 0 5.33333px 10.66667px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #ececec;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
|
||||
position: relative;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 700;
|
||||
background-color: #373940;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
float: left;
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
|
||||
float: left;
|
||||
width: 30%;
|
||||
display: none;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
padding: 5.33333px 10.66667px;
|
||||
color: #777;
|
||||
font-size: 0.9em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #ececec;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.algolia-autocomplete
|
||||
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
|
||||
.algolia-docsearch-suggestion--category-header,
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--title {
|
||||
margin-bottom: 4px;
|
||||
color: #02060c;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--text {
|
||||
display: block;
|
||||
line-height: 1.2em;
|
||||
font-size: 0.85em;
|
||||
color: #63676d;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--no-results {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
background-color: #373940;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
|
||||
color: #ffffff;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--no-results::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion code {
|
||||
padding: 1px 5px;
|
||||
font-size: 90%;
|
||||
border: none;
|
||||
color: #222222;
|
||||
background-color: #ebebeb;
|
||||
border-radius: 3px;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.algolia-autocomplete
|
||||
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.algolia-autocomplete
|
||||
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-footer {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
z-index: 2000;
|
||||
float: right;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-footer--logo {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 18'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-36.87%25' x2='129.43%25' y1='134.94%25' y2='-27.7%25'%3E%3Cstop stop-color='%252300AEFF' offset='0%25'/%3E%3Cstop stop-color='%25233369E7' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='url(%2523a)' d='M59.4.02h13.3a2.37 2.37 0 0 1 2.38 2.37V15.6a2.37 2.37 0 0 1-2.38 2.36H59.4a2.37 2.37 0 0 1-2.38-2.36V2.38A2.37 2.37 0 0 1 59.4.02z'/%3E%3Cpath fill='%2523FFF' d='M66.26 4.56c-2.82 0-5.1 2.27-5.1 5.08 0 2.8 2.28 5.07 5.1 5.07 2.8 0 5.1-2.26 5.1-5.07 0-2.8-2.28-5.07-5.1-5.07zm0 8.65c-2 0-3.6-1.6-3.6-3.56 0-1.97 1.6-3.58 3.6-3.58 1.98 0 3.6 1.6 3.6 3.58a3.58 3.58 0 0 1-3.6 3.57zm0-6.4v2.66c0 .07.08.13.15.1l2.4-1.24c.04-.02.06-.1.03-.14a2.96 2.96 0 0 0-2.46-1.5c-.06 0-.1.05-.1.1zm-3.33-1.96l-.3-.3a.78.78 0 0 0-1.12 0l-.36.36a.77.77 0 0 0 0 1.1l.3.3c.05.05.13.04.17 0 .2-.25.4-.5.6-.7.23-.23.46-.43.7-.6.07-.04.07-.1.03-.16zm5-.8V3.4a.78.78 0 0 0-.78-.78h-1.83a.78.78 0 0 0-.78.78v.63c0 .07.06.12.14.1a5.74 5.74 0 0 1 1.58-.22c.52 0 1.04.07 1.54.2a.1.1 0 0 0 .13-.1z'/%3E%3Cpath fill='%2523182359' d='M102.16 13.76c0 1.46-.37 2.52-1.12 3.2-.75.67-1.9 1-3.44 1-.56 0-1.74-.1-2.67-.3l.34-1.7c.78.17 1.82.2 2.36.2.86 0 1.48-.16 1.84-.5.37-.36.55-.88.55-1.57v-.35a6.37 6.37 0 0 1-.84.3 4.15 4.15 0 0 1-1.2.17 4.5 4.5 0 0 1-1.6-.28 3.38 3.38 0 0 1-1.26-.82 3.74 3.74 0 0 1-.8-1.35c-.2-.54-.3-1.5-.3-2.2 0-.67.1-1.5.3-2.06a3.92 3.92 0 0 1 .9-1.43 4.12 4.12 0 0 1 1.45-.92 5.3 5.3 0 0 1 1.94-.37c.7 0 1.35.1 1.97.2a15.86 15.86 0 0 1 1.6.33v8.46zm-5.95-4.2c0 .9.2 1.88.6 2.3.4.4.9.62 1.53.62.34 0 .66-.05.96-.15a2.75 2.75 0 0 0 .73-.33V6.7a8.53 8.53 0 0 0-1.42-.17c-.76-.02-1.36.3-1.77.8-.4.5-.62 1.4-.62 2.23zm16.13 0c0 .72-.1 1.26-.32 1.85a4.4 4.4 0 0 1-.9 1.53c-.38.42-.85.75-1.4.98-.54.24-1.4.37-1.8.37-.43 0-1.27-.13-1.8-.36a4.1 4.1 0 0 1-1.4-.97 4.5 4.5 0 0 1-.92-1.52 5.04 5.04 0 0 1-.33-1.84c0-.72.1-1.4.32-2 .22-.6.53-1.1.92-1.5.4-.43.86-.75 1.4-.98a4.55 4.55 0 0 1 1.78-.34 4.7 4.7 0 0 1 1.8.34c.54.23 1 .55 1.4.97.38.42.68.92.9 1.5.23.6.35 1.3.35 2zm-2.2 0c0-.92-.2-1.7-.6-2.22-.38-.54-.94-.8-1.64-.8-.72 0-1.27.26-1.67.8-.4.54-.58 1.3-.58 2.22 0 .93.2 1.56.6 2.1.38.54.94.8 1.64.8s1.25-.26 1.65-.8c.4-.55.6-1.17.6-2.1zm6.97 4.7c-3.5.02-3.5-2.8-3.5-3.27L113.57.92l2.15-.34v10c0 .25 0 1.87 1.37 1.88v1.8zm3.77 0h-2.15v-9.2l2.15-.33v9.54zM119.8 3.74c.7 0 1.3-.58 1.3-1.3 0-.7-.58-1.3-1.3-1.3-.73 0-1.3.6-1.3 1.3 0 .72.58 1.3 1.3 1.3zm6.43 1c.7 0 1.3.1 1.78.27.5.18.88.42 1.17.73.28.3.5.74.6 1.18.13.46.2.95.2 1.5v5.47a25.24 25.24 0 0 1-1.5.25c-.67.1-1.42.15-2.25.15a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.37-.27-.9-.27-1.44 0-.52.1-.85.3-1.2.2-.37.48-.67.83-.9a3.6 3.6 0 0 1 1.23-.5 7.07 7.07 0 0 1 2.2-.1l.83.16v-.35c0-.25-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.18-.34-.3-.58-.4a2.54 2.54 0 0 0-.92-.17c-.5 0-.94.06-1.35.13-.4.08-.75.16-1 .25l-.27-1.74c.27-.1.67-.18 1.2-.28a9.34 9.34 0 0 1 1.65-.14zm.18 7.74c.66 0 1.15-.04 1.5-.1V10.2a5.1 5.1 0 0 0-2-.1c-.23.03-.45.1-.64.2a1.17 1.17 0 0 0-.47.38c-.13.17-.18.26-.18.52 0 .5.17.8.5.98.32.2.74.3 1.3.3zM84.1 4.8c.72 0 1.3.08 1.8.26.48.17.87.42 1.15.73.3.3.5.72.6 1.17.14.45.2.94.2 1.47v5.48a25.24 25.24 0 0 1-1.5.26c-.67.1-1.42.14-2.25.14a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.38-.27-.9-.27-1.44 0-.53.1-.86.3-1.22.2-.36.5-.65.84-.88a3.6 3.6 0 0 1 1.24-.5 7.07 7.07 0 0 1 2.2-.1c.26.03.54.08.84.15v-.35c0-.24-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.17-.34-.3-.58-.4a2.54 2.54 0 0 0-.9-.15c-.5 0-.96.05-1.37.12-.4.07-.75.15-1 .24l-.26-1.75c.27-.08.67-.17 1.18-.26a8.9 8.9 0 0 1 1.66-.15zm.2 7.73c.65 0 1.14-.04 1.48-.1v-2.17a5.1 5.1 0 0 0-1.98-.1c-.24.03-.46.1-.65.18a1.17 1.17 0 0 0-.47.4c-.12.17-.17.26-.17.52 0 .5.18.8.5.98.32.2.75.3 1.3.3zm8.68 1.74c-3.5 0-3.5-2.82-3.5-3.28L89.45.92 91.6.6v10c0 .25 0 1.87 1.38 1.88v1.8z'/%3E%3Cpath fill='%25231D3657' d='M5.03 11.03c0 .7-.26 1.24-.76 1.64-.5.4-1.2.6-2.1.6-.88 0-1.6-.14-2.17-.42v-1.2c.36.16.74.3 1.14.38.4.1.78.15 1.13.15.5 0 .88-.1 1.12-.3a.94.94 0 0 0 .35-.77.98.98 0 0 0-.33-.74c-.22-.2-.68-.44-1.37-.72-.72-.3-1.22-.62-1.52-1C.23 8.27.1 7.82.1 7.3c0-.65.22-1.17.7-1.55.46-.37 1.08-.56 1.86-.56.76 0 1.5.16 2.25.48l-.4 1.05c-.7-.3-1.32-.44-1.87-.44-.4 0-.73.08-.94.26a.9.9 0 0 0-.33.72c0 .2.04.38.12.52.08.15.22.3.42.4.2.14.55.3 1.06.52.58.24 1 .47 1.27.67.27.2.47.44.6.7.12.26.18.57.18.92zM9 13.27c-.92 0-1.64-.27-2.16-.8-.52-.55-.78-1.3-.78-2.24 0-.97.24-1.73.72-2.3.5-.54 1.15-.82 2-.82.78 0 1.4.25 1.85.72.46.48.7 1.14.7 1.97v.67H7.35c0 .58.17 1.02.46 1.33.3.3.7.47 1.24.47.36 0 .68-.04.98-.1a5.1 5.1 0 0 0 .98-.33v1.02a3.87 3.87 0 0 1-.94.32 5.72 5.72 0 0 1-1.08.1zm-.22-5.2c-.4 0-.73.12-.97.38s-.37.62-.42 1.1h2.7c0-.48-.13-.85-.36-1.1-.23-.26-.54-.38-.94-.38zm7.7 5.1l-.26-.84h-.05c-.28.36-.57.6-.86.74-.28.13-.65.2-1.1.2-.6 0-1.05-.16-1.38-.48-.32-.32-.5-.77-.5-1.34 0-.62.24-1.08.7-1.4.45-.Line truncated
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
overflow: hidden;
|
||||
text-indent: -9000px;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, { useRef, useCallback } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { useHistory } from '@docusaurus/router';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import { usePluginData } from '@docusaurus/useGlobalData';
|
||||
const Search = (props) => {
|
||||
const initialized = useRef(false);
|
||||
const searchBarRef = useRef(null);
|
||||
const history = useHistory();
|
||||
const { siteConfig = {} } = useDocusaurusContext();
|
||||
const { baseUrl } = siteConfig;
|
||||
const initAlgolia = (searchDocs, searchIndex, DocSearch) => {
|
||||
new DocSearch({
|
||||
searchDocs,
|
||||
searchIndex,
|
||||
inputSelector: '#search_input_react',
|
||||
// Override algolia's default selection event, allowing us to do client-side
|
||||
// navigation and avoiding a full page refresh.
|
||||
handleSelected: (_input, _event, suggestion) => {
|
||||
const url = baseUrl + suggestion.url;
|
||||
// Use an anchor tag to parse the absolute url into a relative url
|
||||
// Alternatively, we can use new URL(suggestion.url) but its not supported in IE
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
// Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
|
||||
// So, we can safely remove it. See https://github.com/facebook/docusaurus/issues/1828 for more details.
|
||||
|
||||
history.push(url);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const pluginData = usePluginData('docusaurus-lunr-search');
|
||||
const getSearchDoc = () =>
|
||||
process.env.NODE_ENV === 'production'
|
||||
? fetch(`${baseUrl}${pluginData.fileNames.searchDoc}`).then((content) => content.json())
|
||||
: Promise.resolve([]);
|
||||
|
||||
const getLunrIndex = () =>
|
||||
process.env.NODE_ENV === 'production'
|
||||
? fetch(`${baseUrl}${pluginData.fileNames.lunrIndex}`).then((content) => content.json())
|
||||
: Promise.resolve([]);
|
||||
|
||||
const loadAlgolia = () => {
|
||||
if (!initialized.current) {
|
||||
Promise.all([getSearchDoc(), getLunrIndex(), import('./lib/DocSearch'), import('./algolia.css')]).then(
|
||||
([searchDocs, searchIndex, { default: DocSearch }]) => {
|
||||
if (searchDocs.length === 0) {
|
||||
return;
|
||||
}
|
||||
initAlgolia(searchDocs, searchIndex, DocSearch);
|
||||
},
|
||||
);
|
||||
initialized.current = true;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSearchIconClick = useCallback(
|
||||
(e) => {
|
||||
if (!searchBarRef.current.contains(e.target)) {
|
||||
searchBarRef.current.focus();
|
||||
}
|
||||
props.handleSearchBarToggle && props.handleSearchBarToggle(!props.isSearchBarExpanded);
|
||||
},
|
||||
[props.isSearchBarExpanded],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="navbar__search" key="search-box">
|
||||
<span
|
||||
aria-label="expand searchbar"
|
||||
role="button"
|
||||
className={classnames('search-icon', {
|
||||
'search-icon-hidden': props.isSearchBarExpanded,
|
||||
})}
|
||||
onClick={toggleSearchIconClick}
|
||||
onKeyDown={toggleSearchIconClick}
|
||||
tabIndex={0}
|
||||
/>
|
||||
<input
|
||||
id="search_input_react"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
className={classnames(
|
||||
'navbar__search-input',
|
||||
{ 'search-bar-expanded': props.isSearchBarExpanded },
|
||||
{ 'search-bar': !props.isSearchBarExpanded },
|
||||
)}
|
||||
onClick={loadAlgolia}
|
||||
onMouseOver={loadAlgolia}
|
||||
onFocus={toggleSearchIconClick}
|
||||
onBlur={toggleSearchIconClick}
|
||||
ref={searchBarRef}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
@@ -1,268 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import Hogan from 'hogan.js';
|
||||
import LunrSearchAdapter from './lunar-search';
|
||||
import autocomplete from 'autocomplete.js';
|
||||
import templates from './templates';
|
||||
import utils from './utils';
|
||||
import $ from 'autocomplete.js/zepto';
|
||||
|
||||
/**
|
||||
* Adds an autocomplete dropdown to an input field
|
||||
* @function DocSearch
|
||||
* @param {Object} options.searchDocs Search Documents
|
||||
* @param {Object} options.searchIndex Lune searchIndexes
|
||||
* @param {string} options.inputSelector CSS selector that targets the input
|
||||
* value.
|
||||
* @param {Object} [options.autocompleteOptions] Options to pass to the underlying autocomplete instance
|
||||
* @return {Object}
|
||||
*/
|
||||
class DocSearch {
|
||||
constructor({
|
||||
searchDocs,
|
||||
searchIndex,
|
||||
inputSelector,
|
||||
debug = false,
|
||||
queryDataCallback = null,
|
||||
autocompleteOptions = {
|
||||
debug: false,
|
||||
hint: false,
|
||||
autoselect: true,
|
||||
},
|
||||
transformData = false,
|
||||
queryHook = false,
|
||||
handleSelected = false,
|
||||
enhancedSearchInput = false,
|
||||
layout = 'collumns',
|
||||
}) {
|
||||
this.input = DocSearch.getInputFromSelector(inputSelector);
|
||||
this.queryDataCallback = queryDataCallback || null;
|
||||
const autocompleteOptionsDebug =
|
||||
autocompleteOptions && autocompleteOptions.debug ? autocompleteOptions.debug : false;
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
autocompleteOptions.debug = debug || autocompleteOptionsDebug;
|
||||
this.autocompleteOptions = autocompleteOptions;
|
||||
this.autocompleteOptions.cssClasses = this.autocompleteOptions.cssClasses || {};
|
||||
this.autocompleteOptions.cssClasses.prefix = this.autocompleteOptions.cssClasses.prefix || 'ds';
|
||||
const inputAriaLabel = this.input && typeof this.input.attr === 'function' && this.input.attr('aria-label');
|
||||
this.autocompleteOptions.ariaLabel = this.autocompleteOptions.ariaLabel || inputAriaLabel || 'search input';
|
||||
|
||||
this.isSimpleLayout = layout === 'simple';
|
||||
|
||||
this.client = new LunrSearchAdapter(searchDocs, searchIndex);
|
||||
|
||||
if (enhancedSearchInput) {
|
||||
this.input = DocSearch.injectSearchBox(this.input);
|
||||
}
|
||||
this.autocomplete = autocomplete(this.input, autocompleteOptions, [
|
||||
{
|
||||
source: this.getAutocompleteSource(transformData, queryHook),
|
||||
templates: {
|
||||
suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
|
||||
footer: templates.footer,
|
||||
empty: DocSearch.getEmptyTemplate(),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
const customHandleSelected = handleSelected;
|
||||
this.handleSelected = customHandleSelected || this.handleSelected;
|
||||
|
||||
// We prevent default link clicking if a custom handleSelected is defined
|
||||
if (customHandleSelected) {
|
||||
$('.algolia-autocomplete').on('click', '.ds-suggestions a', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
this.autocomplete.on('autocomplete:selected', this.handleSelected.bind(null, this.autocomplete.autocomplete));
|
||||
|
||||
this.autocomplete.on('autocomplete:shown', this.handleShown.bind(null, this.input));
|
||||
|
||||
if (enhancedSearchInput) {
|
||||
DocSearch.bindSearchBoxEvent();
|
||||
}
|
||||
}
|
||||
|
||||
static injectSearchBox(input) {
|
||||
input.before(templates.searchBox);
|
||||
const newInput = input.prev().prev().find('input');
|
||||
input.remove();
|
||||
return newInput;
|
||||
}
|
||||
|
||||
static bindSearchBoxEvent() {
|
||||
$('.searchbox [type="reset"]').on('click', function () {
|
||||
$('input#docsearch').focus();
|
||||
$(this).addClass('hide');
|
||||
autocomplete.autocomplete.setVal('');
|
||||
});
|
||||
|
||||
$('input#docsearch').on('keyup', () => {
|
||||
const searchbox = document.querySelector('input#docsearch');
|
||||
const reset = document.querySelector('.searchbox [type="reset"]');
|
||||
reset.className = 'searchbox__reset';
|
||||
if (searchbox.value.length === 0) {
|
||||
reset.className += ' hide';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the matching input from a CSS selector, null if none matches
|
||||
* @function getInputFromSelector
|
||||
* @param {string} selector CSS selector that matches the search
|
||||
* input of the page
|
||||
* @returns {void}
|
||||
*/
|
||||
static getInputFromSelector(selector) {
|
||||
const input = $(selector).filter('input');
|
||||
return input.length ? $(input[0]) : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the `source` method to be passed to autocomplete.js. It will query
|
||||
* the Algolia index and call the callbacks with the formatted hits.
|
||||
* @function getAutocompleteSource
|
||||
* @param {function} transformData An optional function to transform the hits
|
||||
* @param {function} queryHook An optional function to transform the query
|
||||
* @returns {function} Method to be passed as the `source` option of
|
||||
* autocomplete
|
||||
*/
|
||||
getAutocompleteSource(transformData, queryHook) {
|
||||
return (query, callback) => {
|
||||
if (queryHook) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
query = queryHook(query) || query;
|
||||
}
|
||||
this.client.search(query).then((hits) => {
|
||||
if (this.queryDataCallback && typeof this.queryDataCallback == 'function') {
|
||||
this.queryDataCallback(hits);
|
||||
}
|
||||
if (transformData) {
|
||||
hits = transformData(hits) || hits;
|
||||
}
|
||||
callback(DocSearch.formatHits(hits));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Given a list of hits returned by the API, will reformat them to be used in
|
||||
// a Hogan template
|
||||
static formatHits(receivedHits) {
|
||||
const clonedHits = utils.deepClone(receivedHits);
|
||||
const hits = clonedHits.map((hit) => {
|
||||
if (hit._highlightResult) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
hit._highlightResult = utils.mergeKeyWithParent(hit._highlightResult, 'hierarchy');
|
||||
}
|
||||
return utils.mergeKeyWithParent(hit, 'hierarchy');
|
||||
});
|
||||
|
||||
// Group hits by category / subcategory
|
||||
let groupedHits = utils.groupBy(hits, 'lvl0');
|
||||
$.each(groupedHits, (level, collection) => {
|
||||
const groupedHitsByLvl1 = utils.groupBy(collection, 'lvl1');
|
||||
const flattenedHits = utils.flattenAndFlagFirst(groupedHitsByLvl1, 'isSubCategoryHeader');
|
||||
groupedHits[level] = flattenedHits;
|
||||
});
|
||||
groupedHits = utils.flattenAndFlagFirst(groupedHits, 'isCategoryHeader');
|
||||
|
||||
// Translate hits into smaller objects to be send to the template
|
||||
return groupedHits.map((hit) => {
|
||||
const url = DocSearch.formatURL(hit);
|
||||
const category = utils.getHighlightedValue(hit, 'lvl0');
|
||||
const subcategory = utils.getHighlightedValue(hit, 'lvl1') || category;
|
||||
const displayTitle = utils
|
||||
.compact([
|
||||
utils.getHighlightedValue(hit, 'lvl2') || subcategory,
|
||||
utils.getHighlightedValue(hit, 'lvl3'),
|
||||
utils.getHighlightedValue(hit, 'lvl4'),
|
||||
utils.getHighlightedValue(hit, 'lvl5'),
|
||||
utils.getHighlightedValue(hit, 'lvl6'),
|
||||
])
|
||||
.join('<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>');
|
||||
const text = utils.getSnippetedValue(hit, 'content');
|
||||
const isTextOrSubcategoryNonEmpty =
|
||||
(subcategory && subcategory !== '') || (displayTitle && displayTitle !== '');
|
||||
const isLvl1EmptyOrDuplicate = !subcategory || subcategory === '' || subcategory === category;
|
||||
const isLvl2 = displayTitle && displayTitle !== '' && displayTitle !== subcategory;
|
||||
const isLvl1 = !isLvl2 && subcategory && subcategory !== '' && subcategory !== category;
|
||||
const isLvl0 = !isLvl1 && !isLvl2;
|
||||
|
||||
return {
|
||||
isLvl0,
|
||||
isLvl1,
|
||||
isLvl2,
|
||||
isLvl1EmptyOrDuplicate,
|
||||
isCategoryHeader: hit.isCategoryHeader,
|
||||
isSubCategoryHeader: hit.isSubCategoryHeader,
|
||||
isTextOrSubcategoryNonEmpty,
|
||||
category,
|
||||
subcategory,
|
||||
title: displayTitle,
|
||||
text,
|
||||
url,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
static formatURL(hit) {
|
||||
const { url, anchor } = hit;
|
||||
if (url) {
|
||||
const containsAnchor = url.indexOf('#') !== -1;
|
||||
if (containsAnchor) return url;
|
||||
else if (anchor) return `${hit.url}#${hit.anchor}`;
|
||||
return url;
|
||||
} else if (anchor) return `#${hit.anchor}`;
|
||||
/* eslint-disable */
|
||||
console.warn('no anchor nor url for : ', JSON.stringify(hit));
|
||||
/* eslint-enable */
|
||||
return null;
|
||||
}
|
||||
|
||||
static getEmptyTemplate() {
|
||||
return (args) => Hogan.compile(templates.empty).render(args);
|
||||
}
|
||||
|
||||
static getSuggestionTemplate(isSimpleLayout) {
|
||||
const stringTemplate = isSimpleLayout ? templates.suggestionSimple : templates.suggestion;
|
||||
const template = Hogan.compile(stringTemplate);
|
||||
return (suggestion) => template.render(suggestion);
|
||||
}
|
||||
|
||||
handleSelected(input, event, suggestion, datasetNumber, context = {}) {
|
||||
// Do nothing if click on the suggestion, as it's already a <a href>, the
|
||||
// browser will take care of it. This allow Ctrl-Clicking on results and not
|
||||
// having the main window being redirected as well
|
||||
if (context.selectionMethod === 'click') {
|
||||
return;
|
||||
}
|
||||
|
||||
input.setVal('');
|
||||
window.location.assign(suggestion.url);
|
||||
}
|
||||
|
||||
handleShown(input) {
|
||||
const middleOfInput = input.offset().left + input.width() / 2;
|
||||
let middleOfWindow = $(document).width() / 2;
|
||||
|
||||
if (isNaN(middleOfWindow)) {
|
||||
middleOfWindow = 900;
|
||||
}
|
||||
|
||||
const alignClass =
|
||||
middleOfInput - middleOfWindow >= 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
|
||||
const otherAlignClass =
|
||||
middleOfInput - middleOfWindow < 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
|
||||
const autocompleteWrapper = $('.algolia-autocomplete');
|
||||
if (!autocompleteWrapper.hasClass(alignClass)) {
|
||||
autocompleteWrapper.addClass(alignClass);
|
||||
}
|
||||
|
||||
if (autocompleteWrapper.hasClass(otherAlignClass)) {
|
||||
autocompleteWrapper.removeClass(otherAlignClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DocSearch;
|
||||
@@ -1,162 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import lunr from '@generated/lunr.client';
|
||||
lunr.tokenizer.separator = /[\s\-/]+/;
|
||||
|
||||
class LunrSearchAdapter {
|
||||
constructor(searchDocs, searchIndex) {
|
||||
this.searchDocs = searchDocs;
|
||||
this.lunrIndex = lunr.Index.load(searchIndex);
|
||||
}
|
||||
|
||||
getLunrResult(input) {
|
||||
return this.lunrIndex.query(function (query) {
|
||||
const tokens = lunr.tokenizer(input);
|
||||
query.term(tokens, {
|
||||
boost: 10,
|
||||
});
|
||||
query.term(tokens, {
|
||||
wildcard: lunr.Query.wildcard.TRAILING,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getHit(doc, formattedTitle, formattedContent) {
|
||||
return {
|
||||
hierarchy: {
|
||||
lvl0: doc.pageTitle || doc.title,
|
||||
lvl1: doc.type === 0 ? null : doc.title,
|
||||
},
|
||||
url: doc.url,
|
||||
_snippetResult: formattedContent
|
||||
? {
|
||||
content: {
|
||||
value: formattedContent,
|
||||
matchLevel: 'full',
|
||||
},
|
||||
}
|
||||
: null,
|
||||
_highlightResult: {
|
||||
hierarchy: {
|
||||
lvl0: {
|
||||
value: doc.type === 0 ? formattedTitle || doc.title : doc.pageTitle,
|
||||
},
|
||||
lvl1:
|
||||
doc.type === 0
|
||||
? null
|
||||
: {
|
||||
value: formattedTitle || doc.title,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
getTitleHit(doc, position, length) {
|
||||
const start = position[0];
|
||||
const end = position[0] + length;
|
||||
let formattedTitle =
|
||||
doc.title.substring(0, start) +
|
||||
'<span class="algolia-docsearch-suggestion--highlight">' +
|
||||
doc.title.substring(start, end) +
|
||||
'</span>' +
|
||||
doc.title.substring(end, doc.title.length);
|
||||
return this.getHit(doc, formattedTitle);
|
||||
}
|
||||
|
||||
getKeywordHit(doc, position, length) {
|
||||
const start = position[0];
|
||||
const end = position[0] + length;
|
||||
let formattedTitle =
|
||||
doc.title +
|
||||
'<br /><i>Keywords: ' +
|
||||
doc.keywords.substring(0, start) +
|
||||
'<span class="algolia-docsearch-suggestion--highlight">' +
|
||||
doc.keywords.substring(start, end) +
|
||||
'</span>' +
|
||||
doc.keywords.substring(end, doc.keywords.length) +
|
||||
'</i>';
|
||||
return this.getHit(doc, formattedTitle);
|
||||
}
|
||||
|
||||
getContentHit(doc, position) {
|
||||
const start = position[0];
|
||||
const end = position[0] + position[1];
|
||||
let previewStart = start;
|
||||
let previewEnd = end;
|
||||
let ellipsesBefore = true;
|
||||
let ellipsesAfter = true;
|
||||
for (let k = 0; k < 3; k++) {
|
||||
const nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
|
||||
const nextDot = doc.content.lastIndexOf('.', previewStart - 2);
|
||||
if (nextDot > 0 && nextDot > nextSpace) {
|
||||
previewStart = nextDot + 1;
|
||||
ellipsesBefore = false;
|
||||
break;
|
||||
}
|
||||
if (nextSpace < 0) {
|
||||
previewStart = 0;
|
||||
ellipsesBefore = false;
|
||||
break;
|
||||
}
|
||||
previewStart = nextSpace + 1;
|
||||
}
|
||||
for (let k = 0; k < 10; k++) {
|
||||
const nextSpace = doc.content.indexOf(' ', previewEnd + 1);
|
||||
const nextDot = doc.content.indexOf('.', previewEnd + 1);
|
||||
if (nextDot > 0 && nextDot < nextSpace) {
|
||||
previewEnd = nextDot;
|
||||
ellipsesAfter = false;
|
||||
break;
|
||||
}
|
||||
if (nextSpace < 0) {
|
||||
previewEnd = doc.content.length;
|
||||
ellipsesAfter = false;
|
||||
break;
|
||||
}
|
||||
previewEnd = nextSpace;
|
||||
}
|
||||
let preview = doc.content.substring(previewStart, start);
|
||||
if (ellipsesBefore) {
|
||||
preview = '... ' + preview;
|
||||
}
|
||||
preview +=
|
||||
'<span class="algolia-docsearch-suggestion--highlight">' + doc.content.substring(start, end) + '</span>';
|
||||
preview += doc.content.substring(end, previewEnd);
|
||||
if (ellipsesAfter) {
|
||||
preview += ' ...';
|
||||
}
|
||||
return this.getHit(doc, null, preview);
|
||||
}
|
||||
search(input) {
|
||||
return new Promise((resolve, rej) => {
|
||||
const results = this.getLunrResult(input);
|
||||
const hits = [];
|
||||
results.length > 5 && (results.length = 5);
|
||||
this.titleHitsRes = [];
|
||||
this.contentHitsRes = [];
|
||||
results.forEach((result) => {
|
||||
const doc = this.searchDocs[result.ref];
|
||||
const { metadata } = result.matchData;
|
||||
for (let i in metadata) {
|
||||
if (metadata[i].title) {
|
||||
if (!this.titleHitsRes.includes(result.ref)) {
|
||||
const position = metadata[i].title.position[0];
|
||||
hits.push(this.getTitleHit(doc, position, input.length));
|
||||
this.titleHitsRes.push(result.ref);
|
||||
}
|
||||
} else if (metadata[i].content) {
|
||||
const position = metadata[i].content.position[0];
|
||||
hits.push(this.getContentHit(doc, position));
|
||||
} else if (metadata[i].keywords) {
|
||||
const position = metadata[i].keywords.position[0];
|
||||
hits.push(this.getKeywordHit(doc, position, input.length));
|
||||
this.titleHitsRes.push(result.ref);
|
||||
}
|
||||
}
|
||||
});
|
||||
hits.length > 5 && (hits.length = 5);
|
||||
resolve(hits);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default LunrSearchAdapter;
|
||||
@@ -1,115 +0,0 @@
|
||||
/* eslint-disable */
|
||||
const prefix = 'algolia-docsearch';
|
||||
const suggestionPrefix = `${prefix}-suggestion`;
|
||||
const footerPrefix = `${prefix}-footer`;
|
||||
|
||||
/* eslint-disable max-len */
|
||||
|
||||
const templates = {
|
||||
suggestion: `
|
||||
<a class="${suggestionPrefix}
|
||||
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
|
||||
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
|
||||
"
|
||||
aria-label="Link to the result"
|
||||
href="{{{url}}}"
|
||||
>
|
||||
<div class="${suggestionPrefix}--category-header">
|
||||
<span class="${suggestionPrefix}--category-header-lvl0">{{{category}}}</span>
|
||||
</div>
|
||||
<div class="${suggestionPrefix}--wrapper">
|
||||
<div class="${suggestionPrefix}--subcategory-column">
|
||||
<span class="${suggestionPrefix}--subcategory-column-text">{{{subcategory}}}</span>
|
||||
</div>
|
||||
{{#isTextOrSubcategoryNonEmpty}}
|
||||
<div class="${suggestionPrefix}--content">
|
||||
<div class="${suggestionPrefix}--subcategory-inline">{{{subcategory}}}</div>
|
||||
<div class="${suggestionPrefix}--title">{{{title}}}</div>
|
||||
{{#text}}<div class="${suggestionPrefix}--text">{{{text}}}</div>{{/text}}
|
||||
</div>
|
||||
{{/isTextOrSubcategoryNonEmpty}}
|
||||
</div>
|
||||
</a>
|
||||
`,
|
||||
suggestionSimple: `
|
||||
<div class="${suggestionPrefix}
|
||||
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
|
||||
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
|
||||
suggestion-layout-simple
|
||||
">
|
||||
<div class="${suggestionPrefix}--category-header">
|
||||
{{^isLvl0}}
|
||||
<span class="${suggestionPrefix}--category-header-lvl0 ${suggestionPrefix}--category-header-item">{{{category}}}</span>
|
||||
{{^isLvl1}}
|
||||
{{^isLvl1EmptyOrDuplicate}}
|
||||
<span class="${suggestionPrefix}--category-header-lvl1 ${suggestionPrefix}--category-header-item">
|
||||
{{{subcategory}}}
|
||||
</span>
|
||||
{{/isLvl1EmptyOrDuplicate}}
|
||||
{{/isLvl1}}
|
||||
{{/isLvl0}}
|
||||
<div class="${suggestionPrefix}--title ${suggestionPrefix}--category-header-item">
|
||||
{{#isLvl2}}
|
||||
{{{title}}}
|
||||
{{/isLvl2}}
|
||||
{{#isLvl1}}
|
||||
{{{subcategory}}}
|
||||
{{/isLvl1}}
|
||||
{{#isLvl0}}
|
||||
{{{category}}}
|
||||
{{/isLvl0}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="${suggestionPrefix}--wrapper">
|
||||
{{#text}}
|
||||
<div class="${suggestionPrefix}--content">
|
||||
<div class="${suggestionPrefix}--text">{{{text}}}</div>
|
||||
</div>
|
||||
{{/text}}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
footer: `
|
||||
<div class="${footerPrefix}">
|
||||
</div>
|
||||
`,
|
||||
empty: `
|
||||
<div class="${suggestionPrefix}">
|
||||
<div class="${suggestionPrefix}--wrapper">
|
||||
<div class="${suggestionPrefix}--content ${suggestionPrefix}--no-results">
|
||||
<div class="${suggestionPrefix}--title">
|
||||
<div class="${suggestionPrefix}--text">
|
||||
No results found for query <b>"{{query}}"</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
searchBox: `
|
||||
<form novalidate="novalidate" onsubmit="return false;" class="searchbox">
|
||||
<div role="search" class="searchbox__wrapper">
|
||||
<input id="docsearch" type="search" name="search" placeholder="Search the docs" autocomplete="off" required="required" class="searchbox__input"/>
|
||||
<button type="submit" title="Submit your search query." class="searchbox__submit" >
|
||||
<svg width=12 height=12 role="img" aria-label="Search">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="reset" title="Clear the search query." class="searchbox__reset hide">
|
||||
<svg width=12 height=12 role="img" aria-label="Reset">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="svg-icons" style="height: 0; width: 0; position: absolute; visibility: hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="sbx-icon-clear-3" viewBox="0 0 40 40"><path d="M16.228 20L1.886 5.657 0 3.772 3.772 0l1.885 1.886L20 16.228 34.343 1.886 36.228 0 40 3.772l-1.886 1.885L23.772 20l14.342 14.343L40 36.228 36.228 40l-1.885-1.886L20 23.772 5.657 38.114 3.772 40 0 36.228l1.886-1.885L16.228 20z" fill-rule="evenodd"></symbol>
|
||||
<symbol id="sbx-icon-search-13" viewBox="0 0 40 40"><path d="M26.806 29.012a16.312 16.312 0 0 1-10.427 3.746C7.332 32.758 0 25.425 0 16.378 0 7.334 7.333 0 16.38 0c9.045 0 16.378 7.333 16.378 16.38 0 3.96-1.406 7.593-3.746 10.426L39.547 37.34c.607.608.61 1.59-.004 2.203a1.56 1.56 0 0 1-2.202.004L26.807 29.012zm-10.427.627c7.322 0 13.26-5.938 13.26-13.26 0-7.324-5.938-13.26-13.26-13.26-7.324 0-13.26 5.936-13.26 13.26 0 7.322 5.936 13.26 13.26 13.26z" fill-rule="evenodd"></symbol>
|
||||
</svg>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
|
||||
export default templates;
|
||||
@@ -1,267 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import $ from 'autocomplete.js/zepto';
|
||||
|
||||
const utils = {
|
||||
/*
|
||||
* Move the content of an object key one level higher.
|
||||
* eg.
|
||||
* {
|
||||
* name: 'My name',
|
||||
* hierarchy: {
|
||||
* lvl0: 'Foo',
|
||||
* lvl1: 'Bar'
|
||||
* }
|
||||
* }
|
||||
* Will be converted to
|
||||
* {
|
||||
* name: 'My name',
|
||||
* lvl0: 'Foo',
|
||||
* lvl1: 'Bar'
|
||||
* }
|
||||
* @param {Object} object Main object
|
||||
* @param {String} property Main object key to move up
|
||||
* @return {Object}
|
||||
* @throws Error when key is not an attribute of Object or is not an object itself
|
||||
*/
|
||||
mergeKeyWithParent(object, property) {
|
||||
if (object[property] === undefined) {
|
||||
return object;
|
||||
}
|
||||
if (typeof object[property] !== 'object') {
|
||||
return object;
|
||||
}
|
||||
const newObject = $.extend({}, object, object[property]);
|
||||
delete newObject[property];
|
||||
return newObject;
|
||||
},
|
||||
/*
|
||||
* Group all objects of a collection by the value of the specified attribute
|
||||
* If the attribute is a string, use the lowercase form.
|
||||
*
|
||||
* eg.
|
||||
* groupBy([
|
||||
* {name: 'Tim', category: 'dev'},
|
||||
* {name: 'Vincent', category: 'dev'},
|
||||
* {name: 'Ben', category: 'sales'},
|
||||
* {name: 'Jeremy', category: 'sales'},
|
||||
* {name: 'AlexS', category: 'dev'},
|
||||
* {name: 'AlexK', category: 'sales'}
|
||||
* ], 'category');
|
||||
* =>
|
||||
* {
|
||||
* 'devs': [
|
||||
* {name: 'Tim', category: 'dev'},
|
||||
* {name: 'Vincent', category: 'dev'},
|
||||
* {name: 'AlexS', category: 'dev'}
|
||||
* ],
|
||||
* 'sales': [
|
||||
* {name: 'Ben', category: 'sales'},
|
||||
* {name: 'Jeremy', category: 'sales'},
|
||||
* {name: 'AlexK', category: 'sales'}
|
||||
* ]
|
||||
* }
|
||||
* @param {array} collection Array of objects to group
|
||||
* @param {String} property The attribute on which apply the grouping
|
||||
* @return {array}
|
||||
* @throws Error when one of the element does not have the specified property
|
||||
*/
|
||||
groupBy(collection, property) {
|
||||
const newCollection = {};
|
||||
$.each(collection, (index, item) => {
|
||||
if (item[property] === undefined) {
|
||||
throw new Error(`[groupBy]: Object has no key ${property}`);
|
||||
}
|
||||
let key = item[property];
|
||||
if (typeof key === 'string') {
|
||||
key = key.toLowerCase();
|
||||
}
|
||||
// fix #171 the given data type of docsearch hits might be conflict with the properties of the native Object,
|
||||
// such as the constructor, so we need to do this check.
|
||||
if (!Object.prototype.hasOwnProperty.call(newCollection, key)) {
|
||||
newCollection[key] = [];
|
||||
}
|
||||
newCollection[key].push(item);
|
||||
});
|
||||
return newCollection;
|
||||
},
|
||||
/*
|
||||
* Return an array of all the values of the specified object
|
||||
* eg.
|
||||
* values({
|
||||
* foo: 42,
|
||||
* bar: true,
|
||||
* baz: 'yep'
|
||||
* })
|
||||
* =>
|
||||
* [42, true, yep]
|
||||
* @param {object} object Object to extract values from
|
||||
* @return {array}
|
||||
*/
|
||||
values(object) {
|
||||
return Object.keys(object).map((key) => object[key]);
|
||||
},
|
||||
/*
|
||||
* Flattens an array
|
||||
* eg.
|
||||
* flatten([1, 2, [3, 4], [5, 6]])
|
||||
* =>
|
||||
* [1, 2, 3, 4, 5, 6]
|
||||
* @param {array} array Array to flatten
|
||||
* @return {array}
|
||||
*/
|
||||
flatten(array) {
|
||||
const results = [];
|
||||
array.forEach((value) => {
|
||||
if (!Array.isArray(value)) {
|
||||
results.push(value);
|
||||
return;
|
||||
}
|
||||
value.forEach((subvalue) => {
|
||||
results.push(subvalue);
|
||||
});
|
||||
});
|
||||
return results;
|
||||
},
|
||||
/*
|
||||
* Flatten all values of an object into an array, marking each first element of
|
||||
* each group with a specific flag
|
||||
* eg.
|
||||
* flattenAndFlagFirst({
|
||||
* 'devs': [
|
||||
* {name: 'Tim', category: 'dev'},
|
||||
* {name: 'Vincent', category: 'dev'},
|
||||
* {name: 'AlexS', category: 'dev'}
|
||||
* ],
|
||||
* 'sales': [
|
||||
* {name: 'Ben', category: 'sales'},
|
||||
* {name: 'Jeremy', category: 'sales'},
|
||||
* {name: 'AlexK', category: 'sales'}
|
||||
* ]
|
||||
* , 'isTop');
|
||||
* =>
|
||||
* [
|
||||
* {name: 'Tim', category: 'dev', isTop: true},
|
||||
* {name: 'Vincent', category: 'dev', isTop: false},
|
||||
* {name: 'AlexS', category: 'dev', isTop: false},
|
||||
* {name: 'Ben', category: 'sales', isTop: true},
|
||||
* {name: 'Jeremy', category: 'sales', isTop: false},
|
||||
* {name: 'AlexK', category: 'sales', isTop: false}
|
||||
* ]
|
||||
* @param {object} object Object to flatten
|
||||
* @param {string} flag Flag to set to true on first element of each group
|
||||
* @return {array}
|
||||
*/
|
||||
flattenAndFlagFirst(object, flag) {
|
||||
const values = this.values(object).map((collection) =>
|
||||
collection.map((item, index) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
item[flag] = index === 0;
|
||||
return item;
|
||||
}),
|
||||
);
|
||||
return this.flatten(values);
|
||||
},
|
||||
/*
|
||||
* Removes all empty strings, null, false and undefined elements array
|
||||
* eg.
|
||||
* compact([42, false, null, undefined, '', [], 'foo']);
|
||||
* =>
|
||||
* [42, [], 'foo']
|
||||
* @param {array} array Array to compact
|
||||
* @return {array}
|
||||
*/
|
||||
compact(array) {
|
||||
const results = [];
|
||||
array.forEach((value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
results.push(value);
|
||||
});
|
||||
return results;
|
||||
},
|
||||
/*
|
||||
* Returns the highlighted value of the specified key in the specified object.
|
||||
* If no highlighted value is available, will return the key value directly
|
||||
* eg.
|
||||
* getHighlightedValue({
|
||||
* _highlightResult: {
|
||||
* text: {
|
||||
* value: '<mark>foo</mark>'
|
||||
* }
|
||||
* },
|
||||
* text: 'foo'
|
||||
* }, 'text');
|
||||
* =>
|
||||
* '<mark>foo</mark>'
|
||||
* @param {object} object Hit object returned by the Algolia API
|
||||
* @param {string} property Object key to look for
|
||||
* @return {string}
|
||||
**/
|
||||
getHighlightedValue(object, property) {
|
||||
if (
|
||||
object._highlightResult &&
|
||||
object._highlightResult.hierarchy_camel &&
|
||||
object._highlightResult.hierarchy_camel[property] &&
|
||||
object._highlightResult.hierarchy_camel[property].matchLevel &&
|
||||
object._highlightResult.hierarchy_camel[property].matchLevel !== 'none' &&
|
||||
object._highlightResult.hierarchy_camel[property].value
|
||||
) {
|
||||
return object._highlightResult.hierarchy_camel[property].value;
|
||||
}
|
||||
if (
|
||||
object._highlightResult &&
|
||||
object._highlightResult &&
|
||||
object._highlightResult[property] &&
|
||||
object._highlightResult[property].value
|
||||
) {
|
||||
return object._highlightResult[property].value;
|
||||
}
|
||||
return object[property];
|
||||
},
|
||||
/*
|
||||
* Returns the snippeted value of the specified key in the specified object.
|
||||
* If no highlighted value is available, will return the key value directly.
|
||||
* Will add starting and ending ellipsis (…) if we detect that a sentence is
|
||||
* incomplete
|
||||
* eg.
|
||||
* getSnippetedValue({
|
||||
* _snippetResult: {
|
||||
* text: {
|
||||
* value: '<mark>This is an unfinished sentence</mark>'
|
||||
* }
|
||||
* },
|
||||
* text: 'This is an unfinished sentence'
|
||||
* }, 'text');
|
||||
* =>
|
||||
* '<mark>This is an unfinished sentence</mark>…'
|
||||
* @param {object} object Hit object returned by the Algolia API
|
||||
* @param {string} property Object key to look for
|
||||
* @return {string}
|
||||
**/
|
||||
getSnippetedValue(object, property) {
|
||||
if (!object._snippetResult || !object._snippetResult[property] || !object._snippetResult[property].value) {
|
||||
return object[property];
|
||||
}
|
||||
let snippet = object._snippetResult[property].value;
|
||||
|
||||
if (snippet[0] !== snippet[0].toUpperCase()) {
|
||||
snippet = `…${snippet}`;
|
||||
}
|
||||
if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
|
||||
snippet = `${snippet}…`;
|
||||
}
|
||||
return snippet;
|
||||
},
|
||||
/*
|
||||
* Deep clone an object.
|
||||
* Note: This will not clone functions and dates
|
||||
* @param {object} object Object to clone
|
||||
* @return {object}
|
||||
*/
|
||||
deepClone(object) {
|
||||
return JSON.parse(JSON.stringify(object));
|
||||
},
|
||||
};
|
||||
|
||||
export default utils;
|
||||
@@ -1,40 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.search-icon {
|
||||
background-image: var(--ifm-navbar-search-input-icon);
|
||||
height: auto;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
line-height: 32px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-icon-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.search-bar {
|
||||
width: 0 !important;
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.search-bar-expanded {
|
||||
width: 9rem !important;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
display: inline;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
Whitespace-only changes.
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,n,l,t,i){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},r="function"==typeof a[t]&&a[t],o=r.cache||{},d="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(n,l){if(!o[n]){if(!e[n]){var i="function"==typeof a[t]&&a[t];if(!l&&i)return i(n,!0);if(r)return r(n,!0);if(d&&"string"==typeof n)return d(n);var p=new Error("Cannot find module '"+n+"'");throw p.code="MODULE_NOT_FOUND",p}c.resolve=function(l){var t=e[n][1][l];return null!=t?t:l},c.cache={};var u=o[n]=new s.Module(n);e[n][0].call(u.exports,c,u,u.exports,this)}return o[n].exports;function c(e){var n=c.resolve(e);return!1===n?{}:s(n)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.exports={}},s.modules=e,s.cache=o,s.parent=r,s.register=function(n,l){e[n]=[function(e,n){n.exports=l},{}]},Object.defineProperty(s,"root",{get:function(){return a[t]}}),a[t]=s;for(var p=0;p<n.length;p++)s(n[p]);if(l){var u=s(l);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({hUYA0:[function(e,n,l){var t=e("@parcel/transformer-js/src/esmodule-helpers.js");t.defineInteropFlag(l);var i=e("bundle-text:./style.less"),a=t.interopDefault(i);function r(e){return n=>{const{template:{$player:l},icons:{volume:t,volumeClose:i,fullscreenOn:a,fullscreenOff:r,loading:o},constructor:{validator:d,utils:{query:s,append:p,setStyle:u}}}=n;e=d({html:"",video:"",url:"",playDuration:5,totalDuration:10,muted:!1,i18n:{close:"关闭广告",countdown:"%s秒",detail:"查看详情",canBeClosed:"%s秒后可关闭广告"},...e},{html:"?string",video:"?string",url:"?string",playDuration:"number",totalDuration:"number",muted:"?boolean",i18n:{close:"string",countdown:"string",detail:"string",canBeClosed:"string"}});let c=null,y=null,f=null,g=null,m=null,v=null,x=0,h=null,b=!1,w=!1,D=!1;function j(e,n){return n.replace("%s",e)}function k(){b=!0,n.play(),e.video&&c.pause(),u(n.template.$ads,"display","none"),n.emit("artplayerPluginAds:skip",e)}function $(){b||(h=setTimeout((()=>{x+=1;const n=e.playDuration-x;n>=1?f.innerHTML=j(n,e.i18n.canBeClosed):(f.innerHTML=e.i18n.close,D||(D=!0)),g.innerHTML=j(e.totalDuration-x,e.i18n.countdown),x>=e.totalDuration?k():$()}),1e3))}function O(){b||clearTimeout(h)}function P(){w||(w=!0,function(){n.template.$ads=p(l,'<div class="artplayer-plugin-ads"></div>'),c=p(n.template.$ads,e.video?`<video class="artplayer-plugin-ads-video" src="${e.video}" loop playsInline></video>`:`<div class="artplayer-plugin-ads-html">${e.html}</div>`),v=p(n.template.$ads,'<div class="artplayer-plugin-ads-loading"></div>'),p(v,o),y=p(n.template.$ads,`<div class="artplayer-plugin-ads-timer"><div class="artplayer-plugin-ads-close">${e.playDuration<=0?e.i18n.close:j(e.playDuration,e.i18n.canBeClosed)}</div><div class="artplayer-plugin-ads-countdown">${j(e.totalDuration,e.i18n.countdown)}</div></div>`),f=s(".artplayer-plugin-ads-close",y),g=s(".artplayer-plugin-ads-countdown",y),e.playDuration>=e.totalDuration&&u(f,"display","none"),n.proxy(f,"click",(()=>{D&&k()})),m=p(n.template.$ads,`<div class="artplayer-plugin-ads-control"><div class="artplayer-plugin-ads-detail">${e.i18n.detail}</div><div class="artplayer-plugin-ads-muted"></div><div class="artplayer-plugin-ads-fullscreen"></div></div>`);const d=s(".artplayer-plugin-ads-detail",m),x=s(".artplayer-plugin-ads-muted",m),h=s(".artplayer-plugin-ads-fullscreen",m);if(e.url?n.proxy(d,"click",(()=>{window.open(e.url),n.emit("artplayerPluginAds:click",e)})):u(d,"display","none"),e.video){const l=p(x,t),a=p(x,i);u(a,"display","none"),e.muted&&(c.muted=!0,u(l,"display","none"),u(a,"display","inline-flex")),n.proxy(x,"click",(()=>{c.muted=!c.muted,c.muted?(u(l,"display","none"),u(a,"display","inline-flex")):(u(l,"display","inline-flex"),u(a,"display","none"))}))}else u(x,"display","none");const b=p(h,a),w=p(h,r);u(w,"display","none"),n.proxy(h,"click",(()=>{n.fullscreen=!n.fullscreen,n.fullscreen?(u(b,"display","inline-flex"),u(w,"display","none")):(u(b,"display","none"),u(w,"display","inline-flex"))})),n.proxy(c,"click",(()=>{e.url&&window.open(e.url),n.emit("artplayerPluginAds:click",e)}))}(),n.pause(),e.video?(n.proxy(c,"error",k),n.proxy(c,"loadedmetadata",(()=>{$(),c.play(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")}))):($(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")),n.proxy(document,"visibilitychange",(()=>{document.hidden?O():$()})))}return n.on("ready",(()=>{n.once("play",P),n.once("video:playing",P)})),{name:"artplayerPluginAds",skip:k,pause:O,play:$}}}if(l.default=r,r.env="production",r.version="1.0.6",r.build="2023-01-01 10:34:50","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-ads")){const e=document.createElement("style");e.id="artplayer-plugin-ads",e.textContent=a.default,document.head.appendChild(eLine truncated
|
||||
!function(e,n,l,t,i){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},r="function"==typeof a[t]&&a[t],o=r.cache||{},d="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(n,l){if(!o[n]){if(!e[n]){var i="function"==typeof a[t]&&a[t];if(!l&&i)return i(n,!0);if(r)return r(n,!0);if(d&&"string"==typeof n)return d(n);var p=new Error("Cannot find module '"+n+"'");throw p.code="MODULE_NOT_FOUND",p}c.resolve=function(l){var t=e[n][1][l];return null!=t?t:l},c.cache={};var u=o[n]=new s.Module(n);e[n][0].call(u.exports,c,u,u.exports,this)}return o[n].exports;function c(e){var n=c.resolve(e);return!1===n?{}:s(n)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.exports={}},s.modules=e,s.cache=o,s.parent=r,s.register=function(n,l){e[n]=[function(e,n){n.exports=l},{}]},Object.defineProperty(s,"root",{get:function(){return a[t]}}),a[t]=s;for(var p=0;p<n.length;p++)s(n[p]);if(l){var u=s(l);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({hUYA0:[function(e,n,l){var t=e("@parcel/transformer-js/src/esmodule-helpers.js");t.defineInteropFlag(l);var i=e("bundle-text:./style.less"),a=t.interopDefault(i);function r(e){return n=>{const{template:{$player:l},icons:{volume:t,volumeClose:i,fullscreenOn:a,fullscreenOff:r,loading:o},constructor:{validator:d,utils:{query:s,append:p,setStyle:u}}}=n;e=d({html:"",video:"",url:"",playDuration:5,totalDuration:10,muted:!1,i18n:{close:"关闭广告",countdown:"%s秒",detail:"查看详情",canBeClosed:"%s秒后可关闭广告"},...e},{html:"?string",video:"?string",url:"?string",playDuration:"number",totalDuration:"number",muted:"?boolean",i18n:{close:"string",countdown:"string",detail:"string",canBeClosed:"string"}});let c=null,y=null,f=null,g=null,m=null,v=null,x=0,h=null,b=!1,w=!1,D=!1;function j(e,n){return n.replace("%s",e)}function k(){b=!0,n.play(),e.video&&c.pause(),u(n.template.$ads,"display","none"),n.emit("artplayerPluginAds:skip",e)}function $(){b||(h=setTimeout((()=>{x+=1;const n=e.playDuration-x;n>=1?f.innerHTML=j(n,e.i18n.canBeClosed):(f.innerHTML=e.i18n.close,D||(D=!0)),g.innerHTML=j(e.totalDuration-x,e.i18n.countdown),x>=e.totalDuration?k():$()}),1e3))}function O(){b||clearTimeout(h)}function P(){w||(w=!0,function(){n.template.$ads=p(l,'<div class="artplayer-plugin-ads"></div>'),c=p(n.template.$ads,e.video?`<video class="artplayer-plugin-ads-video" src="${e.video}" loop playsInline></video>`:`<div class="artplayer-plugin-ads-html">${e.html}</div>`),v=p(n.template.$ads,'<div class="artplayer-plugin-ads-loading"></div>'),p(v,o),y=p(n.template.$ads,`<div class="artplayer-plugin-ads-timer"><div class="artplayer-plugin-ads-close">${e.playDuration<=0?e.i18n.close:j(e.playDuration,e.i18n.canBeClosed)}</div><div class="artplayer-plugin-ads-countdown">${j(e.totalDuration,e.i18n.countdown)}</div></div>`),f=s(".artplayer-plugin-ads-close",y),g=s(".artplayer-plugin-ads-countdown",y),e.playDuration>=e.totalDuration&&u(f,"display","none"),n.proxy(f,"click",(()=>{D&&k()})),m=p(n.template.$ads,`<div class="artplayer-plugin-ads-control"><div class="artplayer-plugin-ads-detail">${e.i18n.detail}</div><div class="artplayer-plugin-ads-muted"></div><div class="artplayer-plugin-ads-fullscreen"></div></div>`);const d=s(".artplayer-plugin-ads-detail",m),x=s(".artplayer-plugin-ads-muted",m),h=s(".artplayer-plugin-ads-fullscreen",m);if(e.url?n.proxy(d,"click",(()=>{window.open(e.url),n.emit("artplayerPluginAds:click",e)})):u(d,"display","none"),e.video){const l=p(x,t),a=p(x,i);u(a,"display","none"),e.muted&&(c.muted=!0,u(l,"display","none"),u(a,"display","inline-flex")),n.proxy(x,"click",(()=>{c.muted=!c.muted,c.muted?(u(l,"display","none"),u(a,"display","inline-flex")):(u(l,"display","inline-flex"),u(a,"display","none"))}))}else u(x,"display","none");const b=p(h,a),w=p(h,r);u(w,"display","none"),n.proxy(h,"click",(()=>{n.fullscreen=!n.fullscreen,n.fullscreen?(u(b,"display","inline-flex"),u(w,"display","none")):(u(b,"display","none"),u(w,"display","inline-flex"))})),n.proxy(c,"click",(()=>{e.url&&window.open(e.url),n.emit("artplayerPluginAds:click",e)}))}(),n.pause(),e.video?(n.proxy(c,"error",k),n.proxy(c,"loadedmetadata",(()=>{$(),c.play(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")}))):($(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")),n.proxy(document,"visibilitychange",(()=>{document.hidden?O():$()})))}return n.on("ready",(()=>{n.once("play",P),n.once("video:playing",P)})),{name:"artplayerPluginAds",skip:k,pause:O,play:$}}}if(l.default=r,r.env="production",r.version="1.0.6",r.build="2023-01-11 20:41:47","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-ads")){const e=document.createElement("style");e.id="artplayer-plugin-ads",e.textContent=a.default,document.head.appendChild(eLine truncated
|
||||
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,n,l,t,i){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},r="function"==typeof a[t]&&a[t],o=r.cache||{},d="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(n,l){if(!o[n]){if(!e[n]){var i="function"==typeof a[t]&&a[t];if(!l&&i)return i(n,!0);if(r)return r(n,!0);if(d&&"string"==typeof n)return d(n);var p=new Error("Cannot find module '"+n+"'");throw p.code="MODULE_NOT_FOUND",p}c.resolve=function(l){var t=e[n][1][l];return null!=t?t:l},c.cache={};var u=o[n]=new s.Module(n);e[n][0].call(u.exports,c,u,u.exports,this)}return o[n].exports;function c(e){var n=c.resolve(e);return!1===n?{}:s(n)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.exports={}},s.modules=e,s.cache=o,s.parent=r,s.register=function(n,l){e[n]=[function(e,n){n.exports=l},{}]},Object.defineProperty(s,"root",{get:function(){return a[t]}}),a[t]=s;for(var p=0;p<n.length;p++)s(n[p]);if(l){var u=s(l);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({hs8jd:[function(e,n,l){var t=e("@parcel/transformer-js/src/esmodule-helpers.js");t.defineInteropFlag(l);var i=e("bundle-text:./style.less"),a=t.interopDefault(i);function r(e){return n=>{const{template:{$player:l},icons:{volume:t,volumeClose:i,fullscreenOn:a,fullscreenOff:r,loading:o},constructor:{validator:d,utils:{query:s,append:p,setStyle:u}}}=n;e=d({html:"",video:"",url:"",playDuration:5,totalDuration:10,muted:!1,i18n:{close:"关闭广告",countdown:"%s秒",detail:"查看详情",canBeClosed:"%s秒后可关闭广告"},...e},{html:"?string",video:"?string",url:"?string",playDuration:"number",totalDuration:"number",muted:"?boolean",i18n:{close:"string",countdown:"string",detail:"string",canBeClosed:"string"}});let c=null,y=null,f=null,g=null,m=null,v=null,x=0,h=null,b=!1,w=!1,D=!1;function j(e,n){return n.replace("%s",e)}function k(){b=!0,n.play(),e.video&&c.pause(),u(n.template.$ads,"display","none"),n.emit("artplayerPluginAds:skip",e)}function P(){b||(h=setTimeout((()=>{x+=1;const n=e.playDuration-x;n>=1?f.innerHTML=j(n,e.i18n.canBeClosed):(f.innerHTML=e.i18n.close,D||(D=!0)),g.innerHTML=j(e.totalDuration-x,e.i18n.countdown),x>=e.totalDuration?k():P()}),1e3))}function $(){b||clearTimeout(h)}function O(){w||(w=!0,function(){n.template.$ads=p(l,'<div class="artplayer-plugin-ads"></div>'),c=p(n.template.$ads,e.video?`<video class="artplayer-plugin-ads-video" src="${e.video}" loop playsInline></video>`:`<div class="artplayer-plugin-ads-html">${e.html}</div>`),v=p(n.template.$ads,'<div class="artplayer-plugin-ads-loading"></div>'),p(v,o),y=p(n.template.$ads,`<div class="artplayer-plugin-ads-timer"><div class="artplayer-plugin-ads-close">${e.playDuration<=0?e.i18n.close:j(e.playDuration,e.i18n.canBeClosed)}</div><div class="artplayer-plugin-ads-countdown">${j(e.totalDuration,e.i18n.countdown)}</div></div>`),f=s(".artplayer-plugin-ads-close",y),g=s(".artplayer-plugin-ads-countdown",y),e.playDuration>=e.totalDuration&&u(f,"display","none"),n.proxy(f,"click",(()=>{D&&k()})),m=p(n.template.$ads,`<div class="artplayer-plugin-ads-control"><div class="artplayer-plugin-ads-detail">${e.i18n.detail}</div><div class="artplayer-plugin-ads-muted"></div><div class="artplayer-plugin-ads-fullscreen"></div></div>`);const d=s(".artplayer-plugin-ads-detail",m),x=s(".artplayer-plugin-ads-muted",m),h=s(".artplayer-plugin-ads-fullscreen",m);if(e.url?n.proxy(d,"click",(()=>{window.open(e.url),n.emit("artplayerPluginAds:click",e)})):u(d,"display","none"),e.video){const l=p(x,t),a=p(x,i);u(a,"display","none"),e.muted&&(c.muted=!0,u(l,"display","none"),u(a,"display","inline-flex")),n.proxy(x,"click",(()=>{c.muted=!c.muted,c.muted?(u(l,"display","none"),u(a,"display","inline-flex")):(u(l,"display","inline-flex"),u(a,"display","none"))}))}else u(x,"display","none");const b=p(h,a),w=p(h,r);u(w,"display","none"),n.proxy(h,"click",(()=>{n.fullscreen=!n.fullscreen,n.fullscreen?(u(b,"display","inline-flex"),u(w,"display","none")):(u(b,"display","none"),u(w,"display","inline-flex"))})),n.proxy(c,"click",(()=>{e.url&&window.open(e.url),n.emit("artplayerPluginAds:click",e)}))}(),n.pause(),e.video?(n.proxy(c,"error",k),n.proxy(c,"loadedmetadata",(()=>{P(),c.play(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")}))):(P(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")),n.proxy(document,"visibilitychange",(()=>{document.hidden?$():P()})))}return n.on("ready",(()=>{n.once("play",O),n.once("video:playing",O)})),{name:"artplayerPluginAds",skip:k,pause:$,play:P}}}if(l.default=r,r.env="production",r.version="1.0.6",r.build="2023-01-01 10:34:51","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-ads")){const e=document.createElement("style");e.id="artplayer-plugin-ads",e.textContent=a.default,document.head.appendChild(eLine truncated
|
||||
!function(e,n,l,t,i){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},r="function"==typeof a[t]&&a[t],o=r.cache||{},d="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(n,l){if(!o[n]){if(!e[n]){var i="function"==typeof a[t]&&a[t];if(!l&&i)return i(n,!0);if(r)return r(n,!0);if(d&&"string"==typeof n)return d(n);var p=new Error("Cannot find module '"+n+"'");throw p.code="MODULE_NOT_FOUND",p}c.resolve=function(l){var t=e[n][1][l];return null!=t?t:l},c.cache={};var u=o[n]=new s.Module(n);e[n][0].call(u.exports,c,u,u.exports,this)}return o[n].exports;function c(e){var n=c.resolve(e);return!1===n?{}:s(n)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.exports={}},s.modules=e,s.cache=o,s.parent=r,s.register=function(n,l){e[n]=[function(e,n){n.exports=l},{}]},Object.defineProperty(s,"root",{get:function(){return a[t]}}),a[t]=s;for(var p=0;p<n.length;p++)s(n[p]);if(l){var u=s(l);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({hs8jd:[function(e,n,l){var t=e("@parcel/transformer-js/src/esmodule-helpers.js");t.defineInteropFlag(l);var i=e("bundle-text:./style.less"),a=t.interopDefault(i);function r(e){return n=>{const{template:{$player:l},icons:{volume:t,volumeClose:i,fullscreenOn:a,fullscreenOff:r,loading:o},constructor:{validator:d,utils:{query:s,append:p,setStyle:u}}}=n;e=d({html:"",video:"",url:"",playDuration:5,totalDuration:10,muted:!1,i18n:{close:"关闭广告",countdown:"%s秒",detail:"查看详情",canBeClosed:"%s秒后可关闭广告"},...e},{html:"?string",video:"?string",url:"?string",playDuration:"number",totalDuration:"number",muted:"?boolean",i18n:{close:"string",countdown:"string",detail:"string",canBeClosed:"string"}});let c=null,y=null,f=null,g=null,m=null,v=null,x=0,h=null,b=!1,w=!1,D=!1;function j(e,n){return n.replace("%s",e)}function k(){b=!0,n.play(),e.video&&c.pause(),u(n.template.$ads,"display","none"),n.emit("artplayerPluginAds:skip",e)}function P(){b||(h=setTimeout((()=>{x+=1;const n=e.playDuration-x;n>=1?f.innerHTML=j(n,e.i18n.canBeClosed):(f.innerHTML=e.i18n.close,D||(D=!0)),g.innerHTML=j(e.totalDuration-x,e.i18n.countdown),x>=e.totalDuration?k():P()}),1e3))}function $(){b||clearTimeout(h)}function O(){w||(w=!0,function(){n.template.$ads=p(l,'<div class="artplayer-plugin-ads"></div>'),c=p(n.template.$ads,e.video?`<video class="artplayer-plugin-ads-video" src="${e.video}" loop playsInline></video>`:`<div class="artplayer-plugin-ads-html">${e.html}</div>`),v=p(n.template.$ads,'<div class="artplayer-plugin-ads-loading"></div>'),p(v,o),y=p(n.template.$ads,`<div class="artplayer-plugin-ads-timer"><div class="artplayer-plugin-ads-close">${e.playDuration<=0?e.i18n.close:j(e.playDuration,e.i18n.canBeClosed)}</div><div class="artplayer-plugin-ads-countdown">${j(e.totalDuration,e.i18n.countdown)}</div></div>`),f=s(".artplayer-plugin-ads-close",y),g=s(".artplayer-plugin-ads-countdown",y),e.playDuration>=e.totalDuration&&u(f,"display","none"),n.proxy(f,"click",(()=>{D&&k()})),m=p(n.template.$ads,`<div class="artplayer-plugin-ads-control"><div class="artplayer-plugin-ads-detail">${e.i18n.detail}</div><div class="artplayer-plugin-ads-muted"></div><div class="artplayer-plugin-ads-fullscreen"></div></div>`);const d=s(".artplayer-plugin-ads-detail",m),x=s(".artplayer-plugin-ads-muted",m),h=s(".artplayer-plugin-ads-fullscreen",m);if(e.url?n.proxy(d,"click",(()=>{window.open(e.url),n.emit("artplayerPluginAds:click",e)})):u(d,"display","none"),e.video){const l=p(x,t),a=p(x,i);u(a,"display","none"),e.muted&&(c.muted=!0,u(l,"display","none"),u(a,"display","inline-flex")),n.proxy(x,"click",(()=>{c.muted=!c.muted,c.muted?(u(l,"display","none"),u(a,"display","inline-flex")):(u(l,"display","inline-flex"),u(a,"display","none"))}))}else u(x,"display","none");const b=p(h,a),w=p(h,r);u(w,"display","none"),n.proxy(h,"click",(()=>{n.fullscreen=!n.fullscreen,n.fullscreen?(u(b,"display","inline-flex"),u(w,"display","none")):(u(b,"display","none"),u(w,"display","inline-flex"))})),n.proxy(c,"click",(()=>{e.url&&window.open(e.url),n.emit("artplayerPluginAds:click",e)}))}(),n.pause(),e.video?(n.proxy(c,"error",k),n.proxy(c,"loadedmetadata",(()=>{P(),c.play(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")}))):(P(),u(y,"display","flex"),u(m,"display","flex"),u(v,"display","none")),n.proxy(document,"visibilitychange",(()=>{document.hidden?$():P()})))}return n.on("ready",(()=>{n.once("play",O),n.once("video:playing",O)})),{name:"artplayerPluginAds",skip:k,pause:$,play:P}}}if(l.default=r,r.env="production",r.version="1.0.6",r.build="2023-01-11 20:41:48","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-ads")){const e=document.createElement("style");e.id="artplayer-plugin-ads",e.textContent=a.default,document.head.appendChild(eLine truncated
|
||||
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(t,r,e,o,n){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},l="function"==typeof a[o]&&a[o],i=l.cache||{},p="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(r,e){if(!i[r]){if(!t[r]){var n="function"==typeof a[o]&&a[o];if(!e&&n)return n(r,!0);if(l)return l(r,!0);if(p&&"string"==typeof r)return p(r);var u=new Error("Cannot find module '"+r+"'");throw u.code="MODULE_NOT_FOUND",u}d.resolve=function(e){var o=t[r][1][e];return null!=o?o:e},d.cache={};var c=i[r]=new s.Module(r);t[r][0].call(c.exports,d,c,c.exports,this)}return i[r].exports;function d(t){var r=d.resolve(t);return!1===r?{}:s(r)}}s.isParcelRequire=!0,s.Module=function(t){this.id=t,this.bundle=s,this.exports={}},s.modules=t,s.cache=i,s.parent=l,s.register=function(r,e){t[r]=[function(t,r){r.exports=e},{}]},Object.defineProperty(s,"root",{get:function(){return a[o]}}),a[o]=s;for(var u=0;u<r.length;u++)s(r[u]);if(e){var c=s(e);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define((function(){return c}))}}({"16V0T":[function(t,r,e){var o=t("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(e);var n=t("bundle-text:./style.less"),a=o.interopDefault(n);function l(){return t=>{!function(t){const{version:r,utils:{errorHandle:e}}=t.constructor,o=r.split(".").map(Number);e(o[0]+o[1]/100>=4.06,`Artplayer.js@${r} is not compatible the artplayerPluginControl@${l.version}. Please update it to version Artplayer.js@4.6.x`)}(t);const{template:{$bottom:r,$player:e},constructor:{utils:{append:o,secondToTime:n,addClass:a,removeClass:i,hasClass:p,isMobile:s}}}=t;if(s)return;const u="artplayer-plugin-control";a(e,u);const c=o(r,'<div class="apa-control-current"></div>'),d=o(r,'<div class="apa-control-duration"></div>'),f=["video:loadedmetadata","video:timeupdate","video:progress"];for(let r=0;r<f.length;r++)t.on(f[r],(()=>{c.innerText=n(t.currentTime),d.innerText=n(t.duration)}));return{name:"artplayerPluginControl",get enable(){return p(e,u)},set enable(t){t?a(e,u):i(e,u)}}}}if(e.default=l,l.env="production",l.version="1.0.0",l.build="2023-01-01 10:34:52","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-control")){const t=document.createElement("style");t.id="artplayer-plugin-control",t.textContent=a.default,document.head.appendChild(t)}"undefined"!=typeof window&&(window.artplayerPluginControl=l)},{"bundle-text:./style.less":"klrMD","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],klrMD:[function(t,r,e){r.exports=".artplayer-plugin-control .art-bottom{height:68px;min-width:400px;max-width:600px;user-select:none;-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);pointer-events:auto;background-color:#000000b3;background-image:none;border-radius:10px;flex-direction:column;align-items:center;padding:0;font-size:13px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:0 10px 15px -3px #0003,0 4px 6px -4px #0003}.artplayer-plugin-control .art-bottom .art-progress{width:65%;justify-content:space-between;align-items:center;gap:10px;display:flex}.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails{bottom:35px}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress{width:100%}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-control-progress-inner,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-loaded,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-played{border-radius:5px}.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip{top:-40px!important}.artplayer-plugin-control .art-bottom .art-controls{width:100%;height:auto;flex:1;padding:0 5px}.artplayer-plugin-control .art-bottom .art-controls .art-control-time,.artplayer-plugin-control .art-bottom .art-controls .art-controls-center{display:none}.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel{width:60px!important}.artplayer-plugin-control .art-bottom .art-selector-list{background-color:#000c!important}.artplayer-plugin-control .art-bottom .apa-control-current,.artplayer-plugin-control .art-bottom .apa-control-duration{width:17.5%;justify-content:center;line-height:1;display:flex;position:absolute;top:10px}.artplayer-plugin-control .art-bottom .apa-control-current{left:0}.artplayer-plugin-control .art-bottom .apa-control-duration{right:0}.artplayer-plugin-control .art-settings{bottom:85px}.artplayer-plugin-control.art-control-show .art-subtitle{bottom:80px}.apa-control-current,.apa-control-duration{display:none}"},{}],"9pCYc":[function(t,r,e){e.interopDefault=function(t){return t&&t.__esModule?t:{default:t}},e.defineInteropFlag=function(t){Object.defineProperty(t,"__esModule",{value:!0})},e.exportAll=fLine truncated
|
||||
!function(t,r,e,o,n){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},l="function"==typeof a[o]&&a[o],i=l.cache||{},p="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(r,e){if(!i[r]){if(!t[r]){var n="function"==typeof a[o]&&a[o];if(!e&&n)return n(r,!0);if(l)return l(r,!0);if(p&&"string"==typeof r)return p(r);var u=new Error("Cannot find module '"+r+"'");throw u.code="MODULE_NOT_FOUND",u}d.resolve=function(e){var o=t[r][1][e];return null!=o?o:e},d.cache={};var c=i[r]=new s.Module(r);t[r][0].call(c.exports,d,c,c.exports,this)}return i[r].exports;function d(t){var r=d.resolve(t);return!1===r?{}:s(r)}}s.isParcelRequire=!0,s.Module=function(t){this.id=t,this.bundle=s,this.exports={}},s.modules=t,s.cache=i,s.parent=l,s.register=function(r,e){t[r]=[function(t,r){r.exports=e},{}]},Object.defineProperty(s,"root",{get:function(){return a[o]}}),a[o]=s;for(var u=0;u<r.length;u++)s(r[u]);if(e){var c=s(e);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define((function(){return c}))}}({"16V0T":[function(t,r,e){var o=t("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(e);var n=t("bundle-text:./style.less"),a=o.interopDefault(n);function l(){return t=>{!function(t){const{version:r,utils:{errorHandle:e}}=t.constructor,o=r.split(".").map(Number);e(o[0]+o[1]/100>=4.06,`Artplayer.js@${r} is not compatible the artplayerPluginControl@${l.version}. Please update it to version Artplayer.js@4.6.x`)}(t);const{template:{$bottom:r,$player:e},constructor:{utils:{append:o,secondToTime:n,addClass:a,removeClass:i,hasClass:p,isMobile:s}}}=t;if(s)return;const u="artplayer-plugin-control";a(e,u);const c=o(r,'<div class="apa-control-current"></div>'),d=o(r,'<div class="apa-control-duration"></div>'),f=["video:loadedmetadata","video:timeupdate","video:progress"];for(let r=0;r<f.length;r++)t.on(f[r],(()=>{c.innerText=n(t.currentTime),d.innerText=n(t.duration)}));return{name:"artplayerPluginControl",get enable(){return p(e,u)},set enable(t){t?a(e,u):i(e,u)}}}}if(e.default=l,l.env="production",l.version="1.0.0",l.build="2023-01-11 20:41:49","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-control")){const t=document.createElement("style");t.id="artplayer-plugin-control",t.textContent=a.default,document.head.appendChild(t)}"undefined"!=typeof window&&(window.artplayerPluginControl=l)},{"bundle-text:./style.less":"klrMD","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],klrMD:[function(t,r,e){r.exports=".artplayer-plugin-control .art-bottom{height:68px;min-width:400px;max-width:600px;user-select:none;-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);pointer-events:auto;background-color:#000000b3;background-image:none;border-radius:10px;flex-direction:column;align-items:center;padding:0;font-size:13px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:0 10px 15px -3px #0003,0 4px 6px -4px #0003}.artplayer-plugin-control .art-bottom .art-progress{width:65%;justify-content:space-between;align-items:center;gap:10px;display:flex}.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails{bottom:35px}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress{width:100%}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-control-progress-inner,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-loaded,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-played{border-radius:5px}.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip{top:-40px!important}.artplayer-plugin-control .art-bottom .art-controls{width:100%;height:auto;flex:1;padding:0 5px}.artplayer-plugin-control .art-bottom .art-controls .art-control-time,.artplayer-plugin-control .art-bottom .art-controls .art-controls-center{display:none}.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel{width:60px!important}.artplayer-plugin-control .art-bottom .art-selector-list{background-color:#000c!important}.artplayer-plugin-control .art-bottom .apa-control-current,.artplayer-plugin-control .art-bottom .apa-control-duration{width:17.5%;justify-content:center;line-height:1;display:flex;position:absolute;top:10px}.artplayer-plugin-control .art-bottom .apa-control-current{left:0}.artplayer-plugin-control .art-bottom .apa-control-duration{right:0}.artplayer-plugin-control .art-settings{bottom:85px}.artplayer-plugin-control.art-control-show .art-subtitle{bottom:80px}.apa-control-current,.apa-control-duration{display:none}"},{}],"9pCYc":[function(t,r,e){e.interopDefault=function(t){return t&&t.__esModule?t:{default:t}},e.defineInteropFlag=function(t){Object.defineProperty(t,"__esModule",{value:!0})},e.exportAll=fLine truncated
|
||||
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(t,r,e,o,n){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},l="function"==typeof a[o]&&a[o],i=l.cache||{},p="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(r,e){if(!i[r]){if(!t[r]){var n="function"==typeof a[o]&&a[o];if(!e&&n)return n(r,!0);if(l)return l(r,!0);if(p&&"string"==typeof r)return p(r);var s=new Error("Cannot find module '"+r+"'");throw s.code="MODULE_NOT_FOUND",s}d.resolve=function(e){var o=t[r][1][e];return null!=o?o:e},d.cache={};var c=i[r]=new u.Module(r);t[r][0].call(c.exports,d,c,c.exports,this)}return i[r].exports;function d(t){var r=d.resolve(t);return!1===r?{}:u(r)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=i,u.parent=l,u.register=function(r,e){t[r]=[function(t,r){r.exports=e},{}]},Object.defineProperty(u,"root",{get:function(){return a[o]}}),a[o]=u;for(var s=0;s<r.length;s++)u(r[s]);if(e){var c=u(e);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define((function(){return c}))}}({d3G6W:[function(t,r,e){var o=t("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(e);var n=t("bundle-text:./style.less"),a=o.interopDefault(n);function l(){return t=>{!function(t){const{version:r,utils:{errorHandle:e}}=t.constructor,o=r.split(".").map(Number);e(o[0]+o[1]/100>=4.06,`Artplayer.js@${r} is not compatible the artplayerPluginControl@${l.version}. Please update it to version Artplayer.js@4.6.x`)}(t);const{template:{$bottom:r,$player:e},constructor:{utils:{append:o,secondToTime:n,addClass:a,removeClass:i,hasClass:p,isMobile:u}}}=t;if(u)return;const s="artplayer-plugin-control";a(e,s);const c=o(r,'<div class="apa-control-current"></div>'),d=o(r,'<div class="apa-control-duration"></div>'),f=["video:loadedmetadata","video:timeupdate","video:progress"];for(let r=0;r<f.length;r++)t.on(f[r],(()=>{c.innerText=n(t.currentTime),d.innerText=n(t.duration)}));return{name:"artplayerPluginControl",get enable(){return p(e,s)},set enable(t){t?a(e,s):i(e,s)}}}}if(e.default=l,l.env="production",l.version="1.0.0",l.build="2023-01-01 10:34:52","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-control")){const t=document.createElement("style");t.id="artplayer-plugin-control",t.textContent=a.default,document.head.appendChild(t)}"undefined"!=typeof window&&(window.artplayerPluginControl=l)},{"bundle-text:./style.less":"8jCnX","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],"8jCnX":[function(t,r,e){r.exports=".artplayer-plugin-control .art-bottom{height:68px;min-width:400px;max-width:600px;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:saturate(180%)blur(20px);-webkit-backdrop-filter:saturate(180%)blur(20px);-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);pointer-events:auto;background-color:#000000b3;background-image:none;border-radius:10px;flex-direction:column;align-items:center;padding:0;font-size:13px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:0 10px 15px -3px #0003,0 4px 6px -4px #0003}.artplayer-plugin-control .art-bottom .art-progress{width:65%;justify-content:space-between;align-items:center;gap:10px;display:flex}.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails{bottom:35px}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress{width:100%}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-control-progress-inner,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-loaded,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-played{border-radius:5px}.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip{top:-40px!important}.artplayer-plugin-control .art-bottom .art-controls{width:100%;height:auto;flex:1;padding:0 5px}.artplayer-plugin-control .art-bottom .art-controls .art-control-time,.artplayer-plugin-control .art-bottom .art-controls .art-controls-center{display:none}.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel{width:60px!important}.artplayer-plugin-control .art-bottom .art-selector-list{background-color:#000c!important}.artplayer-plugin-control .art-bottom .apa-control-current,.artplayer-plugin-control .art-bottom .apa-control-duration{width:17.5%;justify-content:center;line-height:1;display:flex;position:absolute;top:10px}.artplayer-plugin-control .art-bottom .apa-control-current{left:0}.artplayer-plugin-control .art-bottom .apa-control-duration{right:0}.artplayer-plugin-control .art-settings{bottom:85px}.artplayer-plugin-control.art-control-show .art-subtitle{bottom:80px}.apa-control-current,.apa-control-duration{display:none}"},{}],"47PTV":[function(t,r,e){e.interopDefault=function(t){return t&&Line truncated
|
||||
!function(t,r,e,o,n){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},l="function"==typeof a[o]&&a[o],i=l.cache||{},p="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(r,e){if(!i[r]){if(!t[r]){var n="function"==typeof a[o]&&a[o];if(!e&&n)return n(r,!0);if(l)return l(r,!0);if(p&&"string"==typeof r)return p(r);var s=new Error("Cannot find module '"+r+"'");throw s.code="MODULE_NOT_FOUND",s}d.resolve=function(e){var o=t[r][1][e];return null!=o?o:e},d.cache={};var c=i[r]=new u.Module(r);t[r][0].call(c.exports,d,c,c.exports,this)}return i[r].exports;function d(t){var r=d.resolve(t);return!1===r?{}:u(r)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=i,u.parent=l,u.register=function(r,e){t[r]=[function(t,r){r.exports=e},{}]},Object.defineProperty(u,"root",{get:function(){return a[o]}}),a[o]=u;for(var s=0;s<r.length;s++)u(r[s]);if(e){var c=u(e);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define((function(){return c}))}}({d3G6W:[function(t,r,e){var o=t("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(e);var n=t("bundle-text:./style.less"),a=o.interopDefault(n);function l(){return t=>{!function(t){const{version:r,utils:{errorHandle:e}}=t.constructor,o=r.split(".").map(Number);e(o[0]+o[1]/100>=4.06,`Artplayer.js@${r} is not compatible the artplayerPluginControl@${l.version}. Please update it to version Artplayer.js@4.6.x`)}(t);const{template:{$bottom:r,$player:e},constructor:{utils:{append:o,secondToTime:n,addClass:a,removeClass:i,hasClass:p,isMobile:u}}}=t;if(u)return;const s="artplayer-plugin-control";a(e,s);const c=o(r,'<div class="apa-control-current"></div>'),d=o(r,'<div class="apa-control-duration"></div>'),f=["video:loadedmetadata","video:timeupdate","video:progress"];for(let r=0;r<f.length;r++)t.on(f[r],(()=>{c.innerText=n(t.currentTime),d.innerText=n(t.duration)}));return{name:"artplayerPluginControl",get enable(){return p(e,s)},set enable(t){t?a(e,s):i(e,s)}}}}if(e.default=l,l.env="production",l.version="1.0.0",l.build="2023-01-11 20:41:50","undefined"!=typeof document&&!document.getElementById("artplayer-plugin-control")){const t=document.createElement("style");t.id="artplayer-plugin-control",t.textContent=a.default,document.head.appendChild(t)}"undefined"!=typeof window&&(window.artplayerPluginControl=l)},{"bundle-text:./style.less":"8jCnX","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],"8jCnX":[function(t,r,e){r.exports=".artplayer-plugin-control .art-bottom{height:68px;min-width:400px;max-width:600px;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:saturate(180%)blur(20px);-webkit-backdrop-filter:saturate(180%)blur(20px);-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);pointer-events:auto;background-color:#000000b3;background-image:none;border-radius:10px;flex-direction:column;align-items:center;padding:0;font-size:13px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:0 10px 15px -3px #0003,0 4px 6px -4px #0003}.artplayer-plugin-control .art-bottom .art-progress{width:65%;justify-content:space-between;align-items:center;gap:10px;display:flex}.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails{bottom:35px}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress{width:100%}.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-control-progress-inner,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-loaded,.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-played{border-radius:5px}.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip{top:-40px!important}.artplayer-plugin-control .art-bottom .art-controls{width:100%;height:auto;flex:1;padding:0 5px}.artplayer-plugin-control .art-bottom .art-controls .art-control-time,.artplayer-plugin-control .art-bottom .art-controls .art-controls-center{display:none}.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel{width:60px!important}.artplayer-plugin-control .art-bottom .art-selector-list{background-color:#000c!important}.artplayer-plugin-control .art-bottom .apa-control-current,.artplayer-plugin-control .art-bottom .apa-control-duration{width:17.5%;justify-content:center;line-height:1;display:flex;position:absolute;top:10px}.artplayer-plugin-control .art-bottom .apa-control-current{left:0}.artplayer-plugin-control .art-bottom .apa-control-duration{right:0}.artplayer-plugin-control .art-settings{bottom:85px}.artplayer-plugin-control.art-control-show .art-subtitle{bottom:80px}.apa-control-current,.apa-control-duration{display:none}"},{}],"47PTV":[function(t,r,e){e.interopDefault=function(t){return t&&Line truncated
|
||||
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(t,e,n,i,r){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},o="function"==typeof a[i]&&a[i],s=o.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(e,n){if(!s[e]){if(!t[e]){var r="function"==typeof a[i]&&a[i];if(!n&&r)return r(e,!0);if(o)return o(e,!0);if(l&&"string"==typeof e)return l(e);var d=new Error("Cannot find module '"+e+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(n){var i=t[e][1][n];return null!=i?i:n},p.cache={};var m=s[e]=new u.Module(e);t[e][0].call(m.exports,p,m,m.exports,this)}return s[e].exports;function p(t){var e=p.resolve(t);return!1===e?{}:u(e)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=s,u.parent=o,u.register=function(e,n){t[e]=[function(t,e){e.exports=n},{}]},Object.defineProperty(u,"root",{get:function(){return a[i]}}),a[i]=u;for(var d=0;d<e.length;d++)u(e[d]);if(n){var m=u(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=m:"function"==typeof define&&define.amd&&define((function(){return m}))}}({bgm6t:[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n);var r=t("./danmuku"),a=i.interopDefault(r),o=t("./setting"),s=i.interopDefault(o);function l(t){return e=>{!function(t){const{version:e,utils:{errorHandle:n}}=t.constructor,i=e.split(".").map(Number);n(i[0]+i[1]/100>=4.04,`Artplayer.js@${e} 不兼容该弹幕库，请更新到 4.4.x 版本以上`)}(e);const n=new(0,a.default)(e,t);return(0,s.default)(e,n),{name:"artplayerPluginDanmuku",emit:n.emit.bind(n),load:n.load.bind(n),config:n.config.bind(n),hide:n.hide.bind(n),show:n.show.bind(n),reset:n.reset.bind(n),get option(){return n.option},get isHide(){return n.isHide},get isStop(){return n.isStop}}}}n.default=l,l.env="production",l.version="4.4.11",l.build="2023-01-01 10:34:53","undefined"!=typeof window&&(window.artplayerPluginDanmuku=l)},{"./danmuku":"4ns48","./setting":"lO8OT","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"4ns48":[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n);var r=t("./bilibili"),a=t("./getDanmuTop"),o=i.interopDefault(a);class s{constructor(e,n){const{constructor:i,template:r}=e;if(this.utils=i.utils,this.validator=i.validator,this.$danmuku=r.$danmuku,this.$player=r.$player,this.art=e,this.queue=[],this.option={},this.$refs=[],this.isStop=!1,this.isHide=!1,this.timer=null,this.config(n),this.option.useWorker)try{this.worker=new Worker(t("12ceab24749100d0"))}catch(t){}this.start=this.start.bind(this),this.stop=this.stop.bind(this),this.reset=this.reset.bind(this),this.destroy=this.destroy.bind(this),e.on("video:play",this.start),e.on("video:playing",this.start),e.on("video:pause",this.stop),e.on("video:waiting",this.stop),e.on("fullscreen",this.reset),e.on("fullscreenWeb",this.reset),e.on("destroy",this.destroy),this.load()}static get option(){return{danmuku:[],speed:5,margin:["2%","25%"],opacity:1,color:"#FFFFFF",mode:0,fontSize:25,filter:()=>!0,antiOverlap:!0,useWorker:!0,synchronousPlayback:!1,lockTime:5,maxLength:100,minWidth:200,maxWidth:400,mount:void 0,theme:"dark",beforeEmit:()=>!0}}static get scheme(){return{danmuku:"array|function|string",speed:"number",margin:"array",opacity:"number",color:"string",mode:"number",fontSize:"number|string",filter:"function",antiOverlap:"boolean",useWorker:"boolean",synchronousPlayback:"boolean",lockTime:"number",maxLength:"number",minWidth:"number",maxWidth:"number",mount:"undefined|htmldivelement",theme:"string",beforeEmit:"function"}}get isRotate(){return this.art.plugins.autoOrientation&&this.art.plugins.autoOrientation.state}get marginTop(){const{clamp:t}=this.utils,e=this.option.margin[0],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[0]}get marginBottom(){const{clamp:t}=this.utils,e=this.option.margin[1],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[1]}filter(t,e){return this.queue.filter((e=>e.$state===t)).map(e)}getLeft(t){const e=t.getBoundingClientRect();return this.isRotate?e.top:e.left}getRef(){const t=this.$refs.pop();if(t)return t;const e=document.createElement("div");return e.style.cssText='\n user-select: none;\n position: absolute;\n white-space: pre;\n pointer-events: none;\n perspective: 500px;\n display: inline-block;\n will-change: transform;\n font-weight: normal;\n line-height: 1.125;\n visibility: hidden;\n font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;\n text-shadow: rgb(0, 0, 0) 1px 0pxLine truncated
|
||||
!function(t,e,n,i,r){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},o="function"==typeof a[i]&&a[i],s=o.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(e,n){if(!s[e]){if(!t[e]){var r="function"==typeof a[i]&&a[i];if(!n&&r)return r(e,!0);if(o)return o(e,!0);if(l&&"string"==typeof e)return l(e);var d=new Error("Cannot find module '"+e+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(n){var i=t[e][1][n];return null!=i?i:n},p.cache={};var m=s[e]=new u.Module(e);t[e][0].call(m.exports,p,m,m.exports,this)}return s[e].exports;function p(t){var e=p.resolve(t);return!1===e?{}:u(e)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=s,u.parent=o,u.register=function(e,n){t[e]=[function(t,e){e.exports=n},{}]},Object.defineProperty(u,"root",{get:function(){return a[i]}}),a[i]=u;for(var d=0;d<e.length;d++)u(e[d]);if(n){var m=u(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=m:"function"==typeof define&&define.amd&&define((function(){return m}))}}({bgm6t:[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n);var r=t("./danmuku"),a=i.interopDefault(r),o=t("./setting"),s=i.interopDefault(o);function l(t){return e=>{!function(t){const{version:e,utils:{errorHandle:n}}=t.constructor,i=e.split(".").map(Number);n(i[0]+i[1]/100>=4.04,`Artplayer.js@${e} 不兼容该弹幕库，请更新到 4.4.x 版本以上`)}(e);const n=new(0,a.default)(e,t);return(0,s.default)(e,n),{name:"artplayerPluginDanmuku",emit:n.emit.bind(n),load:n.load.bind(n),config:n.config.bind(n),hide:n.hide.bind(n),show:n.show.bind(n),reset:n.reset.bind(n),get option(){return n.option},get isHide(){return n.isHide},get isStop(){return n.isStop}}}}n.default=l,l.env="production",l.version="4.4.11",l.build="2023-01-11 20:41:50","undefined"!=typeof window&&(window.artplayerPluginDanmuku=l)},{"./danmuku":"4ns48","./setting":"lO8OT","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"4ns48":[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n);var r=t("./bilibili"),a=t("./getDanmuTop"),o=i.interopDefault(a);class s{constructor(e,n){const{constructor:i,template:r}=e;if(this.utils=i.utils,this.validator=i.validator,this.$danmuku=r.$danmuku,this.$player=r.$player,this.art=e,this.queue=[],this.option={},this.$refs=[],this.isStop=!1,this.isHide=!1,this.timer=null,this.config(n),this.option.useWorker)try{this.worker=new Worker(t("12ceab24749100d0"))}catch(t){}this.start=this.start.bind(this),this.stop=this.stop.bind(this),this.reset=this.reset.bind(this),this.destroy=this.destroy.bind(this),e.on("video:play",this.start),e.on("video:playing",this.start),e.on("video:pause",this.stop),e.on("video:waiting",this.stop),e.on("fullscreen",this.reset),e.on("fullscreenWeb",this.reset),e.on("destroy",this.destroy),this.load()}static get option(){return{danmuku:[],speed:5,margin:["2%","25%"],opacity:1,color:"#FFFFFF",mode:0,fontSize:25,filter:()=>!0,antiOverlap:!0,useWorker:!0,synchronousPlayback:!1,lockTime:5,maxLength:100,minWidth:200,maxWidth:400,mount:void 0,theme:"dark",beforeEmit:()=>!0}}static get scheme(){return{danmuku:"array|function|string",speed:"number",margin:"array",opacity:"number",color:"string",mode:"number",fontSize:"number|string",filter:"function",antiOverlap:"boolean",useWorker:"boolean",synchronousPlayback:"boolean",lockTime:"number",maxLength:"number",minWidth:"number",maxWidth:"number",mount:"undefined|htmldivelement",theme:"string",beforeEmit:"function"}}get isRotate(){return this.art.plugins.autoOrientation&&this.art.plugins.autoOrientation.state}get marginTop(){const{clamp:t}=this.utils,e=this.option.margin[0],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[0]}get marginBottom(){const{clamp:t}=this.utils,e=this.option.margin[1],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[1]}filter(t,e){return this.queue.filter((e=>e.$state===t)).map(e)}getLeft(t){const e=t.getBoundingClientRect();return this.isRotate?e.top:e.left}getRef(){const t=this.$refs.pop();if(t)return t;const e=document.createElement("div");return e.style.cssText='\n user-select: none;\n position: absolute;\n white-space: pre;\n pointer-events: none;\n perspective: 500px;\n display: inline-block;\n will-change: transform;\n font-weight: normal;\n line-height: 1.125;\n visibility: hidden;\n font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;\n text-shadow: rgb(0, 0, 0) 1px 0pxLine truncated
|
||||
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(t,e,n,i,r){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},o="function"==typeof a[i]&&a[i],s=o.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(e,n){if(!s[e]){if(!t[e]){var r="function"==typeof a[i]&&a[i];if(!n&&r)return r(e,!0);if(o)return o(e,!0);if(l&&"string"==typeof e)return l(e);var d=new Error("Cannot find module '"+e+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(n){var i=t[e][1][n];return null!=i?i:n},p.cache={};var m=s[e]=new u.Module(e);t[e][0].call(m.exports,p,m,m.exports,this)}return s[e].exports;function p(t){var e=p.resolve(t);return!1===e?{}:u(e)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=s,u.parent=o,u.register=function(e,n){t[e]=[function(t,e){e.exports=n},{}]},Object.defineProperty(u,"root",{get:function(){return a[i]}}),a[i]=u;for(var d=0;d<e.length;d++)u(e[d]);if(n){var m=u(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=m:"function"==typeof define&&define.amd&&define((function(){return m}))}}({dmoJk:[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n);var r=t("./danmuku"),a=i.interopDefault(r),o=t("./setting"),s=i.interopDefault(o);function l(t){return e=>{!function(t){const{version:e,utils:{errorHandle:n}}=t.constructor,i=e.split(".").map(Number);n(i[0]+i[1]/100>=4.04,`Artplayer.js@${e} 不兼容该弹幕库，请更新到 4.4.x 版本以上`)}(e);const n=new(0,a.default)(e,t);return(0,s.default)(e,n),{name:"artplayerPluginDanmuku",emit:n.emit.bind(n),load:n.load.bind(n),config:n.config.bind(n),hide:n.hide.bind(n),show:n.show.bind(n),reset:n.reset.bind(n),get option(){return n.option},get isHide(){return n.isHide},get isStop(){return n.isStop}}}}n.default=l,l.env="production",l.version="4.4.11",l.build="2023-01-01 10:34:55","undefined"!=typeof window&&(window.artplayerPluginDanmuku=l)},{"./danmuku":"cEnKl","./setting":"hrSF1","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],cEnKl:[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n),i.export(n,"default",(()=>s));var r=t("./bilibili"),a=t("./getDanmuTop"),o=i.interopDefault(a);class s{static get option(){return{danmuku:[],speed:5,margin:["2%","25%"],opacity:1,color:"#FFFFFF",mode:0,fontSize:25,filter:()=>!0,antiOverlap:!0,useWorker:!0,synchronousPlayback:!1,lockTime:5,maxLength:100,minWidth:200,maxWidth:400,mount:void 0,theme:"dark",beforeEmit:()=>!0}}static get scheme(){return{danmuku:"array|function|string",speed:"number",margin:"array",opacity:"number",color:"string",mode:"number",fontSize:"number|string",filter:"function",antiOverlap:"boolean",useWorker:"boolean",synchronousPlayback:"boolean",lockTime:"number",maxLength:"number",minWidth:"number",maxWidth:"number",mount:"undefined|htmldivelement",theme:"string",beforeEmit:"function"}}get isRotate(){return this.art.plugins.autoOrientation&&this.art.plugins.autoOrientation.state}get marginTop(){const{clamp:t}=this.utils,e=this.option.margin[0],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[0]}get marginBottom(){const{clamp:t}=this.utils,e=this.option.margin[1],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[1]}filter(t,e){return this.queue.filter((e=>e.$state===t)).map(e)}getLeft(t){const e=t.getBoundingClientRect();return this.isRotate?e.top:e.left}getRef(){const t=this.$refs.pop();if(t)return t;const e=document.createElement("div");return e.style.cssText='\n user-select: none;\n position: absolute;\n white-space: pre;\n pointer-events: none;\n perspective: 500px;\n display: inline-block;\n will-change: transform;\n font-weight: normal;\n line-height: 1.125;\n visibility: hidden;\n font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;\n text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;\n ',e}getReady(){const{currentTime:t}=this.art;return this.queue.filter((e=>"ready"===e.$state||"wait"===e.$state&&t+.1>=e.time&&e.time>=t-.1))}getEmits(){const t=[],{clientWidth:e}=this.$player,n=this.getLeft(this.$player);return this.filter("emit",(i=>{const r=i.$ref.offsetTop,a=this.getLeft(i.$ref)-n,o=i.$ref.clientHeight,s=i.$ref.clientWidth,l=a+s,u=e-l,d=l/i.$restTime,m={};m.top=r,m.left=a,m.height=o,m.width=s,m.right=u,m.speed=d,m.distance=l,m.time=i.$restTime,m.mode=i.mode,t.push(m)})),t}getFontSize(t){const{clamp:e}=this.utils,{clientHeight:n}=this.$player;if("number"==typLine truncated
|
||||
!function(t,e,n,i,r){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},o="function"==typeof a[i]&&a[i],s=o.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(e,n){if(!s[e]){if(!t[e]){var r="function"==typeof a[i]&&a[i];if(!n&&r)return r(e,!0);if(o)return o(e,!0);if(l&&"string"==typeof e)return l(e);var d=new Error("Cannot find module '"+e+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(n){var i=t[e][1][n];return null!=i?i:n},p.cache={};var m=s[e]=new u.Module(e);t[e][0].call(m.exports,p,m,m.exports,this)}return s[e].exports;function p(t){var e=p.resolve(t);return!1===e?{}:u(e)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=s,u.parent=o,u.register=function(e,n){t[e]=[function(t,e){e.exports=n},{}]},Object.defineProperty(u,"root",{get:function(){return a[i]}}),a[i]=u;for(var d=0;d<e.length;d++)u(e[d]);if(n){var m=u(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=m:"function"==typeof define&&define.amd&&define((function(){return m}))}}({dmoJk:[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n);var r=t("./danmuku"),a=i.interopDefault(r),o=t("./setting"),s=i.interopDefault(o);function l(t){return e=>{!function(t){const{version:e,utils:{errorHandle:n}}=t.constructor,i=e.split(".").map(Number);n(i[0]+i[1]/100>=4.04,`Artplayer.js@${e} 不兼容该弹幕库，请更新到 4.4.x 版本以上`)}(e);const n=new(0,a.default)(e,t);return(0,s.default)(e,n),{name:"artplayerPluginDanmuku",emit:n.emit.bind(n),load:n.load.bind(n),config:n.config.bind(n),hide:n.hide.bind(n),show:n.show.bind(n),reset:n.reset.bind(n),get option(){return n.option},get isHide(){return n.isHide},get isStop(){return n.isStop}}}}n.default=l,l.env="production",l.version="4.4.11",l.build="2023-01-11 20:41:52","undefined"!=typeof window&&(window.artplayerPluginDanmuku=l)},{"./danmuku":"cEnKl","./setting":"hrSF1","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],cEnKl:[function(t,e,n){var i=t("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n),i.export(n,"default",(()=>s));var r=t("./bilibili"),a=t("./getDanmuTop"),o=i.interopDefault(a);class s{static get option(){return{danmuku:[],speed:5,margin:["2%","25%"],opacity:1,color:"#FFFFFF",mode:0,fontSize:25,filter:()=>!0,antiOverlap:!0,useWorker:!0,synchronousPlayback:!1,lockTime:5,maxLength:100,minWidth:200,maxWidth:400,mount:void 0,theme:"dark",beforeEmit:()=>!0}}static get scheme(){return{danmuku:"array|function|string",speed:"number",margin:"array",opacity:"number",color:"string",mode:"number",fontSize:"number|string",filter:"function",antiOverlap:"boolean",useWorker:"boolean",synchronousPlayback:"boolean",lockTime:"number",maxLength:"number",minWidth:"number",maxWidth:"number",mount:"undefined|htmldivelement",theme:"string",beforeEmit:"function"}}get isRotate(){return this.art.plugins.autoOrientation&&this.art.plugins.autoOrientation.state}get marginTop(){const{clamp:t}=this.utils,e=this.option.margin[0],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[0]}get marginBottom(){const{clamp:t}=this.utils,e=this.option.margin[1],{clientHeight:n}=this.$player;if("number"==typeof e)return t(e,0,n);if("string"==typeof e&&e.endsWith("%")){return t(n*(parseFloat(e)/100),0,n)}return s.option.margin[1]}filter(t,e){return this.queue.filter((e=>e.$state===t)).map(e)}getLeft(t){const e=t.getBoundingClientRect();return this.isRotate?e.top:e.left}getRef(){const t=this.$refs.pop();if(t)return t;const e=document.createElement("div");return e.style.cssText='\n user-select: none;\n position: absolute;\n white-space: pre;\n pointer-events: none;\n perspective: 500px;\n display: inline-block;\n will-change: transform;\n font-weight: normal;\n line-height: 1.125;\n visibility: hidden;\n font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;\n text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;\n ',e}getReady(){const{currentTime:t}=this.art;return this.queue.filter((e=>"ready"===e.$state||"wait"===e.$state&&t+.1>=e.time&&e.time>=t-.1))}getEmits(){const t=[],{clientWidth:e}=this.$player,n=this.getLeft(this.$player);return this.filter("emit",(i=>{const r=i.$ref.offsetTop,a=this.getLeft(i.$ref)-n,o=i.$ref.clientHeight,s=i.$ref.clientWidth,l=a+s,u=e-l,d=l/i.$restTime,m={};m.top=r,m.left=a,m.height=o,m.width=s,m.right=u,m.speed=d,m.distance=l,m.time=i.$restTime,m.mode=i.mode,t.push(m)})),t}getFontSize(t){const{clamp:e}=this.utils,{clientHeight:n}=this.$player;if("number"==typLine truncated
|
||||
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,n,o,r){var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof l[o]&&l[o],u=i.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function d(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof l[o]&&l[o];if(!n&&r)return r(t,!0);if(i)return i(t,!0);if(f&&"string"==typeof t)return f(t);var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}c.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},c.cache={};var a=u[t]=new d.Module(t);e[t][0].call(a.exports,c,a,a.exports,this)}return u[t].exports;function c(e){var t=c.resolve(e);return!1===t?{}:d(t)}}d.isParcelRequire=!0,d.Module=function(e){this.id=e,this.bundle=d,this.exports={}},d.modules=e,d.cache=u,d.parent=i,d.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(d,"root",{get:function(){return l[o]}}),l[o]=d;for(var s=0;s<t.length;s++)d(t[s]);if(n){var a=d(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=a:"function"==typeof define&&define.amd&&define((function(){return a}))}}({eEHR6:[function(e,t,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(n);var r=e("bundle-text:./image.svg"),l=o.interopDefault(r);function i(e){return t=>{const{$video:n}=t.template,{errorHandle:o}=t.constructor.utils;return t.on("ready",(function(){const r=t.hls||window.hls;o(r&&r.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');const i=e.auto||"Auto",u=e.title||"Quality",f=r.levels[r.currentLevel],d=f?f.height+"P":i;e.control&&t.controls.add({name:"hls-quality",position:"right",html:d,style:{padding:"0 10px"},selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:e=>(r.nextLevel=e.level,e.html)}),e.setting&&t.setting.add({name:"hls-quality",tooltip:d,html:u,icon:l.default,width:200,selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:function(e){return r.nextLevel=e.level,e.html}})})),{name:"artplayerPluginHlsQuality"}}}n.default=i,i.env="production",i.version="1.0.0",i.build="2023-01-01 10:34:56","undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"5VXix","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"5VXix":[function(e,t,n){t.exports='<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M870.4 176H153.6c-49.472 0-89.6 40.128-89.6 89.6v492.736c0 49.472 40.128 89.6 89.6 89.6h716.8c49.472 0 89.6-40.128 89.6-89.6V265.6c0-49.472-40.128-89.6-89.6-89.6zm0 492.8h-44.8s-29.696-65.792-89.6-89.6-134.4 89.6-134.4 89.6-66.56-71.808-134.4-224S153.6 624 153.6 624V265.6h716.8v403.2zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2-37.12.064-67.2 30.208-67.2 67.264 0 37.12 30.08 67.2 67.2 67.2z" fill="#fff"/></svg>'},{}],"9pCYc":[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach((function(n){"default"===n||"__esModule"===n||t.hasOwnProperty(n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})})),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["eEHR6"],"eEHR6","parcelRequire4dc0");
|
||||
!function(e,t,n,o,r){var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof l[o]&&l[o],u=i.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function d(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof l[o]&&l[o];if(!n&&r)return r(t,!0);if(i)return i(t,!0);if(f&&"string"==typeof t)return f(t);var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}c.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},c.cache={};var a=u[t]=new d.Module(t);e[t][0].call(a.exports,c,a,a.exports,this)}return u[t].exports;function c(e){var t=c.resolve(e);return!1===t?{}:d(t)}}d.isParcelRequire=!0,d.Module=function(e){this.id=e,this.bundle=d,this.exports={}},d.modules=e,d.cache=u,d.parent=i,d.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(d,"root",{get:function(){return l[o]}}),l[o]=d;for(var s=0;s<t.length;s++)d(t[s]);if(n){var a=d(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=a:"function"==typeof define&&define.amd&&define((function(){return a}))}}({eEHR6:[function(e,t,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(n);var r=e("bundle-text:./image.svg"),l=o.interopDefault(r);function i(e){return t=>{const{$video:n}=t.template,{errorHandle:o}=t.constructor.utils;return t.on("ready",(function(){const r=t.hls||window.hls;o(r&&r.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');const i=e.auto||"Auto",u=e.title||"Quality",f=r.levels[r.currentLevel],d=f?f.height+"P":i;e.control&&t.controls.add({name:"hls-quality",position:"right",html:d,style:{padding:"0 10px"},selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:e=>(r.nextLevel=e.level,e.html)}),e.setting&&t.setting.add({name:"hls-quality",tooltip:d,html:u,icon:l.default,width:200,selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:function(e){return r.nextLevel=e.level,e.html}})})),{name:"artplayerPluginHlsQuality"}}}n.default=i,i.env="production",i.version="1.0.0",i.build="2023-01-11 20:41:53","undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"5VXix","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"5VXix":[function(e,t,n){t.exports='<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M870.4 176H153.6c-49.472 0-89.6 40.128-89.6 89.6v492.736c0 49.472 40.128 89.6 89.6 89.6h716.8c49.472 0 89.6-40.128 89.6-89.6V265.6c0-49.472-40.128-89.6-89.6-89.6zm0 492.8h-44.8s-29.696-65.792-89.6-89.6-134.4 89.6-134.4 89.6-66.56-71.808-134.4-224S153.6 624 153.6 624V265.6h716.8v403.2zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2-37.12.064-67.2 30.208-67.2 67.264 0 37.12 30.08 67.2 67.2 67.2z" fill="#fff"/></svg>'},{}],"9pCYc":[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach((function(n){"default"===n||"__esModule"===n||t.hasOwnProperty(n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})})),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["eEHR6"],"eEHR6","parcelRequire4dc0");
|
||||
+1
-1
@@ -4,4 +4,4 @@
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,n,o,r){var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof l[o]&&l[o],u=i.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function d(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof l[o]&&l[o];if(!n&&r)return r(t,!0);if(i)return i(t,!0);if(f&&"string"==typeof t)return f(t);var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}c.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},c.cache={};var a=u[t]=new d.Module(t);e[t][0].call(a.exports,c,a,a.exports,this)}return u[t].exports;function c(e){var t=c.resolve(e);return!1===t?{}:d(t)}}d.isParcelRequire=!0,d.Module=function(e){this.id=e,this.bundle=d,this.exports={}},d.modules=e,d.cache=u,d.parent=i,d.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(d,"root",{get:function(){return l[o]}}),l[o]=d;for(var s=0;s<t.length;s++)d(t[s]);if(n){var a=d(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=a:"function"==typeof define&&define.amd&&define((function(){return a}))}}({"3yim4":[function(e,t,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(n);var r=e("bundle-text:./image.svg"),l=o.interopDefault(r);function i(e){return t=>{const{$video:n}=t.template,{errorHandle:o}=t.constructor.utils;return t.on("ready",(function(){const r=t.hls||window.hls;o(r&&r.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');const i=e.auto||"Auto",u=e.title||"Quality",f=r.levels[r.currentLevel],d=f?f.height+"P":i;e.control&&t.controls.add({name:"hls-quality",position:"right",html:d,style:{padding:"0 10px"},selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:e=>(r.nextLevel=e.level,e.html)}),e.setting&&t.setting.add({name:"hls-quality",tooltip:d,html:u,icon:l.default,width:200,selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:function(e){return r.nextLevel=e.level,e.html}})})),{name:"artplayerPluginHlsQuality"}}}n.default=i,i.env="production",i.version="1.0.0",i.build="2023-01-01 10:34:56","undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"9cAMb","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],"9cAMb":[function(e,t,n){t.exports='<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M870.4 176H153.6c-49.472 0-89.6 40.128-89.6 89.6v492.736c0 49.472 40.128 89.6 89.6 89.6h716.8c49.472 0 89.6-40.128 89.6-89.6V265.6c0-49.472-40.128-89.6-89.6-89.6zm0 492.8h-44.8s-29.696-65.792-89.6-89.6-134.4 89.6-134.4 89.6-66.56-71.808-134.4-224S153.6 624 153.6 624V265.6h716.8v403.2zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2-37.12.064-67.2 30.208-67.2 67.264 0 37.12 30.08 67.2 67.2 67.2z" fill="#fff"/></svg>'},{}],"47PTV":[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach((function(n){"default"===n||"__esModule"===n||t.hasOwnProperty(n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})})),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["3yim4"],"3yim4","parcelRequire4dc0");
|
||||
!function(e,t,n,o,r){var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof l[o]&&l[o],u=i.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function d(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof l[o]&&l[o];if(!n&&r)return r(t,!0);if(i)return i(t,!0);if(f&&"string"==typeof t)return f(t);var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}c.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},c.cache={};var a=u[t]=new d.Module(t);e[t][0].call(a.exports,c,a,a.exports,this)}return u[t].exports;function c(e){var t=c.resolve(e);return!1===t?{}:d(t)}}d.isParcelRequire=!0,d.Module=function(e){this.id=e,this.bundle=d,this.exports={}},d.modules=e,d.cache=u,d.parent=i,d.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(d,"root",{get:function(){return l[o]}}),l[o]=d;for(var s=0;s<t.length;s++)d(t[s]);if(n){var a=d(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=a:"function"==typeof define&&define.amd&&define((function(){return a}))}}({"3yim4":[function(e,t,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(n);var r=e("bundle-text:./image.svg"),l=o.interopDefault(r);function i(e){return t=>{const{$video:n}=t.template,{errorHandle:o}=t.constructor.utils;return t.on("ready",(function(){const r=t.hls||window.hls;o(r&&r.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');const i=e.auto||"Auto",u=e.title||"Quality",f=r.levels[r.currentLevel],d=f?f.height+"P":i;e.control&&t.controls.add({name:"hls-quality",position:"right",html:d,style:{padding:"0 10px"},selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:e=>(r.nextLevel=e.level,e.html)}),e.setting&&t.setting.add({name:"hls-quality",tooltip:d,html:u,icon:l.default,width:200,selector:r.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:f===e}))),onSelect:function(e){return r.nextLevel=e.level,e.html}})})),{name:"artplayerPluginHlsQuality"}}}n.default=i,i.env="production",i.version="1.0.0",i.build="2023-01-11 20:41:54","undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"9cAMb","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],"9cAMb":[function(e,t,n){t.exports='<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M870.4 176H153.6c-49.472 0-89.6 40.128-89.6 89.6v492.736c0 49.472 40.128 89.6 89.6 89.6h716.8c49.472 0 89.6-40.128 89.6-89.6V265.6c0-49.472-40.128-89.6-89.6-89.6zm0 492.8h-44.8s-29.696-65.792-89.6-89.6-134.4 89.6-134.4 89.6-66.56-71.808-134.4-224S153.6 624 153.6 624V265.6h716.8v403.2zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2-37.12.064-67.2 30.208-67.2 67.264 0 37.12 30.08 67.2 67.2 67.2z" fill="#fff"/></svg>'},{}],"47PTV":[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach((function(n){"default"===n||"__esModule"===n||t.hasOwnProperty(n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})})),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["3yim4"],"3yim4","parcelRequire4dc0");
|
||||
@@ -0,0 +1,41 @@
|
||||
// node_modules/vitepress/dist/client/theme-default/index.js
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/base.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
|
||||
import VPBadge from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
|
||||
import Layout from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/Layout.vue";
|
||||
import NotFound from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/NotFound.vue";
|
||||
import { default as default2 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
|
||||
import { default as default3 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
|
||||
import { default as default4 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
|
||||
import { default as default5 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
|
||||
import { default as default6 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
|
||||
import { default as default7 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
|
||||
import { default as default8 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
|
||||
import { default as default9 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
|
||||
var theme = {
|
||||
Layout,
|
||||
NotFound,
|
||||
enhanceApp: ({ app }) => {
|
||||
app.component("Badge", VPBadge);
|
||||
}
|
||||
};
|
||||
var theme_default_default = theme;
|
||||
export {
|
||||
default5 as VPDocAsideSponsors,
|
||||
default3 as VPHomeFeatures,
|
||||
default2 as VPHomeHero,
|
||||
default4 as VPHomeSponsors,
|
||||
default9 as VPTeamMembers,
|
||||
default6 as VPTeamPage,
|
||||
default8 as VPTeamPageSection,
|
||||
default7 as VPTeamPageTitle,
|
||||
theme_default_default as default
|
||||
};
|
||||
//# sourceMappingURL=@theme_index.js.map
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"sources": ["../../../../node_modules/vitepress/dist/client/theme-default/index.js"],
|
||||
"sourcesContent": ["import './styles/fonts.css';\r\nimport './styles/vars.css';\r\nimport './styles/base.css';\r\nimport './styles/utils.css';\r\nimport './styles/components/custom-block.css';\r\nimport './styles/components/vp-code.css';\r\nimport './styles/components/vp-code-group.css';\r\nimport './styles/components/vp-doc.css';\r\nimport './styles/components/vp-sponsor.css';\r\nimport VPBadge from './components/VPBadge.vue';\r\nimport Layout from './Layout.vue';\r\nimport NotFound from './NotFound.vue';\r\nexport { default as VPHomeHero } from './components/VPHomeHero.vue';\r\nexport { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';\r\nexport { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';\r\nexport { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';\r\nexport { default as VPTeamPage } from './components/VPTeamPage.vue';\r\nexport { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';\r\nexport { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';\r\nexport { default as VPTeamMembers } from './components/VPTeamMembers.vue';\r\nconst theme = {\r\n Layout,\r\n NotFound,\r\n enhanceApp: ({ app }) => {\r\n app.component('Badge', VPBadge);\r\n }\r\n};\r\nexport default theme;\r\n"],
|
||||
"mappings": ";AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAqC;AAC9C,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAgC;AACzC,IAAM,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY,CAAC,EAAE,IAAI,MAAM;AACrB,QAAI,UAAU,SAAS,OAAO;AAAA,EAClC;AACJ;AACA,IAAO,wBAAQ;",
|
||||
"names": ["default"]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"hash": "7a49d08d",
|
||||
"browserHash": "4df1cc4c",
|
||||
"optimized": {
|
||||
"vue": {
|
||||
"src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
|
||||
"file": "vue.js",
|
||||
"fileHash": "9fa186ee",
|
||||
"needsInterop": false
|
||||
},
|
||||
"@theme/index": {
|
||||
"src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
|
||||
"file": "@theme_index.js",
|
||||
"fileHash": "b4ca0e88",
|
||||
"needsInterop": false
|
||||
}
|
||||
},
|
||||
"chunks": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{"type":"module"}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"sources": ["../../../../node_modules/@vue/shared/dist/shared.esm-bundler.js", "../../../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js", "../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js", "../../../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js", "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js"],
|
||||
"sourcesContent": ["/**\n * Make a map and return a function for checking if a key\n * is in that map.\n * IMPORTANT: all calls of this function must be prefixed with\n * \\/\\*#\\_\\_PURE\\_\\_\\*\\/\n * So that rollup can tree-shake them if necessary.\n */\nfunction makeMap(str, expectsLowerCase) {\n const map = Object.create(null);\n const list = str.split(',');\n for (let i = 0; i < list.length; i++) {\n map[list[i]] = true;\n }\n return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];\n}\n\n/**\n * dev only flag -> name mapping\n */\nconst PatchFlagNames = {\n [1 /* PatchFlags.TEXT */]: `TEXT`,\n [2 /* PatchFlags.CLASS */]: `CLASS`,\n [4 /* PatchFlags.STYLE */]: `STYLE`,\n [8 /* PatchFlags.PROPS */]: `PROPS`,\n [16 /* PatchFlags.FULL_PROPS */]: `FULL_PROPS`,\n [32 /* PatchFlags.HYDRATE_EVENTS */]: `HYDRATE_EVENTS`,\n [64 /* PatchFlags.STABLE_FRAGMENT */]: `STABLE_FRAGMENT`,\n [128 /* PatchFlags.KEYED_FRAGMENT */]: `KEYED_FRAGMENT`,\n [256 /* PatchFlags.UNKEYED_FRAGMENT */]: `UNKEYED_FRAGMENT`,\n [512 /* PatchFlags.NEED_PATCH */]: `NEED_PATCH`,\n [1024 /* PatchFlags.DYNAMIC_SLOTS */]: `DYNAMIC_SLOTS`,\n [2048 /* PatchFlags.DEV_ROOT_FRAGMENT */]: `DEV_ROOT_FRAGMENT`,\n [-1 /* PatchFlags.HOISTED */]: `HOISTED`,\n [-2 /* PatchFlags.BAIL */]: `BAIL`\n};\n\n/**\n * Dev only\n */\nconst slotFlagsText = {\n [1 /* SlotFlags.STABLE */]: 'STABLE',\n [2 /* SlotFlags.DYNAMIC */]: 'DYNAMIC',\n [3 /* SlotFlags.FORWARDED */]: 'FORWARDED'\n};\n\nconst GLOBALS_WHITE_LISTED = 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +\n 'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +\n 'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt';\nconst isGloballyWhitelisted = /*#__PURE__*/ makeMap(GLOBALS_WHITE_LISTED);\n\nconst range = 2;\nfunction generateCodeFrame(source, start = 0, end = source.length) {\n // Split the content into individual lines but capture the newline sequence\n // that separated each line. This is important because the actual sequence is\n // needed to properly take into account the full line length for offset\n // comparison\n let lines = source.split(/(\\r?\\n)/);\n // Separate the lines and newline sequences into separate arrays for easier referencing\n const newlineSequences = lines.filter((_, idx) => idx % 2 === 1);\n lines = lines.filter((_, idx) => idx % 2 === 0);\n let count = 0;\n const res = [];\n for (let i = 0; i < lines.length; i++) {\n count +=\n lines[i].length +\n ((newlineSequences[i] && newlineSequences[i].length) || 0);\n if (count >= start) {\n for (let j = i - range; j <= i + range || end > count; j++) {\n if (j < 0 || j >= lines.length)\n continue;\n const line = j + 1;\n res.push(`${line}${' '.repeat(Math.max(3 - String(line).length, 0))}| ${lines[j]}`);\n const lineLength = lines[j].length;\n const newLineSeqLength = (newlineSequences[j] && newlineSequences[j].length) || 0;\n if (j === i) {\n // push underline\n const pad = start - (count - (lineLength + newLineSeqLength));\n const length = Math.max(1, end > count ? lineLength - pad : end - start);\n res.push(` | ` + ' '.repeat(pad) + '^'.repeat(length));\n }\n else if (j > i) {\n if (end > count) {\n const length = Math.max(Math.min(end - count, lineLength), 1);\n res.push(` | ` + '^'.repeat(length));\n }\n count += lineLength + newLineSeqLength;\n }\n }\n break;\n }\n }\n return res.join('\\n');\n}\n\nfunction normalizeStyle(value) {\n if (isArray(value)) {\n const res = {};\n for (let i = 0; i < value.length; i++) {\n const item = value[i];\n const normalized = isString(item)\n ? parseStringStyle(item)\n : normalizeStyle(item);\n if (normalized) {\n for (const key in normalized) {\n res[key] = normalized[key];\n }\n }\n }\n return res;\n }\n else if (isString(value)) {\n return value;\n }\n else if (isObject(value)) {\n return value;\n }\n}\nconst listDelimiterRE = /;(?![^(]*\\))/g;\nconst propertyDelimiterRE = /:([^]+)/;\nconst styleCommentRE = /\\/\\*.*?\\*\\//gs;\nfunction parseStringStyle(cssText) {\n const ret = {};\n cssText\n .replace(styleCommentRE, '')\n .split(listDelimiterRE)\n .forEach(item => {\n if (item) {\n const tmp = item.split(propertyDelimiterRE);\n tmp.length > 1 && (ret[tmpLine truncated
|
||||
"mappings": ";AAOA,SAAS,QAAQ,KAAK,kBAAkB;AACpC,QAAMA,OAAM,uBAAO,OAAO,IAAI;AAC9B,QAAM,OAAO,IAAI,MAAM,GAAG;AAC1B,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AAClC,IAAAA,KAAI,KAAK,MAAM;AAAA,EACnB;AACA,SAAO,mBAAmB,SAAO,CAAC,CAACA,KAAI,IAAI,YAAY,KAAK,SAAO,CAAC,CAACA,KAAI;AAC7E;AA+BA,IAAM,uBAAuB;AAG7B,IAAM,wBAAsC,QAAQ,oBAAoB;AA8CxE,SAAS,eAAe,OAAO;AAC3B,MAAI,QAAQ,KAAK,GAAG;AAChB,UAAM,MAAM,CAAC;AACb,aAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,YAAM,OAAO,MAAM;AACnB,YAAM,aAAa,SAAS,IAAI,IAC1B,iBAAiB,IAAI,IACrB,eAAe,IAAI;AACzB,UAAI,YAAY;AACZ,mBAAW,OAAO,YAAY;AAC1B,cAAI,OAAO,WAAW;AAAA,QAC1B;AAAA,MACJ;AAAA,IACJ;AACA,WAAO;AAAA,EACX,WACS,SAAS,KAAK,GAAG;AACtB,WAAO;AAAA,EACX,WACS,SAAS,KAAK,GAAG;AACtB,WAAO;AAAA,EACX;AACJ;AACA,IAAM,kBAAkB;AACxB,IAAM,sBAAsB;AAC5B,IAAM,iBAAiB;AACvB,SAAS,iBAAiB,SAAS;AAC/B,QAAM,MAAM,CAAC;AACb,UACK,QAAQ,gBAAgB,EAAE,EAC1B,MAAM,eAAe,EACrB,QAAQ,UAAQ;AACjB,QAAI,MAAM;AACN,YAAM,MAAM,KAAK,MAAM,mBAAmB;AAC1C,UAAI,SAAS,MAAM,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK;AAAA,IACxD;AAAA,EACJ,CAAC;AACD,SAAO;AACX;AAgBA,SAAS,eAAe,OAAO;AAC3B,MAAI,MAAM;AACV,MAAI,SAAS,KAAK,GAAG;AACjB,UAAM;AAAA,EACV,WACS,QAAQ,KAAK,GAAG;AACrB,aAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,YAAM,aAAa,eAAe,MAAM,EAAE;AAC1C,UAAI,YAAY;AACZ,eAAO,aAAa;AAAA,MACxB;AAAA,IACJ;AAAA,EACJ,WACS,SAAS,KAAK,GAAG;AACtB,eAAW,QAAQ,OAAO;AACtB,UAAI,MAAM,OAAO;AACb,eAAO,OAAO;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ;AACA,SAAO,IAAI,KAAK;AACpB;AACA,SAAS,eAAe,OAAO;AAC3B,MAAI,CAAC;AACD,WAAO;AACX,MAAI,EAAE,OAAO,OAAO,MAAM,IAAI;AAC9B,MAAI,SAAS,CAAC,SAAS,KAAK,GAAG;AAC3B,UAAM,QAAQ,eAAe,KAAK;AAAA,EACtC;AACA,MAAI,OAAO;AACP,UAAM,QAAQ,eAAe,KAAK;AAAA,EACtC;AACA,SAAO;AACX;AAIA,IAAM,YAAY;AAUlB,IAAM,WAAW;AAUjB,IAAM,YAAY;AAKlB,IAAM,YAA0B,QAAQ,SAAS;AAKjD,IAAM,WAAyB,QAAQ,QAAQ;AAK/C,IAAM,YAA0B,QAAQ,SAAS;AAajD,IAAM,sBAAsB;AAC5B,IAAM,uBAAqC,QAAQ,mBAAmB;AAItE,IAAM,gBAA8B,QAAQ,sBACxC,8IAEiC;AAKrC,SAAS,mBAAmB,OAAO;AAC/B,SAAO,CAAC,CAAC,SAAS,UAAU;AAChC;AAyBA,IAAM,kBAAgC,QAAQ,k+BAcxB;AAItB,IAAM,iBAA+B,QAAQ,snFAsCQ;AA+CrD,SAAS,mBAAmB,GAAG,GAAG;AAC9B,MAAI,EAAE,WAAW,EAAE;AACf,WAAO;AACX,MAAI,QAAQ;AACZ,WAAS,IAAI,GAAG,SAAS,IAAI,EAAE,QAAQ,KAAK;AACxC,YAAQ,WAAW,EAAE,IAAI,EAAE,EAAE;AAAA,EACjC;AACA,SAAO;AACX;AACA,SAAS,WAAW,GAAG,GAAG;AACtB,MAAI,MAAM;AACN,WAAO;AACX,MAAI,aAAa,OAAO,CAAC;AACzB,MAAI,aAAa,OAAO,CAAC;AACzB,MAAI,cAAc,YAAY;AAC1B,WAAO,cAAc,aAAa,EAAE,QAAQ,MAAM,EAAE,QAAQ,IAAI;AAAA,EACpE;AACA,eAAa,SAAS,CAAC;AACvB,eAAa,SAAS,CAAC;AACvB,MAAI,cAAc,YAAY;AAC1B,WAAO,MAAM;AAAA,EACjB;AACA,eAAa,QAAQ,CAAC;AACtB,eAAa,QAAQ,CAAC;AACtB,MAAI,cAAc,YAAY;AAC1B,WAAO,cAAc,aAAa,mBAAmB,GAAG,CAAC,IAAI;AAAA,EACjE;AACA,eAAa,SAAS,CAAC;AACvB,eAAa,SAAS,CAAC;AACvB,MAAI,cAAc,YAAY;AAE1B,QAAI,CAAC,cAAc,CAAC,YAAY;AAC5B,aAAO;AAAA,IACX;AACA,UAAM,aAAa,OAAO,KAAK,CAAC,EAAE;AAClC,UAAM,aAAa,OAAO,KAAK,CAAC,EAAE;AAClC,QAAI,eAAe,YAAY;AAC3B,aAAO;AAAA,IACX;AACA,eAAW,OAAO,GAAG;AACjB,YAAM,UAAU,EAAE,eAAe,GAAG;AACpC,YAAM,UAAU,EAAE,eAAe,GAAG;AACpC,UAAK,WAAW,CAAC,WACZ,CAAC,WAAW,WACb,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,GAAG;AAC7B,eAAO;AAAA,MACX;AAAA,IACJ;AAAA,EACJ;AACA,SAAO,OAAO,CAAC,MAAM,OAAO,CAAC;AACjC;AACA,SAAS,aAAa,KAAK,KAAK;AAC5B,SAAO,IAAI,UAAU,UAAQ,WAAW,MAAM,GAAG,CAAC;AACtD;AAMA,IAAM,kBAAkB,CAAC,QAAQ;AAC7B,SAAO,SAAS,GAAG,IACb,MACA,OAAO,OACH,KACA,QAAQ,GAAG,KACR,SAAS,GAAG,MACR,IAAI,aAAa,kBAAkB,CAAC,WAAW,IAAI,QAAQ,KAC9D,KAAK,UAAU,KAAK,UAAU,CAAC,IAC/B,OAAO,GAAG;AAC5B;AACA,IAAM,WAAW,CAAC,MAAM,QAAQ;AAE5B,MAAI,OAAO,IAAI,WAAW;AACtB,WAAO,SAAS,MAAM,IAAI,KAAK;AAAA,EACnC,WACS,MAAM,GAAG,GAAG;AACjB,WAAO;AAAA,MACH,CAAC,OAAO,IAAI,UAAU,CAAC,GAAG,IAAI,QAAQ,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,KAAKC,IAAG,MAAM;AACrE,gBAAQ,GAAG,YAAYA;AACvB,eAAO;AAAA,MACX,GAAG,CAAC,CAAC;AAAA,IACT;AAAA,EACJ,WACS,MAAM,GAAG,GAAG;AACjB,WAAO;AAAA,MACH,CAAC,OAAO,IAAI,UAAU,CAAC,GAAG,IAAI,OAAO,CAAC;AAAA,IAC1C;AAAA,EACJ,WACS,SAAS,GAAG,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,cAAc,GAAG,GAAG;AAC5D,WAAO,OAAO,GAAG;AAAA,EACrB;AACA,SAAO;AACX;AAEA,IAAM,YAAa,OACb,OAAO,OAAO,CAAC,CAAC,IAChB,CAAC;AACP,IAAM,YAAa,OAAyC,OAAO,OAAO,CAAC,CAAC,IAAI,CAAC;AACjF,IAAM,OAAO,MAAM;AAAE;AAIrB,IAAM,KAAK,MAAM;AACjB,IAAM,OAAO;AACb,IAAM,OAAO,CAAC,QAAQ,KAAK,KAAK,GAAG;AACnC,IAAM,kBAAkB,CAAC,QAAQ,IAAI,WAAW,WAAW;AAC3D,IAAM,SAAS,OAAO;AACtB,IAAM,SAAS,CAAC,KAAK,OAAO;AACxB,QAAM,IAAI,IAAI,QAAQ,EAAE;AACxB,MAAI,IAAI,IAAI;AACR,QAAI,OAAO,GAAG,CAAC;AAAA,EACnB;AACJ;AACA,IAAM,iBAAiB,OAAO,UAAU;AACxC,IAAM,SAAS,CAAC,KAAK,QAAQ,eAAe,KAAK,KAAK,GAAG;AACzD,IAAM,UAAU,MAAM;AACtB,IAAM,QAAQ,CAAC,QAAQ,aAAa,GAAG,MAAM;AAC7C,IAAM,QAAQ,CAAC,QAAQ,aAAa,GAAG,MAAM;AAC7C,IAAM,SAAS,CAAC,QAAQ,aAAa,GAAG,MAAM;AAC9C,IAAM,aAAa,CAAC,QAAQ,OAAO,QAAQ;AAC3C,IAAM,WAAW,CAAC,QAAQ,OAAO,QAAQ;AACzC,IAAM,WAAW,CAAC,QAAQ,OAAO,QAAQ;AACzC,IAAM,WAAW,CAAC,QAAQ,QAAQ,QAAQ,OAAO,QAAQ;AACzD,IAAM,YAAY,CAAC,QAAQ;AACvB,SAAO,SAAS,GAAG,KAAK,WAAW,IAAI,IAAI,KAAK,WAAW,IAAI,KAAK;AACxE;AACA,IAAM,iBAAiB,OAAO,UAAU;AACxC,IAAM,eAAe,CAAC,UAAU,eAAe,KAAK,KAAK;AACzD,IAAM,YAAY,CAAC,UAAU;AAEzB,SAAO,aAAa,KAAK,EAAE,MAAM,GAAG,EAAE;AAC1C;AACA,IAAM,gBAAgB,CAAC,QAAQ,aAAa,GAAG,MAAM;AACrD,IAAM,eAAe,CAAC,QAAQ,SAAS,GAAG,KACtC,QAAQ,SACR,IAAI,OAAO,OACX,KAAK,SAAS,KAAK,EAAE,MAAM;AAC/B,IAAM,iBAA+B;AAAA,EAErC;AAG2C;AAC3C,IAAM,qBAAmC,QAAQ,2EAA2E;AAC5H,IAAM,sBAAsB,CAAC,OAAO;AAChCLine truncated
|
||||
"names": ["map", "val", "effect", "shouldTrack", "key", "effect", "isReadonly", "get", "set", "isShallow", "has", "mutableInstrumentations", "shallowInstrumentations", "readonlyInstrumentations", "shallowReadonlyInstrumentations", "ref", "self", "warn", "p", "_a", "version", "isModelListener", "raw", "emit", "render", "remove", "vnode", "parentComponent", "container", "anchor", "parent", "isSVG", "effect", "callHook", "hook", "key", "resolve", "ref", "instance", "has", "get", "set", "computed", "h", "hydrate", "createApp", "patchProp", "hasWarned", "next", "isShallow", "warn", "isBoolean", "e", "hydrate", "resolve", "def", "callHook", "h", "compile", "warn"]
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* @type {import('vitepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
base: '/document/',
|
||||
outDir: '../../../docs/document',
|
||||
title: 'Artplayer.js',
|
||||
appearance: 'dark',
|
||||
lastUpdated: true,
|
||||
description: 'ArtPlayer.js is a modern and full featured HTML5 video player',
|
||||
themeConfig: {
|
||||
siteTitle: 'Artplayer.js',
|
||||
logo: '/logo.png',
|
||||
nav: [
|
||||
{ text: '中文版', link: '/' },
|
||||
{ text: 'English', link: '/en/', activeMatch: '/en/' },
|
||||
{ text: 'Online Editor', link: 'https://artplayer.org' },
|
||||
{ text: 'QQ群: 320881312', link: '#' },
|
||||
{
|
||||
text: '4.6.x',
|
||||
items: [
|
||||
{ text: 'Changelog', link: 'https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md' },
|
||||
]
|
||||
}
|
||||
],
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/zhw2590582/ArtPlayer' },
|
||||
],
|
||||
sidebar: {
|
||||
'/': [
|
||||
{
|
||||
text: '开始',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: '安装使用', link: '/' },
|
||||
{ text: '基础选项', link: '/start/option' },
|
||||
{ text: '组件配置', link: '/start/component' },
|
||||
{ text: '设置面板', link: '/start/setting' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '高级',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: '实例属性', link: '/advanced/property' },
|
||||
{ text: '高级属性', link: '/advanced/built-in' },
|
||||
{ text: '静态属性', link: '/advanced/class' },
|
||||
{ text: '实例事件', link: '/advanced/event' },
|
||||
{ text: '编写插件', link: '/advanced/plugin' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '插件',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: '弹幕库', link: '/plugin/danmuku' },
|
||||
{ text: '视频广告', link: '/plugin/ads' },
|
||||
{ text: 'Iframe 控制', link: '/plugin/iframe' },
|
||||
{ text: 'HLS 画质', link: '/plugin/hls-quality' },
|
||||
{ text: '控制器皮肤', link: '/plugin/control-ui' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '第三方库',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'hls.js', link: '/library/hls' },
|
||||
{ text: 'flv.js', link: '/library/flv' },
|
||||
{ text: 'dash.js', link: '/library/dash' },
|
||||
]
|
||||
},
|
||||
],
|
||||
'/en/': [
|
||||
{
|
||||
text: 'Quick start',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Install', link: '/en/' },
|
||||
{ text: 'Option', link: '/en/start/option' },
|
||||
{ text: 'Component', link: '/en/start/component' },
|
||||
{ text: 'Setting', link: '/en/start/setting' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Advanced',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Instance Property', link: '/en/advanced/property' },
|
||||
{ text: 'Advanced Property', link: '/en/advanced/built-in' },
|
||||
{ text: 'Static Property', link: '/en/advanced/class' },
|
||||
{ text: 'Instance Event', link: '/en/advanced/event' },
|
||||
{ text: 'Writing Plugin', link: '/en/advanced/plugin' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Plugins',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Video Ads', link: '/en/plugin/ads' },
|
||||
{ text: 'Iframe Control', link: '/en/plugin/iframe' },
|
||||
{ text: 'HLS Quality', link: '/en/plugin/hls-quality' },
|
||||
{ text: 'Control UI', link: '/en/plugin/control-ui' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Libraries',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'hls.js', link: '/en/library/hls' },
|
||||
{ text: 'flv.js', link: '/en/library/flv' },
|
||||
{ text: 'dash.js', link: '/en/library/dash' },
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
editLink: {
|
||||
pattern: 'https://github.com/zhw2590582/ArtPlayer/packages/artplayer-vitepress/docs/:path',
|
||||
text: 'Edit this page on GitHub'
|
||||
},
|
||||
},
|
||||
markdown: {
|
||||
lineNumbers: true
|
||||
},
|
||||
head: [
|
||||
[
|
||||
'script',
|
||||
{ src: "/main.js" }
|
||||
],
|
||||
[
|
||||
'link',
|
||||
{ rel: "stylesheet", href: "/style.css" }
|
||||
],
|
||||
[
|
||||
'link',
|
||||
{ rel: "shortcut icon", href: "/favicon.ico" }
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
export default config
|
||||
@@ -0,0 +1,498 @@
|
||||
# 高级属性
|
||||
|
||||
这里的 `高级属性` 是指挂载在 `实例` 的 `二级属性`，比较少用
|
||||
|
||||
## `option`
|
||||
|
||||
播放器的选项
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.info(art.option);
|
||||
```
|
||||
|
||||
:::warning 提示
|
||||
|
||||
假如直接修改这个 `option` 对象，播放器不会马上做出响应
|
||||
|
||||
:::
|
||||
|
||||
## `whitelist`
|
||||
|
||||
管理移动设备的白名单功能，只有一个属性 `state` 返回是否启用播放器功能
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
whitelist: [(ua) => /iPhone/gi.test(ua)],
|
||||
});
|
||||
|
||||
console.info(art.whitelist.state);
|
||||
```
|
||||
|
||||
:::warning 提示
|
||||
|
||||
在上面这个例子中，当使用 `iPhone` 访问播放器时，`art.whitelist.state` 会返回 `false`，即使用原生的播放器，而不是 `Artplayer` 播放器
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## `template`
|
||||
|
||||
管理播放器所有的 `DOM` 元素
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.info(art.template);
|
||||
console.info(art.template.$video);
|
||||
```
|
||||
|
||||
:::warning 提示
|
||||
|
||||
为了方便区别 `DOM` 元素和普通对象，播放器里的所有 `DOM` 元素都是以 `$` 开头命名的
|
||||
|
||||
这是所有 `DOM` 元素的定义：[artplayer/types/template.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts)
|
||||
|
||||
:::
|
||||
|
||||
## `events`
|
||||
|
||||
管理播放器所有的 `DOM` 事件，实质上是代理了 `addEventListener` 和 `removeEventListener`, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
|
||||
|
||||
- `proxy` 方法用于代理 `DOM` 事件
|
||||
- `hover` 方法用于代理自定义的 `hover` 事件
|
||||
- `loadImg` 方法用于监听图片的 `load` 加载事件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var container = document.querySelector('.artplayer-app');
|
||||
|
||||
var art = new Artplayer({
|
||||
container: container,
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.events.proxy(container, 'click', event => {
|
||||
console.info('click', event);
|
||||
});
|
||||
|
||||
art.events.hover(container, (event) => {
|
||||
console.info('mouseenter', event);
|
||||
}, (event) => {
|
||||
console.info('mouseleave', event);
|
||||
});
|
||||
|
||||
art.events.loadImg('/assets/sample/poster.jpg').then(img => {
|
||||
console.info('loadImg', img);
|
||||
});
|
||||
```
|
||||
|
||||
:::warning 提示
|
||||
|
||||
假如你需要一些 `DOM` 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
|
||||
|
||||
:::
|
||||
|
||||
## `storage`
|
||||
|
||||
管理播放器的本地存储
|
||||
|
||||
- `name` 属性用于设置缓存的 `key`
|
||||
- `set` 方法用于设置缓存
|
||||
- `get` 方法用于获取缓存
|
||||
- `del` 方法用于删除缓存
|
||||
- `clear` 方法用于清空缓存
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.storage.set('test', { foo: 'bar' });
|
||||
const test = art.storage.get('test');
|
||||
console.info(test);
|
||||
art.storage.del('test');
|
||||
art.storage.clear();
|
||||
```
|
||||
|
||||
:::warning 提示
|
||||
|
||||
默认所有播放器实例都是共享同一个 `localStorage` 的，而且默认的 `key` 是 `artplayer_settings`
|
||||
|
||||
如果你想不同的播放器使用不同的 `localStorage`，你可以修改 `art.storage.name` 即可
|
||||
|
||||
:::
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.storage.name = 'your-storage-key';
|
||||
art.storage.set('test', { foo: 'bar' });
|
||||
```
|
||||
|
||||
## `icons`
|
||||
|
||||
管理播放器所有的 `svg` 图标
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.info(art.icons.loading);
|
||||
```
|
||||
|
||||
:::warning 这是所有图标的定义：
|
||||
|
||||
[artplayer/types/icons.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts)
|
||||
|
||||
:::
|
||||
|
||||
## `i18n`
|
||||
|
||||
管理播放器的 `i18n`
|
||||
|
||||
- `get` 方法用于获取 `i18n` 的值
|
||||
- `update` 方法用于更新 `i18n` 对象
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.info(art.i18n.get('Play'));
|
||||
|
||||
art.i18n.update({
|
||||
'zh-cn': {
|
||||
Play: 'Your Play'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
:::warning
|
||||
|
||||
使用 `art.i18n.update` 只能更新实例化之后的 `i18n`，假如想在实例化之前更新 `i18n`，请使用基础选项的 `i18n` 来更新
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## `notice`
|
||||
|
||||
管理播放器的提示语，只有一个 `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 = 'Video Ready To Play';
|
||||
})
|
||||
```
|
||||
|
||||
:::warning
|
||||
|
||||
如果想马上隐藏 `notice` 的显示：`art.notice.show = '';`
|
||||
|
||||
:::
|
||||
|
||||
## `layers`
|
||||
|
||||
管理播放器的层
|
||||
|
||||
- `add` 方法用于动态添加层
|
||||
- `show` 属性用于设置是否显示全部层
|
||||
- `toggle` 属性用于切换是否显示全部层
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.layers.add({
|
||||
html: 'Some Text',
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
art.layers.show = false;
|
||||
}, 1000);
|
||||
});
|
||||
```
|
||||
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
|
||||
:::
|
||||
|
||||
## `controls`
|
||||
|
||||
管理播放器的控制器
|
||||
|
||||
- `add` 方法用于动态添加控制器
|
||||
- `show` 属性用于设置是否显示全部控制器
|
||||
- `toggle` 属性用于切换是否显示全部控制器
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.controls.add({
|
||||
html: 'Some Text',
|
||||
position: 'left',
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
art.controls.show = false;
|
||||
}, 1000);
|
||||
});
|
||||
```
|
||||
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
|
||||
:::
|
||||
|
||||
## `contextmenu`
|
||||
|
||||
管理播放器的右键菜单
|
||||
|
||||
- `add` 方法用于动态添加菜单
|
||||
- `show` 属性用于设置是否显示全部菜单
|
||||
- `toggle` 属性用于切换是否显示全部菜单
|
||||
|
||||
<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.add({
|
||||
html: 'Some Text',
|
||||
});
|
||||
|
||||
art.contextmenu.show = true;
|
||||
setTimeout(() => {
|
||||
art.contextmenu.show = false;
|
||||
}, 1000);
|
||||
});
|
||||
```
|
||||
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/start/component.html](/start/component.html)
|
||||
|
||||
:::
|
||||
|
||||
## `subtitle`
|
||||
|
||||
管理播放器的字幕功能
|
||||
|
||||
- `url` 属性设置和返回当前字幕地址
|
||||
- `style` 方法设置当前字幕的样式
|
||||
- `switch` 方法设置当前字幕地址和选项
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.subtitle.url = '/assets/sample/subtitle.srt'
|
||||
art.subtitle.style({
|
||||
color: 'red',
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## `loading`
|
||||
|
||||
管理播放器的加载层
|
||||
|
||||
- `show` 属性用于设置是否显示加载层
|
||||
- `toggle` 属性用于切换是否显示加载层
|
||||
|
||||
<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;
|
||||
}, 1000);
|
||||
});
|
||||
```
|
||||
|
||||
## `hotkey`
|
||||
|
||||
管理播放器的快捷键功能
|
||||
|
||||
- `add` 方法用于添加快捷键
|
||||
- `remove` 方法用于删除快捷键
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
function hotkeyEvent(event) {
|
||||
console.info('click', event);
|
||||
}
|
||||
|
||||
art.on('ready', () => {
|
||||
art.hotkey.add(32, hotkeyEvent);
|
||||
setTimeout(() => {
|
||||
art.hotkey.remove(32, hotkeyEvent);
|
||||
}, 5000);
|
||||
});
|
||||
```
|
||||
|
||||
:::warning 提示
|
||||
|
||||
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
|
||||
|
||||
:::
|
||||
|
||||
## `mask`
|
||||
|
||||
管理播放器的遮罩层
|
||||
|
||||
- `show` 属性用于设置是否显示遮罩层
|
||||
- `toggle` 属性用于切换是否显示遮罩层
|
||||
|
||||
<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 = false;
|
||||
setTimeout(() => {
|
||||
art.mask.show = true;
|
||||
}, 1000);
|
||||
});
|
||||
```
|
||||
|
||||
## `setting`
|
||||
|
||||
管理播放器的设置面板
|
||||
|
||||
- `add` 方法用于动态添加设置项
|
||||
- `show` 属性用于设置是否显示全部设置项
|
||||
- `toggle` 属性用于切换是否显示全部设置项
|
||||
- `update` 方法动态更新设置项
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
subtitleOffset: true,
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.setting.show = true;
|
||||
setTimeout(() => {
|
||||
art.setting.show = false;
|
||||
}, 1000);
|
||||
});
|
||||
```
|
||||
|
||||
:::warning `设置面板` 请参考以下地址
|
||||
|
||||
[/start/setting.html](/start/setting.html)
|
||||
|
||||
:::
|
||||
|
||||
## `plugins`
|
||||
|
||||
管理播放器的插件功能，只有一个方法 `add` 用于动态添加插件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
function myPlugin(art) {
|
||||
console.info(art);
|
||||
return {
|
||||
name: 'myPlugin',
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('doSomething');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
art.on('ready', () => {
|
||||
art.plugins.add(myPlugin);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,212 @@
|
||||
# 静态属性
|
||||
|
||||
这里的 `静态属性` 是指挂载在 `构造函数` 的 `一级属性`，非常少使用
|
||||
|
||||
:::warning 提示
|
||||
|
||||
有些属性是全大写的，说明这些属性是不稳定的，可能会在将来被更改
|
||||
|
||||
:::
|
||||
|
||||
## `instances`
|
||||
|
||||
返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info([...Artplayer.instances]);
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.info([...Artplayer.instances]);
|
||||
```
|
||||
|
||||
## `version`
|
||||
|
||||
返回播放器的版本信息
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.version);
|
||||
```
|
||||
|
||||
## `env`
|
||||
|
||||
返回播放器的环境变量
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.env);
|
||||
```
|
||||
|
||||
## `build`
|
||||
|
||||
返回播放器的打包时间
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.build);
|
||||
```
|
||||
|
||||
## `config`
|
||||
|
||||
返回视频的默认配置
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.config);
|
||||
```
|
||||
|
||||
## `utils`
|
||||
|
||||
返回播放器的工具函数集合
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.utils);
|
||||
```
|
||||
|
||||
:::warning 全部工具函数请参考以下地址：
|
||||
|
||||
[artplayer/types/utils.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts)
|
||||
|
||||
:::
|
||||
|
||||
## `scheme`
|
||||
|
||||
返回播放器选项的校验方案
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.scheme);
|
||||
```
|
||||
|
||||
## `Emitter`
|
||||
|
||||
返回事件分发器的构造函数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.Emitter);
|
||||
```
|
||||
|
||||
## `validator`
|
||||
|
||||
返回选项的校验函数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.validator);
|
||||
```
|
||||
|
||||
## `kindOf`
|
||||
|
||||
返回类型检测的函数工具
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.kindOf);
|
||||
```
|
||||
|
||||
## `html`
|
||||
|
||||
返回播放器所需的 `html` 字符串
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.html);
|
||||
```
|
||||
|
||||
## `option`
|
||||
|
||||
返回播放器的默认选项
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
console.info(Artplayer.option);
|
||||
```
|
||||
|
||||
## `DEBUG`
|
||||
|
||||
## `CONTEXTMENU`
|
||||
|
||||
## `NOTICE_TIME`
|
||||
|
||||
## `SETTING_WIDTH`
|
||||
|
||||
## `SETTING_ITEM_WIDTH`
|
||||
|
||||
## `SETTING_ITEM_HEIGHT`
|
||||
|
||||
## `INDICATOR_SIZE`
|
||||
|
||||
## `INDICATOR_SIZE_ICON`
|
||||
|
||||
## `INDICATOR_SIZE_MOBILE`
|
||||
|
||||
## `INDICATOR_SIZE_MOBILE_ICON`
|
||||
|
||||
## `VOLUME_PANEL_WIDTH`
|
||||
|
||||
## `VOLUME_HANDLE_WIDTH`
|
||||
|
||||
## `RESIZE_TIME`
|
||||
|
||||
## `SCROLL_TIME`
|
||||
|
||||
## `SCROLL_GAP`
|
||||
|
||||
## `AUTO_PLAYBACK_MAX`
|
||||
|
||||
## `AUTO_PLAYBACK_MIN`
|
||||
|
||||
## `AUTO_PLAYBACK_TIMEOUT`
|
||||
|
||||
## `RECONNECT_TIME_MAX`
|
||||
|
||||
## `RECONNECT_SLEEP_TIME`
|
||||
|
||||
## `CONTROL_HIDE_TIME`
|
||||
|
||||
## `DB_CLICE_TIME`
|
||||
|
||||
## `MOBILE_AUTO_PLAYBACKRATE`
|
||||
|
||||
## `MOBILE_AUTO_PLAYBACKRATE_TIME`
|
||||
|
||||
## `MOBILE_AUTO_ORIENTATION_TIME`
|
||||
|
||||
## `INFO_LOOP_TIME`
|
||||
|
||||
## `FAST_FORWARD_VALUE`
|
||||
|
||||
## `FAST_FORWARD_TIME`
|
||||
|
||||
## `TOUCH_MOVE_RATIO`
|
||||
|
||||
## `VOLUME_STEP`
|
||||
|
||||
## `SEEK_STEP`
|
||||
|
||||
## `PROGRESS_HEIGHT`
|
||||
|
||||
## `PLAYBACK_RATE`
|
||||
|
||||
## `ASPECT_RATIO`
|
||||
|
||||
## `FLIP`
|
||||
@@ -0,0 +1,712 @@
|
||||
# 实例事件
|
||||
|
||||
播放器的事件分为两种，一种视频的 `原生事件` (前缀 `video:`)，另外一种是 `自定义事件`
|
||||
|
||||
监听事件：
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('video:canplay', () => {
|
||||
console.info('video:canplay');
|
||||
});
|
||||
```
|
||||
|
||||
只监听一次事件：
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.once('video:canplay', () => {
|
||||
console.info('video:canplay');
|
||||
});
|
||||
```
|
||||
|
||||
手动触发事件：
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.emit('focus');
|
||||
```
|
||||
|
||||
移除事件：
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
const onReady = () => {
|
||||
console.info('ready');
|
||||
art.off('ready', onReady);
|
||||
}
|
||||
|
||||
art.on('ready', onReady);
|
||||
```
|
||||
|
||||
:::warning 全部事件请参考以下地址：
|
||||
|
||||
[artplayer/types/events.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts)
|
||||
|
||||
:::
|
||||
|
||||
## `ready`
|
||||
|
||||
当播放器首次可以播放器时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info('ready');
|
||||
});
|
||||
```
|
||||
|
||||
## `restart`
|
||||
|
||||
当播放器切换地址后并可以播放时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{10}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.url = '/assets/sample/video.mp4'
|
||||
});
|
||||
|
||||
art.on('restart', () => {
|
||||
console.info('restart');
|
||||
});
|
||||
```
|
||||
|
||||
## `pause`
|
||||
|
||||
当播放器暂停时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('pause', () => {
|
||||
console.info('pause');
|
||||
});
|
||||
```
|
||||
|
||||
## `play`
|
||||
|
||||
当播放器播放时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('play', () => {
|
||||
console.info('play');
|
||||
});
|
||||
```
|
||||
|
||||
## `hotkey`
|
||||
|
||||
当播放器热键被按下时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('hotkey', (event) => {
|
||||
console.info('hotkey', event);
|
||||
});
|
||||
```
|
||||
|
||||
## `destroy`
|
||||
|
||||
当播放器销毁时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{10}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.destroy();
|
||||
});
|
||||
|
||||
art.on('destroy', () => {
|
||||
console.info('destroy');
|
||||
});
|
||||
```
|
||||
|
||||
## `url`
|
||||
|
||||
当视频地址变化时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{10}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.url = '/assets/sample/video.mp4?t=0'
|
||||
});
|
||||
|
||||
art.on('url', (url) => {
|
||||
console.info('url', url);
|
||||
});
|
||||
```
|
||||
|
||||
## `focus`
|
||||
|
||||
当播放器获得焦点时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('focus', () => {
|
||||
console.info('focus');
|
||||
});
|
||||
```
|
||||
|
||||
## `blur`
|
||||
|
||||
当播放器失去焦点时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('blur', () => {
|
||||
console.info('blur');
|
||||
});
|
||||
```
|
||||
|
||||
## `dblclick`
|
||||
|
||||
当播放器被双击时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('dblclick', () => {
|
||||
console.info('dblclick');
|
||||
});
|
||||
```
|
||||
|
||||
## `click`
|
||||
|
||||
当播放器被单击时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('click', () => {
|
||||
console.info('click');
|
||||
});
|
||||
```
|
||||
|
||||
## `error`
|
||||
|
||||
当播放器加载视频发生错误时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/404.mp4',
|
||||
});
|
||||
|
||||
art.on('error', (error, reconnectTime) => {
|
||||
console.info(error, reconnectTime);
|
||||
});
|
||||
```
|
||||
|
||||
## `hover`
|
||||
|
||||
当播放器被鼠标移出或者移入时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('hover', (state) => {
|
||||
console.info('hover', state);
|
||||
});
|
||||
```
|
||||
|
||||
## `mousemove`
|
||||
|
||||
当播放器被鼠标经过时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('mousemove', (event) => {
|
||||
console.info('mousemove', event);
|
||||
});
|
||||
```
|
||||
|
||||
## `resize`
|
||||
|
||||
当播放器尺寸变化时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('resize', () => {
|
||||
console.info('resize');
|
||||
});
|
||||
```
|
||||
|
||||
## `view`
|
||||
|
||||
当播放器出现在视口时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('view', (state) => {
|
||||
console.info('view', state);
|
||||
});
|
||||
```
|
||||
|
||||
## `aspectRatio`
|
||||
|
||||
当播放器长宽比变化时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
aspectRatio: true,
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.on('aspectRatio', (aspectRatio) => {
|
||||
console.info('aspectRatio', aspectRatio);
|
||||
});
|
||||
```
|
||||
|
||||
## `autoHeight`
|
||||
|
||||
当播放器自动设置高度时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{10}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.autoHeight = true;
|
||||
});
|
||||
|
||||
art.on('autoHeight', (height) => {
|
||||
console.info('autoHeight', height);
|
||||
});
|
||||
```
|
||||
|
||||
## `autoSize`
|
||||
|
||||
当播放器自动设置尺寸时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
});
|
||||
|
||||
art.on('autoSize', () => {
|
||||
console.info('autoSize');
|
||||
});
|
||||
```
|
||||
|
||||
## `flip`
|
||||
|
||||
当播放器发生翻转时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
flip: true,
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.on('flip', (flip) => {
|
||||
console.info('flip', flip);
|
||||
});
|
||||
```
|
||||
|
||||
## `fullscreen`
|
||||
|
||||
当播放器发生窗口全屏时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
});
|
||||
|
||||
art.on('fullscreen', (state) => {
|
||||
console.info('fullscreen', state);
|
||||
});
|
||||
```
|
||||
|
||||
## `fullscreenWeb`
|
||||
|
||||
当播放器发生网页全屏时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreenWeb: true,
|
||||
});
|
||||
|
||||
art.on('fullscreenWeb', (state) => {
|
||||
console.info('fullscreenWeb', state);
|
||||
});
|
||||
```
|
||||
|
||||
## `mini`
|
||||
|
||||
当播放器进入迷你模式时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{10}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.mini = true;
|
||||
});
|
||||
|
||||
art.on('mini', (state) => {
|
||||
console.info('mini', state);
|
||||
});
|
||||
```
|
||||
|
||||
## `pip`
|
||||
|
||||
当播放器进入画中画时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
pip: true,
|
||||
});
|
||||
|
||||
art.on('pip', (state) => {
|
||||
console.info('pip', state);
|
||||
});
|
||||
```
|
||||
|
||||
## `screenshot`
|
||||
|
||||
当播放器被截图时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
screenshot: true,
|
||||
});
|
||||
|
||||
art.on('screenshot', (dataUri) => {
|
||||
console.info('screenshot', dataUri);
|
||||
});
|
||||
```
|
||||
|
||||
## `seek`
|
||||
|
||||
当播放器发生时间跳转时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('seek', (currentTime) => {
|
||||
console.info('seek', currentTime);
|
||||
});
|
||||
```
|
||||
|
||||
## `subtitleOffset`
|
||||
|
||||
当播放器发生字幕偏移时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{11}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitleOffset: true,
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.on('subtitleOffset', (offset) => {
|
||||
console.info('subtitleOffset', offset);
|
||||
});
|
||||
```
|
||||
|
||||
## `subtitleUpdate`
|
||||
|
||||
当字幕更新时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{9}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
});
|
||||
|
||||
art.on('subtitleUpdate', (text) => {
|
||||
console.info('subtitleUpdate', text);
|
||||
});
|
||||
```
|
||||
|
||||
## `subtitleLoad`
|
||||
|
||||
当字幕加载时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{9}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
});
|
||||
|
||||
art.on('subtitleLoad', (url) => {
|
||||
console.info('subtitleLoad', url);
|
||||
});
|
||||
```
|
||||
|
||||
## `subtitleSwitch`
|
||||
|
||||
当字幕切换时触发
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{13}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.subtitle.url = '/assets/sample/subtitle.ass';
|
||||
});
|
||||
|
||||
art.on('subtitleSwitch', (url) => {
|
||||
console.info('subtitleSwitch', url);
|
||||
});
|
||||
```
|
||||
|
||||
## `video:canplay`
|
||||
|
||||
浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
|
||||
|
||||
## `video:canplaythrough`
|
||||
|
||||
浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
|
||||
|
||||
## `video:complete`
|
||||
|
||||
OfflineAudioContext 渲染完成
|
||||
|
||||
## `video:durationchange`
|
||||
|
||||
duration 属性的值改变时触发
|
||||
|
||||
## `video:emptied`
|
||||
|
||||
媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它
|
||||
|
||||
## `video:ended`
|
||||
|
||||
视频停止播放，因为 media 已经到达结束点
|
||||
|
||||
## `video:error`
|
||||
|
||||
获取媒体数据时出错，或者资源类型不是受支持的媒体格式
|
||||
|
||||
## `video:loadeddata`
|
||||
|
||||
media 中的首帧已经完成加载
|
||||
|
||||
## `video:loadedmetadata`
|
||||
|
||||
已加载元数据
|
||||
|
||||
## `video:pause`
|
||||
|
||||
播放已暂停
|
||||
|
||||
## `video:play`
|
||||
|
||||
播放已开始
|
||||
|
||||
## `video:playing`
|
||||
|
||||
由于缺乏数据而暂停或延迟后，播放准备开始
|
||||
|
||||
## `video:progress`
|
||||
|
||||
在浏览器加载资源时周期性触发
|
||||
|
||||
## `video:ratechange`
|
||||
|
||||
播放速率发生变化
|
||||
|
||||
## `video:seeked`
|
||||
|
||||
跳帧（seek）操作完成
|
||||
|
||||
## `video:seeking`
|
||||
|
||||
跳帧（seek）操作开始
|
||||
|
||||
## `video:stalled`
|
||||
|
||||
用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现
|
||||
|
||||
## `video:suspend`
|
||||
|
||||
媒体数据加载已暂停
|
||||
|
||||
## `video:timeupdate`
|
||||
|
||||
currentTime 属性指定的时间发生变化
|
||||
|
||||
## `video:volumechange`
|
||||
|
||||
音量发生变化
|
||||
|
||||
## `video:waiting`
|
||||
|
||||
由于暂时缺少数据，播放已停止
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
# 编写插件
|
||||
|
||||
但你已经知道播放器的`属性`, `方法`和`事件`后，再编写插件是非常简单的事
|
||||
|
||||
可以在实例化的时候加载插件的函数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{15}
|
||||
function myPlugin(art) {
|
||||
console.info(art);
|
||||
return {
|
||||
name: 'myPlugin',
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('doSomething');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [myPlugin],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.plugins.myPlugin);
|
||||
});
|
||||
```
|
||||
|
||||
可以在实例化之后再加载插件的函数
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{17}
|
||||
function myPlugin(art) {
|
||||
console.info(art);
|
||||
return {
|
||||
name: 'myPlugin',
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('doSomething');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.plugins.add(myPlugin);
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.plugins.myPlugin);
|
||||
});
|
||||
```
|
||||
|
||||
例如我想写一个在视频暂停后，显示一个图片广告的插件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
function adsPlugin(option) {
|
||||
return (art) => {
|
||||
art.layers.add({
|
||||
name: 'ads',
|
||||
html: `<img style="width: 100px" src="${option.url}">`,
|
||||
style: {
|
||||
display: 'none',
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
},
|
||||
});
|
||||
|
||||
function show() {
|
||||
art.layers.ads.style.display = 'block';
|
||||
}
|
||||
|
||||
function hide() {
|
||||
art.layers.ads.style.display = 'none';
|
||||
}
|
||||
|
||||
art.controls.add({
|
||||
name: 'hide-ads',
|
||||
position: 'right',
|
||||
html: 'Hide Ads',
|
||||
tooltip: 'Hide Ads',
|
||||
click: hide,
|
||||
style: {
|
||||
marginRight: '20px'
|
||||
}
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'show-ads',
|
||||
position: 'right',
|
||||
html: 'Show Ads',
|
||||
tooltip: 'Show Ads',
|
||||
click: show,
|
||||
});
|
||||
|
||||
art.on('play', hide);
|
||||
art.on('pause', show);
|
||||
|
||||
return {
|
||||
name: 'adsPlugin',
|
||||
show,
|
||||
hide
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
adsPlugin({
|
||||
url: '/assets/sample/layer.png'
|
||||
})
|
||||
],
|
||||
});
|
||||
```
|
||||
+283
-184
@@ -1,18 +1,16 @@
|
||||
---
|
||||
title: 常用属性
|
||||
sidebar_position: 3
|
||||
slug: /zh-cn/propertie
|
||||
---
|
||||
# 实例属性
|
||||
|
||||
## play
|
||||
这里的 `实例属性` 是指挂载在 `实例` 的 `一级属性`，比较常用
|
||||
|
||||
- 类型: `Function`
|
||||
## `play`
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
播放视频
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -24,15 +22,15 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## pause
|
||||
## `pause`
|
||||
|
||||
- 类型: `Function`
|
||||
- Type: `Function`
|
||||
|
||||
暂停视频
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{11}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -48,15 +46,15 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## toggle
|
||||
## `toggle`
|
||||
|
||||
- 类型: `Function`
|
||||
- Type: `Function`
|
||||
|
||||
切换视频的播放和暂停
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{11}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -72,16 +70,36 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## seek
|
||||
## `destroy`
|
||||
|
||||
- 类型: `Setter`
|
||||
- 参数: `Number`
|
||||
- Type: `Function`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.destroy();
|
||||
});
|
||||
```
|
||||
|
||||
## `seek`
|
||||
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
视频时间跳转，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -92,16 +110,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## forward
|
||||
## `forward`
|
||||
|
||||
- 类型: `Setter`
|
||||
- 参数: `Number`
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
视频时间快进，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -112,16 +130,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## backward
|
||||
## `backward`
|
||||
|
||||
- 类型: `Setter`
|
||||
- 参数: `Number`
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
视频时间快退，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{10}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -136,16 +154,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## volume
|
||||
## `volume`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Number`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
设置和获取视频音量，范围在：`[0, 1]`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -158,40 +176,38 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## url
|
||||
## `url`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
设置和获取视频地址
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
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
|
||||
## `switchUrl`
|
||||
|
||||
- 类型: `Function`
|
||||
- 参数: `String`
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
设置视频地址，设置时和 `url` 类似，但会执行一些优化操作
|
||||
|
||||
函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
|
||||
函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{9}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -205,18 +221,18 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## switchQuality
|
||||
## `switchQuality`
|
||||
|
||||
- 类型: `Function`
|
||||
- 参数: `String`
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
设置视频画质地址，和 `switchUrl` 类似，但会带上之前的播放进度
|
||||
|
||||
函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
|
||||
函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{9}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -230,16 +246,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## muted
|
||||
## `muted`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
设置和获取视频是否静音
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -252,16 +268,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## currentTime
|
||||
## `currentTime`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Number`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
设置和获取视频当前时间，设置时间时和 `seek` 类似，但它不会触发额外的事件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -274,15 +290,15 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## duration
|
||||
## `duration`
|
||||
|
||||
- 类型: `Getter`
|
||||
- Type: `Getter`
|
||||
|
||||
获取视频时长
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -293,115 +309,112 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
:::warning 提示
|
||||
|
||||
有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 `0`
|
||||
|
||||
:::
|
||||
|
||||
## screenshot
|
||||
## `screenshot`
|
||||
|
||||
- 类型: `Function`
|
||||
- Type: `Function`
|
||||
|
||||
下载当前视频帧的截图
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 10;
|
||||
art.once('video:canplay', () => {
|
||||
art.screenshot();
|
||||
});
|
||||
art.screenshot();
|
||||
});
|
||||
```
|
||||
|
||||
## getDataURL
|
||||
## `getDataURL`
|
||||
|
||||
- 类型: `Function`
|
||||
- Type: `Function`
|
||||
|
||||
获取当前视频帧的截图的`base64`地址，返回的是一个 `Promise`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
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));
|
||||
art.on('ready', async () => {
|
||||
const url = await art.getDataURL();
|
||||
console.info(url)
|
||||
});
|
||||
```
|
||||
|
||||
## getBlobUrl
|
||||
## `getBlobUrl`
|
||||
|
||||
- 类型: `Function`
|
||||
- Type: `Function`
|
||||
|
||||
获取当前视频帧的截图的`blob`地址，返回的是一个 `Promise`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
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));
|
||||
art.on('ready', async () => {
|
||||
const url = await art.getBlobUrl();
|
||||
console.info(url);
|
||||
});
|
||||
```
|
||||
|
||||
## fullscreen
|
||||
## `fullscreen`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
设置和获取播放器窗口全屏
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{9}
|
||||
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);
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '全屏开关',
|
||||
click: function () {
|
||||
art.fullscreen = !art.fullscreen;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
:::warning 提示
|
||||
|
||||
由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
|
||||
|
||||
:::
|
||||
|
||||
## fullscreenWeb
|
||||
## `fullscreenWeb`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
设置和获取播放器网页全屏
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8,11}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -417,47 +430,47 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## pip
|
||||
## `pip`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
设置和获取播放器画中画模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{9}
|
||||
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);
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'PIP',
|
||||
click: function () {
|
||||
art.pip = !art.pip;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
:::warning 提示
|
||||
|
||||
由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
|
||||
|
||||
:::
|
||||
|
||||
## poster
|
||||
## `poster`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
设置和获取视频海报，只有在视频播放前才能看到海报效果
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{9}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -471,16 +484,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## mini
|
||||
## `mini`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
设置和获取播放器迷你模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -491,16 +504,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## playing
|
||||
## `playing`
|
||||
|
||||
- 类型: `Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
获取视频是否正在播放中
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -509,21 +522,19 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.playing);
|
||||
art.play();
|
||||
console.info(art.playing);
|
||||
});
|
||||
```
|
||||
|
||||
## autoSize
|
||||
## `autoSize`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
设置视频是否自适应尺寸，设置为 `true` 之后它会只执行一次
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -536,15 +547,15 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## rect
|
||||
## `rect`
|
||||
|
||||
- 类型: `Getter`
|
||||
- Type: `Getter`
|
||||
|
||||
获取播放器的尺寸和坐标信息
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -555,22 +566,22 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
:::warning 提示
|
||||
|
||||
尺寸和坐标信息是通过 `getBoundingClientRect` 获取的
|
||||
|
||||
:::
|
||||
|
||||
## flip
|
||||
## `flip`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
设置和获取播放器翻转，支持`normal`、 `horizontal`、 `vertical`
|
||||
设置和获取播放器翻转，支持`normal`, `horizontal`, `vertical`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -583,16 +594,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## playbackRate
|
||||
## `playbackRate`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Number`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
设置和获取播放器播放速度，支持`0.5`、`0.75`、`1.0`、`1.25`、`1.5`、`1.75`、`2.0`
|
||||
设置和获取播放器播放速度
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -605,16 +616,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## aspectRatio
|
||||
## `aspectRatio`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
设置和获取播放器长宽比，支持`default`、`4:3`、`16:9`
|
||||
设置和获取播放器长宽比
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -627,16 +638,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## loop
|
||||
## `loop`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Array`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Array`
|
||||
|
||||
设置和获取区间循序播放，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -649,44 +660,54 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
:::warning 提示
|
||||
|
||||
删除区间循环播放，只需要设置 `loop` 为 `[]` 即可
|
||||
|
||||
`art.loop` 与 `art.option.loop` 是两个不同的东西，请勿弄乱
|
||||
|
||||
:::
|
||||
|
||||
## autoHeight
|
||||
## `autoHeight`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
当容器只有宽度，但你希望容器高度能自适应播放器的长宽比
|
||||
当容器只有宽度，该属性可以自动计算出并设置视频的高度，设置为 `true` 之后它会只执行一次
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7,11}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.autoHeight);
|
||||
art.autoHeight = true;
|
||||
console.info(art.autoHeight);
|
||||
});
|
||||
|
||||
art.on('resize', () => {
|
||||
art.autoHeight = true;
|
||||
});
|
||||
```
|
||||
|
||||
## attr
|
||||
:::warning 提示
|
||||
|
||||
- 类型: `Function`
|
||||
- 参数: `String`
|
||||
当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
|
||||
|
||||
:::
|
||||
|
||||
## `attr`
|
||||
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
动态获取和设置 video 元素的属性
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -699,16 +720,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## title
|
||||
## `title`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
动态获取和设置播放器标题
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -721,16 +742,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## type
|
||||
## `type`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
动态获取和设置视频类型
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -743,16 +764,16 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## theme
|
||||
## `theme`
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
动态获取和设置播放器主题颜色
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -765,7 +786,7 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## airplay
|
||||
## `airplay`
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
@@ -773,13 +794,12 @@ art.on('ready', () => {
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{10}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'airplay',
|
||||
position: 'right',
|
||||
html: 'AirPlay',
|
||||
click: function () {
|
||||
@@ -790,22 +810,101 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## destroy
|
||||
## `loaded`
|
||||
|
||||
- 类型: `Function`
|
||||
- 参数: `Boolean`
|
||||
- Type: `Getter`
|
||||
|
||||
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true`
|
||||
视频缓存的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.destroy();
|
||||
art.on('video:timeupdate', () => {
|
||||
console.info(art.loaded);
|
||||
});
|
||||
```
|
||||
|
||||
## `played`
|
||||
|
||||
- Type: `Getter`
|
||||
|
||||
视频播放的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('video:timeupdate', () => {
|
||||
console.info(art.played);
|
||||
});
|
||||
```
|
||||
|
||||
## `proxy`
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
`DOM` 事件的代理函数，实质上代理了 `addEventListener` 和 `removeEventListener`, 当使用 `proxy` 来处理事件，播放器销毁时也会自动销毁该事件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7-10}
|
||||
var container = document.querySelector('.artplayer-app');
|
||||
|
||||
var art = new Artplayer({
|
||||
container: container,
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.proxy(container, 'click', event => {
|
||||
console.info(event);
|
||||
});
|
||||
```
|
||||
|
||||
:::warning 提示
|
||||
|
||||
假如你需要一些 `DOM` 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
|
||||
|
||||
:::
|
||||
|
||||
## `query`
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
`DOM` 的查询函数，类似 `document.querySelector`，但被查询的对象局限于当前播放器内，可以避免同类名的错误
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.info(art.query('.art-video'));
|
||||
```
|
||||
|
||||
## `video`
|
||||
|
||||
- Type: `Element`
|
||||
|
||||
快捷返回播放器的 `video` 元素
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.info(art.video);
|
||||
```
|
||||
@@ -0,0 +1 @@
|
||||
# WIP...
|
||||
+106
-111
@@ -1,82 +1,55 @@
|
||||
---
|
||||
title: 快速上手
|
||||
sidebar_position: 1
|
||||
slug: /zh-cn
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
# 安装使用
|
||||
|
||||
## 安装
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
::: code-group
|
||||
|
||||
```bash
|
||||
```bash [npm]
|
||||
npm install artplayer
|
||||
```
|
||||
|
||||
```js showLineNumbers
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
const art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="yarn">
|
||||
|
||||
```bash
|
||||
```bash [yarn]
|
||||
yarn add artplayer
|
||||
```
|
||||
|
||||
```js showLineNumbers
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer
|
||||
```
|
||||
|
||||
```html [script]
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## `CDN`
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer/dist/artplayer.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
::: code-group
|
||||
|
||||
```js [index.js]
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
const art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
url: 'path/to/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="script" label="script">
|
||||
|
||||
```html showLineNumbers
|
||||
<!-- 本地 -->
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
|
||||
```
|
||||
|
||||
```js showLineNumbers
|
||||
const art = new window.Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## 使用
|
||||
|
||||
:::danger 提示
|
||||
|
||||
播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
|
||||
|
||||
:::
|
||||
|
||||
### 在 `Html` 使用
|
||||
|
||||
```html showLineNumbers title="index.html"
|
||||
<!DOCTYPE html>
|
||||
```html [index.html]
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer Demo</title>
|
||||
@@ -90,36 +63,29 @@ const art = new window.Artplayer({
|
||||
</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>
|
||||
```
|
||||
|
||||
### 在 `Vue.js`、`Nuxt.js` 使用
|
||||
:::
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="Vue.js" label="Vue.js 模板">
|
||||
::: warning 提示
|
||||
|
||||
🚀 [artplayer-template/vue.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue3.js)
|
||||
播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Nuxt.js" label="Nuxt.js 模板">
|
||||
:::
|
||||
|
||||
🚀 [artplayer-template/nuxt.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js)
|
||||
::: tip 以下链接可以看到更多的使用例子
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
[/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="Artplayer.vue" label="Artplayer.vue">
|
||||
:::
|
||||
|
||||
```js showLineNumbers title="Artplayer.vue"
|
||||
## `Vue.js`
|
||||
|
||||
::: code-group
|
||||
|
||||
```vue [Artplayer.vue]
|
||||
<template>
|
||||
<div ref="artRef"></div>
|
||||
</template>
|
||||
@@ -158,10 +124,7 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="App.vue" label="App.vue">
|
||||
|
||||
```js showLineNumbers title="App.vue"
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
|
||||
</template>
|
||||
@@ -173,7 +136,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
url: "https://artplayer.org/assets/sample/video.mp4",
|
||||
url: "path/to/video.mp4",
|
||||
},
|
||||
style: {
|
||||
width: "600px",
|
||||
@@ -187,35 +150,26 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getInstance(art) {
|
||||
console.log(art);
|
||||
console.info(art);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
:::
|
||||
|
||||
### 在 `React.js`、`Next.js` 使用
|
||||
::: warning Artplayer 非响应式：
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="React.js" label="React.js 模板">
|
||||
在 `Vue.js` 里直接修改 `option` 是不会改变播放器的
|
||||
|
||||
🚀 [artplayer-template/react.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js)
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Next.js" label="Next.js 模板">
|
||||
## `React.js`
|
||||
|
||||
🚀 [artplayer-template/next.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js)
|
||||
::: code-group
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="ArtPlayer.jsx" label="ArtPlayer.jsx">
|
||||
|
||||
```jsx showLineNumbers title="ArtPlayer.jsx"
|
||||
```jsx [Artplayer.jsx]
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
@@ -243,12 +197,9 @@ export default function Player({ option, getInstance, ...rest }) {
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="App.jsx" label="App.jsx">
|
||||
|
||||
```jsx showLineNumbers title="App.jsx"
|
||||
```jsx [app.jsx]
|
||||
import React from 'react';
|
||||
import Artplayer from './ArtPlayer';
|
||||
import Artplayer from './ArtPlayer.jsx';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -262,7 +213,7 @@ function App() {
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
}}
|
||||
getInstance={(art) => console.log(art)}
|
||||
getInstance={(art) => console.info(art)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -271,5 +222,49 @@ function App() {
|
||||
export default App;
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
:::
|
||||
|
||||
::: warning Artplayer 非响应式：
|
||||
|
||||
在 `React.js` 里直接修改 `option` 是不会改变播放器的
|
||||
|
||||
:::
|
||||
|
||||
## 语法提示
|
||||
|
||||
有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型
|
||||
|
||||
变量：
|
||||
|
||||
```js
|
||||
/**
|
||||
* @type {import("artplayer")}
|
||||
*/
|
||||
let art = null;
|
||||
```
|
||||
|
||||
参数：
|
||||
|
||||
```js
|
||||
/**
|
||||
* @param {import("artplayer")} art
|
||||
*/
|
||||
function getInstance(art) {
|
||||
//
|
||||
}
|
||||
```
|
||||
|
||||
属性：
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/**
|
||||
* @type {import("artplayer")}
|
||||
*/
|
||||
art: null,
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,36 @@
|
||||
# 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://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{18-21,25}
|
||||
function playMpd(video, url, art) {
|
||||
if (dashjs.supportsMediaSource()) {
|
||||
const dash = dashjs.MediaPlayer().create();
|
||||
dash.initialize(video, url, art.option.autoplay);
|
||||
|
||||
// optional
|
||||
art.dash = dash;
|
||||
art.once('url', () => dash.destroy());
|
||||
art.once('destroy', () => dash.destroy());
|
||||
} else {
|
||||
art.notice.show = 'Unsupported playback format: mpd';
|
||||
}
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
|
||||
type: 'mpd',
|
||||
customType: {
|
||||
mpd: playMpd
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.dash);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,37 @@
|
||||
# flv.js
|
||||
|
||||
👉 [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{19-22,26}
|
||||
function playFlv(video, url, art) {
|
||||
if (flvjs.isSupported()) {
|
||||
const flv = flvjs.createPlayer({ type: 'flv', url });
|
||||
flv.attachMediaElement(video);
|
||||
flv.load();
|
||||
|
||||
// optional
|
||||
art.flv = flv;
|
||||
art.once('url', () => flv.destroy());
|
||||
art.once('destroy', () => flv.destroy());
|
||||
} else {
|
||||
art.notice.show = 'Unsupported playback format: flv';
|
||||
}
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.flv',
|
||||
type: 'flv',
|
||||
customType: {
|
||||
flv: playFlv,
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.flv);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,39 @@
|
||||
# hls.js
|
||||
|
||||
👉 [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
|
||||
|
||||
<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{21-24,28}
|
||||
function playM3u8(video, url, art) {
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
|
||||
// optional
|
||||
art.hls = hls;
|
||||
art.once('url', () => hls.destroy());
|
||||
art.once('destroy', () => hls.destroy());
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url;
|
||||
} else {
|
||||
art.notice.show = 'Unsupported playback format: m3u8';
|
||||
}
|
||||
}
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
|
||||
type: 'm3u8',
|
||||
customType: {
|
||||
m3u8: playM3u8,
|
||||
},
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.hls);
|
||||
});
|
||||
```
|
||||
+29
-23
@@ -1,7 +1,4 @@
|
||||
---
|
||||
title: 广告插件
|
||||
sidebar_position: 2
|
||||
---
|
||||
# 视频广告
|
||||
|
||||
## 演示
|
||||
|
||||
@@ -9,32 +6,39 @@ sidebar_position: 2
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过 `npm` 安装：
|
||||
::: code-group
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-ads
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-ads
|
||||
```
|
||||
|
||||
### 通过 `yarn` 安装：
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-ads
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-ads
|
||||
```
|
||||
|
||||
### 通过 `script` 安装：
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-ads
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- 本地 -->
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-ads.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>
|
||||
```
|
||||
|
||||
然后你可以通过 `window.artplayerPluginAds` 访问到插件函数
|
||||
:::
|
||||
|
||||
## CDN
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
@@ -82,11 +86,13 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
|
||||
// ad is clicked
|
||||
art.on('artplayerPluginAds:click', (ads) => {
|
||||
console.info('广告被点击', ads);
|
||||
console.info(ads);
|
||||
});
|
||||
|
||||
// Ad skipped
|
||||
art.on('artplayerPluginAds:skip', (ads) => {
|
||||
console.info('广告被跳过', ads);
|
||||
console.info(ads);
|
||||
});
|
||||
```
|
||||
+32
-29
@@ -1,7 +1,4 @@
|
||||
---
|
||||
title: 控制器插件
|
||||
sidebar_position: 5
|
||||
---
|
||||
# 控制器皮肤
|
||||
|
||||
## 演示
|
||||
|
||||
@@ -9,32 +6,39 @@ sidebar_position: 5
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过 `npm` 安装：
|
||||
::: code-group
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-control
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-control
|
||||
```
|
||||
|
||||
### 通过 `yarn` 安装：
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-control
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-control
|
||||
```
|
||||
|
||||
### 通过 `script` 安装：
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-control
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- 本地 -->
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-control.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js"></script>
|
||||
```
|
||||
|
||||
然后你可以通过 `window.artplayerPluginControl` 访问到插件函数
|
||||
:::
|
||||
|
||||
## CDN
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
@@ -42,7 +46,7 @@ $ yarn add artplayer-plugin-control
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
@@ -54,13 +58,12 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## 接口
|
||||
## `enable`
|
||||
|
||||
### enable
|
||||
- Type: `Getter/Setter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
- 类型: `Getter/Setter`
|
||||
|
||||
是否启用新的控制器UI
|
||||
是否启用新的控制器皮肤
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-control/index.js">
|
||||
▶ Run Code
|
||||
@@ -75,7 +78,7 @@ var art = new Artplayer({
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '<button type="button">切换 UI</button>',
|
||||
html: '<button type="button">Switch UI</button>',
|
||||
click: function () {
|
||||
const { enable } = art.plugins.artplayerPluginControl;
|
||||
art.plugins.artplayerPluginControl.enable = !enable;
|
||||
@@ -86,4 +89,4 @@ var art = new Artplayer({
|
||||
artplayerPluginControl(),
|
||||
],
|
||||
});
|
||||
``
|
||||
```
|
||||
+74
-84
@@ -1,7 +1,4 @@
|
||||
---
|
||||
title: 弹幕库插件
|
||||
sidebar_position: 1
|
||||
---
|
||||
# 弹幕库
|
||||
|
||||
## 演示
|
||||
|
||||
@@ -9,36 +6,67 @@ sidebar_position: 1
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过 `npm` 安装：
|
||||
::: code-group
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-danmuku
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
### 通过 `yarn` 安装：
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-danmuku
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
### 通过 `script` 安装：
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- 本地 -->
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-danmuku.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
|
||||
```
|
||||
|
||||
然后你可以通过 `window.artplayerPluginDanmuku` 访问到插件函数
|
||||
:::
|
||||
|
||||
## 使用
|
||||
## CDN
|
||||
|
||||
### 使用弹幕数组
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 选项
|
||||
|
||||
```js
|
||||
{
|
||||
danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
|
||||
speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
|
||||
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
|
||||
fontSize: 25, // 字体大小，支持数字和百分比
|
||||
color: '#FFFFFF', // 默认字体颜色
|
||||
mode: 0, // 默认模式，0-滚动，1-静止
|
||||
margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
|
||||
antiOverlap: true, // 是否防重叠
|
||||
useWorker: true, // 是否使用 web worker
|
||||
synchronousPlayback: false, // 是否同步到播放速度
|
||||
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
|
||||
lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
|
||||
maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
|
||||
minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
|
||||
maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
|
||||
theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
|
||||
beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
|
||||
// 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
|
||||
mount: document.querySelector('.artplayer-danmuku'),
|
||||
}
|
||||
```
|
||||
|
||||
## 使用弹幕数组
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
@@ -48,10 +76,7 @@ $ yarn add artplayer-plugin-danmuku
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
setting: true,
|
||||
playbackRate: true,
|
||||
fullscreenWeb: true,
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
// 弹幕数组
|
||||
@@ -61,7 +86,7 @@ var art = new Artplayer({
|
||||
time: 1, // 发送时间，单位秒
|
||||
color: '#fff', // 弹幕局部颜色
|
||||
border: false, // 是否显示描边
|
||||
mode: 0, // 弹幕模式: 0表示滚动、1静止
|
||||
mode: 0, // 弹幕模式: 0表示滚动, 1静止
|
||||
},
|
||||
{
|
||||
text: '222',
|
||||
@@ -78,31 +103,12 @@ var art = new Artplayer({
|
||||
mode: 1,
|
||||
},
|
||||
],
|
||||
speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
|
||||
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
|
||||
fontSize: 25, // 字体大小，支持数字和百分比
|
||||
color: '#FFFFFF', // 默认字体颜色
|
||||
mode: 0, // 默认模式，0-滚动，1-静止
|
||||
margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
|
||||
antiOverlap: true, // 是否防重叠
|
||||
useWorker: true, // 是否使用 web worker
|
||||
synchronousPlayback: false, // 是否同步到播放速度
|
||||
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
|
||||
lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
|
||||
maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
|
||||
minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
|
||||
maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
|
||||
theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
|
||||
beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
|
||||
|
||||
// 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
|
||||
// mount: document.querySelector('.artplayer-danmuku'),
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### 使用弹幕 XML
|
||||
## 使用弹幕 XML
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
@@ -121,7 +127,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
### 使用异步调用
|
||||
## 使用异步调用
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
@@ -157,11 +163,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## 接口
|
||||
|
||||
### hide/show
|
||||
|
||||
- 类型: `Function`
|
||||
## `hide/show`
|
||||
|
||||
通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
|
||||
|
||||
@@ -197,9 +199,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
### isHide
|
||||
|
||||
- 类型: `Boolean`
|
||||
## `isHide`
|
||||
|
||||
通过属性 `isHide` 判断当前弹幕是隐藏或者显示
|
||||
|
||||
@@ -234,9 +234,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
### emit
|
||||
|
||||
- 类型: `Function`
|
||||
## `emit`
|
||||
|
||||
通过方法 `emit` 发送一条实时弹幕
|
||||
|
||||
@@ -272,24 +270,22 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
### config
|
||||
|
||||
- 类型: `Function`
|
||||
## `config`
|
||||
|
||||
通过方法 `config` 实时改变弹幕配置，支持属性有：
|
||||
|
||||
- danmuku
|
||||
- speed
|
||||
- opacity
|
||||
- fontSize
|
||||
- color
|
||||
- mode
|
||||
- margin
|
||||
- antiOverlap
|
||||
- synchronousPlayback
|
||||
- filter
|
||||
- lockTime
|
||||
- beforeEmit
|
||||
- `danmuku`
|
||||
- `speed`
|
||||
- `opacity`
|
||||
- `fontSize`
|
||||
- `color`
|
||||
- `mode`
|
||||
- `margin`
|
||||
- `antiOverlap`
|
||||
- `synchronousPlayback`
|
||||
- `filter`
|
||||
- `lockTime`
|
||||
- `beforeEmit`
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
@@ -325,9 +321,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
### load
|
||||
|
||||
- 类型: `Function`
|
||||
## `load`
|
||||
|
||||
通过 load 方法可以重载弹幕源，或者切换新弹幕
|
||||
|
||||
@@ -366,9 +360,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
### reset
|
||||
|
||||
- 类型: `Function`
|
||||
## `reset`
|
||||
|
||||
用于清空当前显示的弹幕
|
||||
|
||||
@@ -393,9 +385,7 @@ art.on('resize', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### option
|
||||
|
||||
- 类型: `Object`
|
||||
## `option`
|
||||
|
||||
用于获取当前弹幕配置
|
||||
|
||||
@@ -416,7 +406,7 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.log(art.plugins.artplayerPluginDanmuku.option);
|
||||
console.info(art.plugins.artplayerPluginDanmuku.option);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
# HLS 画质
|
||||
|
||||
## 演示
|
||||
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
|
||||
|
||||
## 安装
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-hls-quality.js"></script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## CDN
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
|
||||
```
|
||||
|
||||
:::
|
||||
+48
-56
@@ -1,13 +1,8 @@
|
||||
---
|
||||
title: Iframe 插件
|
||||
sidebar_position: 3
|
||||
---
|
||||
# Iframe 控制
|
||||
|
||||
## 说明
|
||||
|
||||
通过该插件，你可以轻松在 `主页面` 里控制 `iframe` 页面里的播放器。
|
||||
|
||||
如在 `主页面` 里通过代码控制 `iframe` 播放器的功能，或者获取 `iframe` 播放器的值等等
|
||||
通过该插件，你可以轻松在 `index.html` 里控制跨域 `iframe.html` 页面里的播放器，如在 `index.html` 里通过代码控制 `iframe.html` 播放器的功能，或者获取 `iframe.html` 播放器的值
|
||||
|
||||
## 演示
|
||||
|
||||
@@ -15,38 +10,45 @@ sidebar_position: 3
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过 `npm` 安装：
|
||||
::: code-group
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-iframe
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
### 通过 `yarn` 安装：
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-iframe
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
### 通过 `script` 安装：
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- 本地 -->
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script>
|
||||
```
|
||||
|
||||
然后你可以通过 `window.artplayerPluginIframe` 访问到插件函数
|
||||
:::
|
||||
|
||||
## `CDN`
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
### index.html
|
||||
::: code-group
|
||||
|
||||
```html showLineNumbers title="index.html"
|
||||
```html [index.html]
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@@ -58,13 +60,13 @@ $ yarn add artplayer-plugin-iframe
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<script>
|
||||
const iframe = new ArtplayerPluginIframe({
|
||||
// iframe 元素
|
||||
// Iframe element
|
||||
iframe: document.querySelector('#iframe'),
|
||||
// iframe 地址
|
||||
// Iframe url
|
||||
url: 'path/to/iframe.html',
|
||||
});
|
||||
|
||||
// 向 iframe 发送消息
|
||||
// Send message to iframe
|
||||
iframe.commit(() => {
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
@@ -76,9 +78,7 @@ $ yarn add artplayer-plugin-iframe
|
||||
</html>
|
||||
```
|
||||
|
||||
### iframe.html
|
||||
|
||||
```html showLineNumbers title="iframe.html"
|
||||
```html [iframe.html]
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@@ -99,18 +99,18 @@ $ yarn add artplayer-plugin-iframe
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<script>
|
||||
// 注入脚本，接收来自实例的消息
|
||||
// Inject scripts to receive messages from instances
|
||||
ArtplayerPluginIframe.inject();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 实例接口
|
||||
|
||||
### commit
|
||||
|
||||
- 类型: `Function`
|
||||
### `commit`
|
||||
|
||||
将消息推送到 iframe，该函数将在 iframe 内部运行
|
||||
|
||||
@@ -126,14 +126,14 @@ iframe.commit(() => {
|
||||
art.seek = 5;
|
||||
});
|
||||
|
||||
// 获取来自 iframe 的值
|
||||
// Get the value from the iframe
|
||||
(async function () {
|
||||
// 使用 return 关键词
|
||||
// Use the return keyword
|
||||
var currentTime = await iframe.commit(() => {
|
||||
return art.currentTime;
|
||||
});
|
||||
|
||||
// 或者使用 resolve 方法
|
||||
// or use the resolve method
|
||||
var currentTime2 = await iframe.commit((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(art.currentTime);
|
||||
@@ -142,21 +142,17 @@ iframe.commit(() => {
|
||||
})();
|
||||
```
|
||||
|
||||
### message
|
||||
|
||||
- 类型: `Function`
|
||||
### `message`
|
||||
|
||||
接收来自 iframe 的消息
|
||||
|
||||
```js
|
||||
iframe.message((event) => {
|
||||
console.log(event);
|
||||
console.info(event);
|
||||
});
|
||||
```
|
||||
|
||||
### destroy
|
||||
|
||||
- 类型: `Function`
|
||||
### `destroy`
|
||||
|
||||
销毁实例，销毁后无法与 iframe 通信
|
||||
|
||||
@@ -164,17 +160,15 @@ iframe.message((event) => {
|
||||
iframe.destroy();
|
||||
```
|
||||
|
||||
## Iframe 接口
|
||||
## `Iframe` 接口
|
||||
|
||||
:::danger Tip
|
||||
:::warning 提示
|
||||
|
||||
`Iframe 接口` 只能运行在 `iframe` 里
|
||||
`Iframe` 接口 只能运行在 `iframe` 里
|
||||
|
||||
:::
|
||||
|
||||
### inject
|
||||
|
||||
- 类型: `Function`
|
||||
### `inject`
|
||||
|
||||
注入脚本，接收来自实例的消息
|
||||
|
||||
@@ -182,15 +176,13 @@ iframe.destroy();
|
||||
ArtplayerPluginIframe.inject();
|
||||
```
|
||||
|
||||
### postMessage
|
||||
|
||||
- 类型: `Function`
|
||||
### `postMessage`
|
||||
|
||||
将消息推送到实例
|
||||
|
||||
```js
|
||||
iframe.message((event) => {
|
||||
console.log(event);
|
||||
console.info(event);
|
||||
});
|
||||
|
||||
iframe.commit(() => {
|
||||
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,19 @@
|
||||
(function () {
|
||||
if (window['run-code-init']) return;
|
||||
window['run-code-init'] = true;
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.className === 'run-code') {
|
||||
event.preventDefault();
|
||||
const codeElement = event.target.nextElementSibling.querySelector('pre code');
|
||||
if (codeElement) {
|
||||
const libs = event.target.dataset.libs || '';
|
||||
const code = encodeURIComponent(codeElement.innerText);
|
||||
const env = 'https://artplayer.org';
|
||||
const url = env + '/?libs=' + libs + '&code=' + code;
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
.run-code {
|
||||
display: inline-block;
|
||||
padding: 3px 7px;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
background-color: #25c2a0;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
# 组件配置
|
||||
|
||||
这里所说的组件配置主要是指：`layers` , `controls` , `contextmenu` 这三个共用的配置:
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
:::warning 提示
|
||||
|
||||
- 当前组件只能添加，并没有销毁的功能
|
||||
- 通过 `name` 选项可以快速获取组件的 `DOM` 元素
|
||||
- 通过 `index` 选项可以控制组件出现的顺序
|
||||
|
||||
:::
|
||||
|
||||
## `layers`
|
||||
|
||||
实例化时添加一个层，例如可以添加 `logo` 或者 `广告` 等等
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{5-22}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.info(art.layers.potser);
|
||||
```
|
||||
|
||||
也可以实例化之后添加一个层
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{7-22}
|
||||
var img = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.layers.add({
|
||||
name: 'potser',
|
||||
html: `<img style="width: 100px" src="${img}">`,
|
||||
tooltip: 'Potser Tip',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '50px',
|
||||
right: '50px',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
});
|
||||
|
||||
console.info(art.layers.potser);
|
||||
```
|
||||
|
||||
## `controls`
|
||||
|
||||
实例化时添加一个控制器
|
||||
|
||||
:::warning controls 还有三个额外的选项
|
||||
|
||||
- `position`: `left` 和 `right` 控制控制器出现的左右位置
|
||||
- `selector`: 快速创建选择列表的对象数组
|
||||
- `onSelect`: 选择列表的元素被点击时触发的函数
|
||||
|
||||
:::
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'your-button',
|
||||
index: 10,
|
||||
position: 'left',
|
||||
html: 'Your Button',
|
||||
tooltip: 'Your Button',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'subtitle',
|
||||
position: 'right',
|
||||
html: 'Subtitle',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '<span style="color:red">subtitle 01</span>',
|
||||
},
|
||||
{
|
||||
html: '<span style="color:yellow">subtitle 02</span>',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom) {
|
||||
console.info(item, $dom);
|
||||
return 'Your ' + item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.info(art.controls['your-button']);
|
||||
console.info(art.controls.subtitle);
|
||||
```
|
||||
|
||||
也可以实例化之后添加一个控制器
|
||||
|
||||
```js{6-22}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'button1',
|
||||
index: 10,
|
||||
position: 'left',
|
||||
html: 'Your Button',
|
||||
tooltip: 'Your Button',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
click: function (...args) {
|
||||
console.info('click', args);
|
||||
},
|
||||
mounted: function (...args) {
|
||||
console.info('mounted', args);
|
||||
},
|
||||
});
|
||||
|
||||
console.info(art.controls.button1);
|
||||
```
|
||||
|
||||
## `contextmenu`
|
||||
|
||||
实例化时添加一个右键菜单
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{4-13}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
contextmenu: [
|
||||
{
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
也可以实例化之后添加一个右键菜单
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{6-13}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.contextmenu.add({
|
||||
name: 'your-menu',
|
||||
html: 'Your Menu',
|
||||
click: function (...args) {
|
||||
console.info(args);
|
||||
art.contextmenu.show = false;
|
||||
},
|
||||
});
|
||||
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
+431
-371
File diff suppressed because it is too large.
Load diff
+73
-118
@@ -1,16 +1,27 @@
|
||||
---
|
||||
title: 怎么添加设置面板
|
||||
sidebar_position: 6
|
||||
---
|
||||
# 设置面板
|
||||
|
||||
## 添加选择列表
|
||||
需先打开设置面板，播放器默认自带四个设置项：`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
|
||||
|
||||
设置面板类似于列表选择的集合，而且支持多层嵌套
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{4}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
subtitleOffset: true,
|
||||
});
|
||||
```
|
||||
|
||||
## 选择列表
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | --------------- |
|
||||
| `html` | `String`、`Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`、`Element` | 元素的图标 |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `selector` | `Array` | 元素列表 |
|
||||
| `onSelect` | `Function` | 元素点击事件 |
|
||||
| `width` | `Number` | 列表宽度 |
|
||||
@@ -24,35 +35,30 @@ var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: '选择字幕',
|
||||
html: 'Subtitle',
|
||||
width: 250,
|
||||
tooltip: '字幕 01',
|
||||
tooltip: 'Subtitle 01',
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '<span style="color:red">字幕 01</span>',
|
||||
html: '<span style="color:red">Subtitle 01</span>',
|
||||
url: '/assets/sample/subtitle.srt?id=1',
|
||||
},
|
||||
{
|
||||
html: '<span style="color:yellow">字幕 02</span>',
|
||||
html: '<span style="color:yellow">Subtitle 02</span>',
|
||||
url: '/assets/sample/subtitle.srt?id=2',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.subtitle.url = item.url;
|
||||
|
||||
// 改变提示文本
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '选择画质',
|
||||
html: 'Quality',
|
||||
width: 150,
|
||||
tooltip: '1080P',
|
||||
selector: [
|
||||
@@ -73,35 +79,57 @@ var art = new Artplayer({
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
art.switchQuality(item.url, item.html);
|
||||
|
||||
// 改变提示文本
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 列表嵌套
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
settings: [
|
||||
{
|
||||
html: '多层嵌套',
|
||||
html: 'Multi-level',
|
||||
selector: [
|
||||
{
|
||||
html: '嵌套01',
|
||||
html: 'Setting 01',
|
||||
width: 150,
|
||||
selector: [
|
||||
{
|
||||
html: '嵌套02',
|
||||
html: 'Setting 01 - 01',
|
||||
},
|
||||
{
|
||||
html: '嵌套02',
|
||||
html: 'Setting 01 - 02',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '嵌套01',
|
||||
html: 'Setting 02',
|
||||
width: 150,
|
||||
selector: [
|
||||
{
|
||||
html: '嵌套02',
|
||||
html: 'Setting 02 - 01',
|
||||
},
|
||||
{
|
||||
html: '嵌套02',
|
||||
html: 'Setting 02 - 02',
|
||||
},
|
||||
],
|
||||
onSelect: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -109,12 +137,12 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## 添加切换按钮
|
||||
## 切换按钮
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | --------------- |
|
||||
| `html` | `String`、`Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`、`Element` | 元素的图标 |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `switch` | `Boolean` | 按钮默认状态 |
|
||||
| `onSwitch` | `Function` | 按钮切换事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
@@ -126,71 +154,34 @@ var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: '画中画模式',
|
||||
tooltip: '关闭',
|
||||
html: 'PIP Mode',
|
||||
tooltip: 'Close',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
const nextState = !item.switch;
|
||||
art.pip = nextState;
|
||||
|
||||
// 改变提示文本
|
||||
item.tooltip = nextState ? '开启' : '关闭';
|
||||
|
||||
// 改变按钮状态
|
||||
item.tooltip = nextState ? 'Open' : 'Close';
|
||||
return nextState;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '和列表组合',
|
||||
width: 200,
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '设置 01',
|
||||
},
|
||||
{
|
||||
html: '设置 02',
|
||||
},
|
||||
{
|
||||
html: '设置 03',
|
||||
switch: false,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '设置 04',
|
||||
icon: '',
|
||||
switch: true,
|
||||
onSwitch: function (item, $dom, event) {
|
||||
return !item.switch;
|
||||
},
|
||||
},
|
||||
],
|
||||
onSelect: function (item) {
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 添加范围滑动
|
||||
## 范围滑块
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | --------------- |
|
||||
| `html` | `String`、`Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`、`Element` | 元素的图标 |
|
||||
| `range` | `Array` | 默认状态数组 |
|
||||
| `onRange` | `Function` | 滑块滑动事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ---------------- |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `range` | `Array` | 默认状态数组 |
|
||||
| `onRange` | `Function` | 完成时触发的事件 |
|
||||
| `onChange` | `Function` | 变化时触发的事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
```js
|
||||
const range = [5, 1, 10, 1];
|
||||
@@ -207,53 +198,17 @@ var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
settings: [
|
||||
{
|
||||
html: '滑块',
|
||||
html: 'Slider',
|
||||
tooltip: '5x',
|
||||
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
|
||||
range: [5, 1, 10, 1],
|
||||
onRange: function (item) {
|
||||
// 改变提示文本
|
||||
onChange: function (item, $dom, event) {
|
||||
console.info(item, $dom, event);
|
||||
return item.range + 'x';
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '和列表组合',
|
||||
width: 200,
|
||||
selector: [
|
||||
{
|
||||
default: true,
|
||||
html: '设置 01',
|
||||
},
|
||||
{
|
||||
html: '设置 02',
|
||||
},
|
||||
{
|
||||
html: '设置 03',
|
||||
tooltip: '5x',
|
||||
range: [5, 1, 10, 1],
|
||||
onRange: function (item) {
|
||||
return item.range + 'x';
|
||||
},
|
||||
},
|
||||
{
|
||||
html: '设置 04',
|
||||
icon: '',
|
||||
tooltip: '5x',
|
||||
range: [5, 1, 10, 1],
|
||||
onRange: function (item) {
|
||||
return item.range + 'x';
|
||||
},
|
||||
},
|
||||
],
|
||||
onSelect: function (item) {
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,12 @@
|
||||
import { SearchPlugin } from "vitepress-plugin-search";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
SearchPlugin({
|
||||
placeholder: "Search docs",
|
||||
buttonLabel: "Search",
|
||||
previewLength: 62,
|
||||
}),
|
||||
],
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "artplayer-vitepress",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"docs:preview": "vitepress preview docs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"flexsearch": "^0.7.31",
|
||||
"markdown-it": "^13.0.1",
|
||||
"vitepress": "^1.0.0-alpha.35",
|
||||
"vitepress-plugin-search": "^1.0.4-alpha.17",
|
||||
"vue": "^3.2.45"
|
||||
}
|
||||
}
|
||||
Vendored
+2
-2
@@ -1,7 +1,7 @@
|
||||
/*!
|
||||
* artplayer.js v4.6.0
|
||||
* artplayer.js v4.6.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,r,o,a){var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},n="function"==typeof i[o]&&i[o],s=n.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,r){if(!s[t]){if(!e[t]){var a="function"==typeof i[o]&&i[o];if(!r&&a)return a(t,!0);if(n)return n(t,!0);if(l&&"string"==typeof t)return l(t);var p=new Error("Cannot find module '"+t+"'");throw p.code="MODULE_NOT_FOUND",p}d.resolve=function(r){var o=e[t][1][r];return null!=o?o:r},d.cache={};var u=s[t]=new c.Module(t);e[t][0].call(u.exports,d,u,u.exports,this)}return s[t].exports;function d(e){var t=d.resolve(e);return!1===t?{}:c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.exports={}},c.modules=e,c.cache=s,c.parent=n,c.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(c,"root",{get:function(){return i[o]}}),i[o]=c;for(var p=0;p<t.length;p++)c(t[p]);if(r){var u=c(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({"5lTcX":[function(e,t,r){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r);var a=e("bundle-text:./style/index.less"),i=o.interopDefault(a),n=e("option-validator"),s=o.interopDefault(n),l=e("./utils/emitter"),c=o.interopDefault(l),p=e("./utils"),u=e("./scheme"),d=o.interopDefault(u),f=e("./config"),h=o.interopDefault(f),m=e("./whitelist"),g=o.interopDefault(m),y=e("./template"),v=o.interopDefault(y),b=e("./i18n"),x=o.interopDefault(b),w=e("./player"),j=o.interopDefault(w),k=e("./control"),S=o.interopDefault(k),I=e("./contextmenu"),C=o.interopDefault(I),$=e("./info"),P=o.interopDefault($),T=e("./subtitle"),E=o.interopDefault(T),M=e("./events"),F=o.interopDefault(M),A=e("./hotkey"),z=o.interopDefault(A),H=e("./layer"),D=o.interopDefault(H),O=e("./loading"),R=o.interopDefault(O),L=e("./notice"),N=o.interopDefault(L),V=e("./mask"),Y=o.interopDefault(V),_=e("./icons"),W=o.interopDefault(_),q=e("./setting"),B=o.interopDefault(q),U=e("./storage"),Z=o.interopDefault(U),G=e("./plugins"),K=o.interopDefault(G),X=e("./mobile"),J=o.interopDefault(X);let Q=0;const ee=[];class te extends c.default{constructor(e,t){super(),this.id=++Q;const r=p.mergeDeep(te.option,e);if(this.option=(0,s.default)(r,d.default),this.isLock=!1,this.isReady=!1,this.isFocus=!1,this.isInput=!1,this.isRotate=!1,this.isDestroy=!1,this.whitelist=new(0,g.default)(this),this.template=new(0,v.default)(this),this.events=new(0,F.default)(this),this.whitelist.state?(this.storage=new(0,Z.default)(this),this.icons=new(0,W.default)(this),this.i18n=new(0,x.default)(this),this.notice=new(0,N.default)(this),this.player=new(0,j.default)(this),this.layers=new(0,D.default)(this),this.controls=new(0,S.default)(this),this.contextmenu=new(0,C.default)(this),this.subtitle=new(0,E.default)(this),this.info=new(0,P.default)(this),this.loading=new(0,R.default)(this),this.hotkey=new(0,z.default)(this),this.mask=new(0,Y.default)(this),this.setting=new(0,B.default)(this),this.plugins=new(0,K.default)(this)):this.mobile=new(0,J.default)(this),"function"==typeof t&&this.on("ready",(()=>t.call(this,this))),te.DEBUG){const e=e=>console.log(`[ART.${this.id}] -> ${e}`);e("Version@"+te.version),e("Env@"+te.env),e("Build@"+te.build);for(let t=0;t<h.default.events.length;t++)this.on("video:"+h.default.events[t],(t=>e("Event@"+t.type)))}ee.push(this)}static get instances(){return ee}static get version(){return"4.6.0"}static get env(){return"production"}static get build(){return"2023-01-01 10:34:45"}static get config(){return h.default}static get utils(){return p}static get scheme(){return d.default}static get Emitter(){return c.default}static get validator(){return s.default}static get kindOf(){return s.default.kindOf}static get html(){return v.default.html}static get option(){return{id:"",container:"#artplayer",url:"",poster:"",title:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,fastForward:!1,autoPlayback:!1,autoOrientation:!1,airplay:!1,layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],whitelist:[],thumbnails:{url:"",number:60,column:10,width:0,height:0},subtitle:{url:"",type:"",style:{},encoding:"utf-8"},moreVideoAttr:{controls:!1,preload:p.isSafari?"auto":"metadata"},icons:{},customType:{},lang:navigator.language.toLowerCase()}}get proxy(){return this.events.proxy}get query(){return this.template.query}get video(){return this.template.$video}destroy(e=!0){this.events.destroy(),this.template.destroy(e),ee.splice(ee.indexOf(this),1),this.isDestroy=!0,this.emit("destroy")}}if(r.default=te,te.DLine truncated
|
||||
!function(e,t,r,o,a){var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},n="function"==typeof i[o]&&i[o],s=n.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,r){if(!s[t]){if(!e[t]){var a="function"==typeof i[o]&&i[o];if(!r&&a)return a(t,!0);if(n)return n(t,!0);if(l&&"string"==typeof t)return l(t);var p=new Error("Cannot find module '"+t+"'");throw p.code="MODULE_NOT_FOUND",p}d.resolve=function(r){var o=e[t][1][r];return null!=o?o:r},d.cache={};var u=s[t]=new c.Module(t);e[t][0].call(u.exports,d,u,u.exports,this)}return s[t].exports;function d(e){var t=d.resolve(e);return!1===t?{}:c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.exports={}},c.modules=e,c.cache=s,c.parent=n,c.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(c,"root",{get:function(){return i[o]}}),i[o]=c;for(var p=0;p<t.length;p++)c(t[p]);if(r){var u=c(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({"5lTcX":[function(e,t,r){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r);var a=e("bundle-text:./style/index.less"),i=o.interopDefault(a),n=e("option-validator"),s=o.interopDefault(n),l=e("./utils/emitter"),c=o.interopDefault(l),p=e("./utils"),u=e("./scheme"),d=o.interopDefault(u),f=e("./config"),h=o.interopDefault(f),m=e("./whitelist"),g=o.interopDefault(m),y=e("./template"),v=o.interopDefault(y),b=e("./i18n"),x=o.interopDefault(b),w=e("./player"),j=o.interopDefault(w),k=e("./control"),S=o.interopDefault(k),I=e("./contextmenu"),C=o.interopDefault(I),$=e("./info"),P=o.interopDefault($),T=e("./subtitle"),E=o.interopDefault(T),M=e("./events"),F=o.interopDefault(M),A=e("./hotkey"),z=o.interopDefault(A),H=e("./layer"),D=o.interopDefault(H),O=e("./loading"),R=o.interopDefault(O),L=e("./notice"),N=o.interopDefault(L),V=e("./mask"),Y=o.interopDefault(V),_=e("./icons"),W=o.interopDefault(_),q=e("./setting"),B=o.interopDefault(q),U=e("./storage"),Z=o.interopDefault(U),G=e("./plugins"),K=o.interopDefault(G),X=e("./mobile"),J=o.interopDefault(X);let Q=0;const ee=[];class te extends c.default{constructor(e,t){super(),this.id=++Q;const r=p.mergeDeep(te.option,e);if(this.option=(0,s.default)(r,d.default),this.isLock=!1,this.isReady=!1,this.isFocus=!1,this.isInput=!1,this.isRotate=!1,this.isDestroy=!1,this.whitelist=new(0,g.default)(this),this.template=new(0,v.default)(this),this.events=new(0,F.default)(this),this.whitelist.state?(this.storage=new(0,Z.default)(this),this.icons=new(0,W.default)(this),this.i18n=new(0,x.default)(this),this.notice=new(0,N.default)(this),this.player=new(0,j.default)(this),this.layers=new(0,D.default)(this),this.controls=new(0,S.default)(this),this.contextmenu=new(0,C.default)(this),this.subtitle=new(0,E.default)(this),this.info=new(0,P.default)(this),this.loading=new(0,R.default)(this),this.hotkey=new(0,z.default)(this),this.mask=new(0,Y.default)(this),this.setting=new(0,B.default)(this),this.plugins=new(0,K.default)(this)):this.mobile=new(0,J.default)(this),"function"==typeof t&&this.on("ready",(()=>t.call(this,this))),te.DEBUG){const e=e=>console.log(`[ART.${this.id}] -> ${e}`);e("Version@"+te.version),e("Env@"+te.env),e("Build@"+te.build);for(let t=0;t<h.default.events.length;t++)this.on("video:"+h.default.events[t],(t=>e("Event@"+t.type)))}ee.push(this)}static get instances(){return ee}static get version(){return"4.6.1"}static get env(){return"production"}static get build(){return"2023-01-11 20:41:42"}static get config(){return h.default}static get utils(){return p}static get scheme(){return d.default}static get Emitter(){return c.default}static get validator(){return s.default}static get kindOf(){return s.default.kindOf}static get html(){return v.default.html}static get option(){return{id:"",container:"#artplayer",url:"",poster:"",title:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,fastForward:!1,autoPlayback:!1,autoOrientation:!1,airplay:!1,layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],whitelist:[],thumbnails:{url:"",number:60,column:10,width:0,height:0},subtitle:{url:"",type:"",style:{},encoding:"utf-8"},moreVideoAttr:{controls:!1,preload:p.isSafari?"auto":"metadata"},i18n:{},icons:{},customType:{},lang:navigator.language.toLowerCase()}}get proxy(){return this.events.proxy}get query(){return this.template.query}get video(){return this.template.$video}destroy(e=!0){this.events.destroy(),this.template.destroy(e),ee.splice(ee.indexOf(this),1),this.isDestroy=!0,this.emit("destroy")}}if(r.defaultLine truncated
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
/*!
|
||||
* artplayer.js v4.6.0
|
||||
* artplayer.js v4.6.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,r,o,i){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},n="function"==typeof a[o]&&a[o],s=n.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,r){if(!s[t]){if(!e[t]){var i="function"==typeof a[o]&&a[o];if(!r&&i)return i(t,!0);if(n)return n(t,!0);if(l&&"string"==typeof t)return l(t);var p=new Error("Cannot find module '"+t+"'");throw p.code="MODULE_NOT_FOUND",p}d.resolve=function(r){var o=e[t][1][r];return null!=o?o:r},d.cache={};var u=s[t]=new c.Module(t);e[t][0].call(u.exports,d,u,u.exports,this)}return s[t].exports;function d(e){var t=d.resolve(e);return!1===t?{}:c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.exports={}},c.modules=e,c.cache=s,c.parent=n,c.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(c,"root",{get:function(){return a[o]}}),a[o]=c;for(var p=0;p<t.length;p++)c(t[p]);if(r){var u=c(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({"4GL94":[function(e,t,r){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r),o.export(r,"default",(()=>te));var i=e("bundle-text:./style/index.less"),a=o.interopDefault(i),n=e("option-validator"),s=o.interopDefault(n),l=e("./utils/emitter"),c=o.interopDefault(l),p=e("./utils"),u=e("./scheme"),d=o.interopDefault(u),f=e("./config"),h=o.interopDefault(f),m=e("./whitelist"),g=o.interopDefault(m),y=e("./template"),v=o.interopDefault(y),b=e("./i18n"),x=o.interopDefault(b),w=e("./player"),j=o.interopDefault(w),k=e("./control"),S=o.interopDefault(k),P=e("./contextmenu"),T=o.interopDefault(P),I=e("./info"),$=o.interopDefault(I),E=e("./subtitle"),M=o.interopDefault(E),L=e("./events"),C=o.interopDefault(L),F=e("./hotkey"),V=o.interopDefault(F),A=e("./layer"),D=o.interopDefault(A),z=e("./loading"),R=o.interopDefault(z),O=e("./notice"),N=o.interopDefault(O),H=e("./mask"),_=o.interopDefault(H),W=e("./icons"),q=o.interopDefault(W),B=e("./setting"),U=o.interopDefault(B),Y=e("./storage"),G=o.interopDefault(Y),Z=e("./plugins"),X=o.interopDefault(Z),J=e("./mobile"),K=o.interopDefault(J);let Q=0;const ee=[];class te extends c.default{static get instances(){return ee}static get version(){return"4.6.0"}static get env(){return"production"}static get build(){return"2023-01-01 10:34:48"}static get config(){return h.default}static get utils(){return p}static get scheme(){return d.default}static get Emitter(){return c.default}static get validator(){return s.default}static get kindOf(){return s.default.kindOf}static get html(){return v.default.html}static get option(){return{id:"",container:"#artplayer",url:"",poster:"",title:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,fastForward:!1,autoPlayback:!1,autoOrientation:!1,airplay:!1,layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],whitelist:[],thumbnails:{url:"",number:60,column:10,width:0,height:0},subtitle:{url:"",type:"",style:{},encoding:"utf-8"},moreVideoAttr:{controls:!1,preload:p.isSafari?"auto":"metadata"},icons:{},customType:{},lang:navigator.language.toLowerCase()}}get proxy(){return this.events.proxy}get query(){return this.template.query}get video(){return this.template.$video}destroy(e=!0){this.events.destroy(),this.template.destroy(e),ee.splice(ee.indexOf(this),1),this.isDestroy=!0,this.emit("destroy")}constructor(e,t){super(),this.id=++Q;const r=p.mergeDeep(te.option,e);if(this.option=(0,s.default)(r,d.default),this.isLock=!1,this.isReady=!1,this.isFocus=!1,this.isInput=!1,this.isRotate=!1,this.isDestroy=!1,this.whitelist=new(0,g.default)(this),this.template=new(0,v.default)(this),this.events=new(0,C.default)(this),this.whitelist.state?(this.storage=new(0,G.default)(this),this.icons=new(0,q.default)(this),this.i18n=new(0,x.default)(this),this.notice=new(0,N.default)(this),this.player=new(0,j.default)(this),this.layers=new(0,D.default)(this),this.controls=new(0,S.default)(this),this.contextmenu=new(0,T.default)(this),this.subtitle=new(0,M.default)(this),this.info=new(0,$.default)(this),this.loading=new(0,R.default)(this),this.hotkey=new(0,V.default)(this),this.mask=new(0,_.default)(this),this.setting=new(0,U.default)(this),this.plugins=new(0,X.default)(this)):this.mobile=new(0,K.default)(this),"function"==typeof t&&this.on("ready",(()=>t.call(this,this))),te.DEBUG){const e=e=>console.log(`[ART.${this.id}] -> ${e}`);e("Version@"+te.version),e("Env@"+te.env),e("Build@"+te.build);for(let t=0;t<h.default.events.length;t++)this.on("video:"+h.default.events[t],(t=>e("Event@"+t.type)))}ee.pLine truncated
|
||||
!function(e,t,r,o,i){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},n="function"==typeof a[o]&&a[o],s=n.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,r){if(!s[t]){if(!e[t]){var i="function"==typeof a[o]&&a[o];if(!r&&i)return i(t,!0);if(n)return n(t,!0);if(l&&"string"==typeof t)return l(t);var p=new Error("Cannot find module '"+t+"'");throw p.code="MODULE_NOT_FOUND",p}d.resolve=function(r){var o=e[t][1][r];return null!=o?o:r},d.cache={};var u=s[t]=new c.Module(t);e[t][0].call(u.exports,d,u,u.exports,this)}return s[t].exports;function d(e){var t=d.resolve(e);return!1===t?{}:c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.exports={}},c.modules=e,c.cache=s,c.parent=n,c.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(c,"root",{get:function(){return a[o]}}),a[o]=c;for(var p=0;p<t.length;p++)c(t[p]);if(r){var u=c(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}}({"4GL94":[function(e,t,r){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r),o.export(r,"default",(()=>te));var i=e("bundle-text:./style/index.less"),a=o.interopDefault(i),n=e("option-validator"),s=o.interopDefault(n),l=e("./utils/emitter"),c=o.interopDefault(l),p=e("./utils"),u=e("./scheme"),d=o.interopDefault(u),f=e("./config"),h=o.interopDefault(f),m=e("./whitelist"),g=o.interopDefault(m),y=e("./template"),v=o.interopDefault(y),b=e("./i18n"),x=o.interopDefault(b),w=e("./player"),j=o.interopDefault(w),k=e("./control"),S=o.interopDefault(k),P=e("./contextmenu"),T=o.interopDefault(P),I=e("./info"),$=o.interopDefault(I),E=e("./subtitle"),M=o.interopDefault(E),L=e("./events"),C=o.interopDefault(L),F=e("./hotkey"),V=o.interopDefault(F),A=e("./layer"),D=o.interopDefault(A),z=e("./loading"),R=o.interopDefault(z),O=e("./notice"),N=o.interopDefault(O),H=e("./mask"),_=o.interopDefault(H),W=e("./icons"),q=o.interopDefault(W),B=e("./setting"),U=o.interopDefault(B),Y=e("./storage"),G=o.interopDefault(Y),Z=e("./plugins"),X=o.interopDefault(Z),J=e("./mobile"),K=o.interopDefault(J);let Q=0;const ee=[];class te extends c.default{static get instances(){return ee}static get version(){return"4.6.1"}static get env(){return"production"}static get build(){return"2023-01-11 20:41:45"}static get config(){return h.default}static get utils(){return p}static get scheme(){return d.default}static get Emitter(){return c.default}static get validator(){return s.default}static get kindOf(){return s.default.kindOf}static get html(){return v.default.html}static get option(){return{id:"",container:"#artplayer",url:"",poster:"",title:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,fastForward:!1,autoPlayback:!1,autoOrientation:!1,airplay:!1,layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],whitelist:[],thumbnails:{url:"",number:60,column:10,width:0,height:0},subtitle:{url:"",type:"",style:{},encoding:"utf-8"},moreVideoAttr:{controls:!1,preload:p.isSafari?"auto":"metadata"},i18n:{},icons:{},customType:{},lang:navigator.language.toLowerCase()}}get proxy(){return this.events.proxy}get query(){return this.template.query}get video(){return this.template.$video}destroy(e=!0){this.events.destroy(),this.template.destroy(e),ee.splice(ee.indexOf(this),1),this.isDestroy=!0,this.emit("destroy")}constructor(e,t){super(),this.id=++Q;const r=p.mergeDeep(te.option,e);if(this.option=(0,s.default)(r,d.default),this.isLock=!1,this.isReady=!1,this.isFocus=!1,this.isInput=!1,this.isRotate=!1,this.isDestroy=!1,this.whitelist=new(0,g.default)(this),this.template=new(0,v.default)(this),this.events=new(0,C.default)(this),this.whitelist.state?(this.storage=new(0,G.default)(this),this.icons=new(0,q.default)(this),this.i18n=new(0,x.default)(this),this.notice=new(0,N.default)(this),this.player=new(0,j.default)(this),this.layers=new(0,D.default)(this),this.controls=new(0,S.default)(this),this.contextmenu=new(0,T.default)(this),this.subtitle=new(0,M.default)(this),this.info=new(0,$.default)(this),this.loading=new(0,R.default)(this),this.hotkey=new(0,V.default)(this),this.mask=new(0,_.default)(this),this.setting=new(0,U.default)(this),this.plugins=new(0,X.default)(this)):this.mobile=new(0,K.default)(this),"function"==typeof t&&this.on("ready",(()=>t.call(this,this))),te.DEBUG){const e=e=>console.log(`[ART.${this.id}] -> ${e}`);e("Version@"+te.version),e("Env@"+te.env),e("Build@"+te.build);for(let t=0;t<h.default.events.length;t++)this.on("video:"+h.default.events[t],(t=>e("Event@"+t.typeLine truncated
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"license": "MIT",
|
||||
"name": "artplayer",
|
||||
"version": "4.6.0",
|
||||
"version": "4.6.1",
|
||||
"main": "dist/artplayer.js",
|
||||
"legacy": "dist/artplayer.legacy.js",
|
||||
"types": "types/artplayer.d.ts",
|
||||
|
||||
@@ -5,13 +5,13 @@ export default function hoverInit(art, events) {
|
||||
|
||||
events.hover(
|
||||
$player,
|
||||
() => {
|
||||
(event) => {
|
||||
addClass($player, 'art-hover');
|
||||
art.emit('hover', true);
|
||||
art.emit('hover', true, event);
|
||||
},
|
||||
() => {
|
||||
(event) => {
|
||||
removeClass($player, 'art-hover');
|
||||
art.emit('hover', false);
|
||||
art.emit('hover', false, event);
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import fa from './fa.json';
|
||||
export default class I18n {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
|
||||
this.languages = {
|
||||
'zh-cn': zhCn,
|
||||
'zh-tw': zhTw,
|
||||
@@ -17,7 +18,8 @@ export default class I18n {
|
||||
es: es,
|
||||
fa: fa,
|
||||
};
|
||||
this.init();
|
||||
|
||||
this.update(art.option.i18n);
|
||||
}
|
||||
|
||||
init() {
|
||||
|
||||
@@ -188,6 +188,7 @@ export default class Artplayer extends Emitter {
|
||||
controls: false,
|
||||
preload: utils.isSafari ? 'auto' : 'metadata',
|
||||
},
|
||||
i18n: {},
|
||||
icons: {},
|
||||
customType: {},
|
||||
lang: navigator.language.toLowerCase(),
|
||||
|
||||
@@ -46,7 +46,6 @@ export default class Mobile {
|
||||
const typeCallback = option.customType[typeName];
|
||||
if (typeName && typeCallback) {
|
||||
typeCallback($video, option.url, art);
|
||||
art.emit('customType', typeName);
|
||||
} else {
|
||||
$video.src = option.url;
|
||||
art.emit('url', $video.src);
|
||||
|
||||
@@ -10,14 +10,11 @@ export default function loopMix(art) {
|
||||
const end = clamp(value[1], start, art.duration);
|
||||
if (end - start >= 1) {
|
||||
interval = [start, end];
|
||||
art.emit('loop', interval);
|
||||
} else {
|
||||
interval = [];
|
||||
art.emit('loop', []);
|
||||
}
|
||||
} else {
|
||||
interval = [];
|
||||
art.emit('loop', []);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -16,10 +16,8 @@ export default function playbackRateMix(art) {
|
||||
if (rate === $video.playbackRate) return;
|
||||
$video.playbackRate = rate;
|
||||
notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`;
|
||||
art.emit('playbackRate', rate);
|
||||
} else {
|
||||
art.playbackRate = 1;
|
||||
art.emit('playbackRate', 1);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -23,7 +23,6 @@ export default function switchMix(art) {
|
||||
if (name) {
|
||||
notice.show = `${i18n.get('Switch Video')}: ${name}`;
|
||||
}
|
||||
art.emit('switch', url);
|
||||
resolve(url);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -16,7 +16,6 @@ export default function volumeMix(art) {
|
||||
if ($video.volume !== 0) {
|
||||
storage.set('volume', $video.volume);
|
||||
}
|
||||
art.emit('volume', $video.volume);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -24,7 +23,6 @@ export default function volumeMix(art) {
|
||||
get: () => $video.muted,
|
||||
set: (muted) => {
|
||||
$video.muted = muted;
|
||||
art.emit('volume', $video.volume);
|
||||
},
|
||||
});
|
||||
}
|
||||
Loaded 100 of 295 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user