diff --git a/docs/document/README.md b/docs/document/README.md index d6c347895..b0c2f1d6a 100644 --- a/docs/document/README.md +++ b/docs/document/README.md @@ -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 diff --git a/packages/artplayer/src/events/mousemoveInit.js b/packages/artplayer/src/events/mousemoveInit.js index 667adc832..98e02fcbe 100644 --- a/packages/artplayer/src/events/mousemoveInit.js +++ b/packages/artplayer/src/events/mousemoveInit.js @@ -25,5 +25,6 @@ export default function mousemoveInitInit(art, events) { if (!art.player.pip && player.playing && event.target === $video) { autoHide(); } + art.emit('mousemove'); }); } diff --git a/packages/artplayer/src/notice.js b/packages/artplayer/src/notice.js index bc1668f14..9adf351c4 100644 --- a/packages/artplayer/src/notice.js +++ b/packages/artplayer/src/notice.js @@ -17,7 +17,7 @@ export default class Notice { this.hide(); }, time); } - this.art.emit('notice:show'); + this.art.emit('notice:show', msg); } hide() { diff --git a/packages/artplayer/src/player/autoSizeMix.js b/packages/artplayer/src/player/autoSizeMix.js index 06bb53899..ff1ede043 100644 --- a/packages/artplayer/src/player/autoSizeMix.js +++ b/packages/artplayer/src/player/autoSizeMix.js @@ -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); diff --git a/packages/artplayer/src/player/fullscreenMix.js b/packages/artplayer/src/player/fullscreenMix.js index 791bbd76c..24e52fe2f 100644 --- a/packages/artplayer/src/player/fullscreenMix.js +++ b/packages/artplayer/src/player/fullscreenMix.js @@ -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'); }); } }, diff --git a/packages/artplayer/src/player/fullscreenWebMix.js b/packages/artplayer/src/player/fullscreenWebMix.js index 83a0d07a3..871272f41 100644 --- a/packages/artplayer/src/player/fullscreenWebMix.js +++ b/packages/artplayer/src/player/fullscreenWebMix.js @@ -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'); } }, }); diff --git a/packages/artplayer/src/player/volumeMix.js b/packages/artplayer/src/player/volumeMix.js index 6d0394a8b..fbb3f839b 100644 --- a/packages/artplayer/src/player/volumeMix.js +++ b/packages/artplayer/src/player/volumeMix.js @@ -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); }, }); } diff --git a/packages/artplayer/src/subtitle.js b/packages/artplayer/src/subtitle.js index 2fa9bfae1..6e6a92a4c 100644 --- a/packages/artplayer/src/subtitle.js +++ b/packages/artplayer/src/subtitle.js @@ -40,7 +40,7 @@ export default class Subtitle { .map(item => `

${item}

`) .join(''); } - this.art.emit('subtitle:update', $subtitle); + this.art.emit('subtitle:update', this.activeCue.text); } switch(url, name = 'unknown') { diff --git a/packages/artplayer/src/utils/component.js b/packages/artplayer/src/utils/component.js index 1b751cdce..f06849ad8 100644 --- a/packages/artplayer/src/utils/component.js +++ b/packages/artplayer/src/utils/component.js @@ -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); } }, },