Update events.md

docs/document/events.md

@@ -1,13 +1,39 @@
+## 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:
+
+[Run Code](/Events.canplay)
+
 ```js
-art.on('ready', function (args) {
+var art = new Artplayer({
-    console.log('The player can play');
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:canplay', function (event) {
+    console.info(event);
 });
 ```
 
-## Instance
+## Player custom event
+
+[Run Code](/Events.example)
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', function (args) {
+    console.info('The player can play');
+});
+```
 
 | Event                 | Description                             | Parameter                 |
-| --------------------- | --------------------------------------- | ----------------------- |
+| --------------------- | --------------------------------------- | ------------------------- |
 | `ready`               | When the video can be played            | `undefined`               |
 | `play`                | When the video play                     | `undefined`               |
 | `pause`               | When the video pause                    | `undefined`               |
@@ -41,89 +67,22 @@ art.on('ready', function (args) {
 | `loopAdd`             | When an interval loop is added          | Interval arrary           |
 | `loopRemove`          | When the interval loop is deleted       | `undefined`               |
 | `loopStart`           | When entering the interval cycle        | Interval arrary           |
-
-## 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             |
-| ---------------- | ----------------------------- | --------------------- |
 | `subtitleUpdate`      | When the subtitles change               | Current subtitle text     |
 | `subtitleSwitch`      | When switching subtitles                | Current subtitle url      |
 | `subtitleLoad`        | When the subtitles loaded               | Current subtitle url      |
 | `subtitleErr`         | When the subtitles load error           | Error object              |
 | `subtitleToggle`      | When displaying subtitles               | Whether to show           |
-
-## Notice
-
-| Event          | Description            | Parameter       |
-| -------------- | ---------------------- | --------------- |
 | `noticeToggle`        | When displaying notice                  | Whether to show           |
-
-## Mask
-
-| Event        | Description          | Parameter       |
-| ------------ | -------------------- | --------------- |
 | `maskToggle`          | When displaying mask                    | Whether to show           |
-
-## Loading
-
-| Event           | Description             | Parameter       |
-| --------------- | ----------------------- | --------------- |
 | `loadingToggle`       | When displaying loading                 | Whether to show           |
-
-## Layer
-
-| Event         | Description             | Parameter           |
-| ------------- | ----------------------- | ------------------- |
 | `layerAdd`            | When adding a new layer                 | Layer configuration       |
 | `layerToggle`         | When displaying layer                   | Whether to show           |
-
-## Info
-
-| Event        | Description          | Parameter       |
-| ------------ | -------------------- | --------------- |
 | `infoToggle`          | When displaying info                    | Whether to show           |
-
-## Hotkey
-
-| Event    | Description                  | Parameter           |
-| -------- | ---------------------------- | ------------------- |
 | `hotkey`              | When the hotkey is triggered            | Hotkey event object       |
-
-## Setting
-
-| Event           | Description               | Parameter             |
-| --------------- | ------------------------- | --------------------- |
 | `settingAdd`          | When adding a new setting               | Setting configuration     |
 | `settingToggle`       | When displaying setting                 | Whether to show           |
-
-## Contextmenu
-
-| Event               | Description                   | Parameter                 |
-| ------------------- | ----------------------------- | ------------------------- |
 | `contextmenuAdd`      | When adding a new contextmenu           | Contextmenu configuration |
 | `contextmenuToggle`   | When displaying contextmenu             | Whether to show           |
-
-## Control
-
-| Event           | Description               | Parameter             |
-| --------------- | ------------------------- | --------------------- |
 | `controlAdd`          | When adding a new control               | Control configuration     |
 | `controlToggle`       | When displaying control                 | Whether to show           |
-
-## Plugins
-
-| Event       | Description              | Parameter            |
-| ----------- | ------------------------ | -------------------- |
 | `pluginAdd`           | When adding a new plugin                | Plugin configuration      |