mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-17 10:01:20 -08:00
添加事件文档
This commit is contained in:
Harvey committed
1 parent
339ec6a163
commit
de20a350e6
9 files changed
+152
-14
No files matched your search
+138
-1
@@ -1410,7 +1410,144 @@ All properties are read only
|
||||
|
||||
# Event
|
||||
|
||||
> TODO...
|
||||
```js
|
||||
art.on('ready', function() {
|
||||
console.log('The player can play');
|
||||
});
|
||||
```
|
||||
|
||||
## Instance
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ---------------------- | --------------------------------------- | ------------------- |
|
||||
| `ready` | When the video can be played | `undefined` |
|
||||
| `play` | When the video play | `undefined` |
|
||||
| `pause` | When the video pause | `undefined` |
|
||||
| `seek` | When the video seek | Video current time |
|
||||
| `volume` | When the video volume change | Video volume value |
|
||||
| `destroy` | When the instance is destroyed | `undefined` |
|
||||
| `focus` | When the player gets focus | `undefined` |
|
||||
| `blur` | When the player loses focus | `undefined` |
|
||||
| `hoverenter` | When the mouse is moved into the player | `undefined` |
|
||||
| `hoverleave` | When the mouse is moved out the player | `undefined` |
|
||||
| `resize` | When the player resize | Player size |
|
||||
| `mousemove` | When the mouse moves over the player | `undefined` |
|
||||
| `aspectRatioChange` | When aspect ratio change | Aspect ratio |
|
||||
| `aspectRatioRemove` | When aspect ratio remove | `undefined` |
|
||||
| `aspectRatioReset` | When aspect ratio reset | `undefined` |
|
||||
| `beforeCustomType` | Before triggering CustomType | Type name |
|
||||
| `afterCustomType` | After triggering CustomType | Type name |
|
||||
| `beforeAttachUrl` | Before the video url change | Video url |
|
||||
| `afterAttachUrl` | After the video url change | Video url |
|
||||
| `autoSizeChange` | When the player auto size change | Player size |
|
||||
| `autoSizeRemove` | When the player auto size remove | `undefined` |
|
||||
| `flipChange` | When the player flip change | Flip name |
|
||||
| `flipRemove` | When the player flip remove | `undefined` |
|
||||
| `fullscreenChange` | When the full screen status change | Whether full screen |
|
||||
| `fullscreenEnabled` | When entering full screen | `undefined` |
|
||||
| `fullscreenExit` | When exiting full screen | `undefined` |
|
||||
| `fullscreenWebEnabled` | When entering web full screen | `undefined` |
|
||||
| `fullscreenWebExit` | When exiting web full screen | `undefined` |
|
||||
| `pipEnabled` | When entering picture in picture | `undefined` |
|
||||
| `pipExit` | When exiting picture in picture | `undefined` |
|
||||
| `playbackRateChange` | When playback rate change | Playback rate |
|
||||
| `playbackRateRemove` | When playback rate remove | `undefined` |
|
||||
| `playbackRateReset` | When playback rate reset | `undefined` |
|
||||
| `screenshot` | When a screenshot occurs | Image data uri |
|
||||
| `switch` | When switching video url | Video url |
|
||||
|
||||
## Video (Native event)
|
||||
|
||||
You can use all the native events of video directly: [MDN web docs - Media events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
|
||||
|
||||
But be careful to add the `video` prefix in front of the event:
|
||||
|
||||
```js
|
||||
art.on('video:canplay', function(event) {
|
||||
console.log(event);
|
||||
});
|
||||
```
|
||||
|
||||
## Subtitle
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ----------------- | ------------------------- | --------------------- |
|
||||
| `subtitle:update` | When the subtitles change | Current subtitle text |
|
||||
| `subtitle:switch` | When switching subtitles | Current subtitle url |
|
||||
| `subtitle:show` | When displaying subtitles | `undefined` |
|
||||
| `subtitle:hide` | When hiding subtitles | `undefined` |
|
||||
|
||||
## Notice
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ------------- | ---------------------- | ----------- |
|
||||
| `notice:show` | When displaying notice | Notice text |
|
||||
| `notice:hide` | When hiding notice | `undefined` |
|
||||
|
||||
## Mask
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ----------- | -------------------- | ----------- |
|
||||
| `mask:show` | When displaying mask | `undefined` |
|
||||
| `mask:hide` | When hiding mask | `undefined` |
|
||||
|
||||
## Loading
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| -------------- | ----------------------- | ----------- |
|
||||
| `loading:show` | When displaying loading | `undefined` |
|
||||
| `loading:hide` | When hiding loading | `undefined` |
|
||||
|
||||
## Layers
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ------------- | ----------------------- | ------------------- |
|
||||
| `layers:add` | When adding a new layer | Layer configuration |
|
||||
| `layers:show` | When displaying layers | `undefined` |
|
||||
| `layers:hide` | When hiding layers | `undefined` |
|
||||
|
||||
## Info
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ----------- | -------------------- | ----------- |
|
||||
| `info:show` | When displaying info | `undefined` |
|
||||
| `info:hide` | When hiding info | `undefined` |
|
||||
|
||||
## Hotkey
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| -------- | ---------------------------- | ------------------- |
|
||||
| `hotkey` | When the hotkey is triggered | Hotkey event object |
|
||||
|
||||
## Setting
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| -------------- | ------------------------- | --------------------- |
|
||||
| `setting:add` | When adding a new setting | Setting configuration |
|
||||
| `setting:show` | When displaying setting | `undefined` |
|
||||
| `setting:hide` | When hiding setting | `undefined` |
|
||||
|
||||
## Contextmenu
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ------------------ | ----------------------------- | ------------------------- |
|
||||
| `contextmenu:add` | When adding a new contextmenu | Contextmenu configuration |
|
||||
| `contextmenu:show` | When displaying contextmenu | `undefined` |
|
||||
| `contextmenu:hide` | When hiding contextmenu | `undefined` |
|
||||
|
||||
## Controls
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| --------------- | ------------------------- | --------------------- |
|
||||
| `controls:add` | When adding a new control | Control configuration |
|
||||
| `controls:show` | When displaying controls | `undefined` |
|
||||
| `controls:hide` | When hiding controls | `undefined` |
|
||||
|
||||
## Plugins
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ------------ | ------------------------ | -------------------- |
|
||||
| `plugin:add` | When adding a new plugin | Plugin configuration |
|
||||
|
||||
# Third-party libraries
|
||||
|
||||
|
||||
@@ -25,5 +25,6 @@ export default function mousemoveInitInit(art, events) {
|
||||
if (!art.player.pip && player.playing && event.target === $video) {
|
||||
autoHide();
|
||||
}
|
||||
art.emit('mousemove');
|
||||
});
|
||||
}
|
||||
@@ -17,7 +17,7 @@ export default class Notice {
|
||||
this.hide();
|
||||
}, time);
|
||||
}
|
||||
this.art.emit('notice:show');
|
||||
this.art.emit('notice:show', msg);
|
||||
}
|
||||
|
||||
hide() {
|
||||
|
||||
@@ -25,7 +25,10 @@ export default function resizeMix(art, player) {
|
||||
setStyle($player, 'width', '100%');
|
||||
setStyle($player, 'height', `${percentage}%`);
|
||||
}
|
||||
art.emit('autoSizeChange');
|
||||
art.emit('autoSizeChange', {
|
||||
width: player.width,
|
||||
height: player.height,
|
||||
});
|
||||
} else {
|
||||
removeClass($container, 'artplayer-auto-size');
|
||||
setStyle($player, 'width', null);
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function fullscreenMix(art, player) {
|
||||
} = art;
|
||||
|
||||
const screenfullChange = () => {
|
||||
art.emit('fullscreen:change', screenfull.isFullscreen);
|
||||
art.emit('fullscreenChange', screenfull.isFullscreen);
|
||||
};
|
||||
|
||||
const screenfullError = () => {
|
||||
@@ -44,7 +44,7 @@ export default function fullscreenMix(art, player) {
|
||||
screenfull.request($player).then(() => {
|
||||
addClass($player, 'artplayer-fullscreen');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('fullscreen:enabled');
|
||||
art.emit('fullscreenEnabled');
|
||||
});
|
||||
} else {
|
||||
if (player.fullscreenWeb) {
|
||||
@@ -54,7 +54,7 @@ export default function fullscreenMix(art, player) {
|
||||
screenfull.exit().then(() => {
|
||||
removeClass($player, 'artplayer-fullscreen');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('fullscreen:exit');
|
||||
art.emit('fullscreenExit');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -16,14 +16,14 @@ export default function fullscreenWebMix(art, player) {
|
||||
}
|
||||
addClass($player, 'artplayer-web-fullscreen');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('fullscreenWeb:enabled');
|
||||
art.emit('fullscreenWebEnabled');
|
||||
} else {
|
||||
if (player.fullscreen) {
|
||||
player.fullscreen = false;
|
||||
}
|
||||
removeClass($player, 'artplayer-web-fullscreen');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('fullscreenWeb:exit');
|
||||
art.emit('fullscreenWebExit');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function volumeMix(art, player) {
|
||||
if ($video.volume !== 0) {
|
||||
storage.set('volume', $video.volume);
|
||||
}
|
||||
art.emit('volumeChange', $video.volume);
|
||||
art.emit('volume', $video.volume);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function volumeMix(art, player) {
|
||||
get: () => $video.muted,
|
||||
set: muted => {
|
||||
$video.muted = muted;
|
||||
art.emit('volumeChange', $video.volume);
|
||||
art.emit('volume', $video.volume);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -40,7 +40,7 @@ export default class Subtitle {
|
||||
.map(item => `<p>${item}</p>`)
|
||||
.join('');
|
||||
}
|
||||
this.art.emit('subtitle:update', $subtitle);
|
||||
this.art.emit('subtitle:update', this.activeCue.text);
|
||||
}
|
||||
|
||||
switch(url, name = 'unknown') {
|
||||
|
||||
@@ -39,7 +39,6 @@ export default function component(art, parent, target, getOption, callback, titl
|
||||
art.events.proxy($element, 'click', event => {
|
||||
event.preventDefault();
|
||||
option.click.call(art, parent, event);
|
||||
art.emit(`${title}:click`, $element);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -62,10 +61,8 @@ export default function component(art, parent, target, getOption, callback, titl
|
||||
set show(value) {
|
||||
if (value) {
|
||||
setStyle($element, 'display', 'block');
|
||||
art.emit(`${title}:show`, $element);
|
||||
} else {
|
||||
setStyle($element, 'display', 'none');
|
||||
art.emit(`${title}:hide`, $element);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user