移除大部分异步操作

packages/artplayer/src/events/index.js

@@ -10,11 +10,13 @@ export default class Events {
         this.proxy = this.proxy.bind(this);
         this.hover = this.hover.bind(this);
         this.loadImg = this.loadImg.bind(this);
-        clickInit(art, this);
-        hoverInit(art, this);
-        mousemoveInit(art, this);
-        resizeInit(art, this);
-        doubleClickInit(art, this);
+        art.on('firstCanplay', () => {
+            clickInit(art, this);
+            hoverInit(art, this);
+            mousemoveInit(art, this);
+            resizeInit(art, this);
+            doubleClickInit(art, this);
+        });
     }
 
     proxy(target, name, callback, option = {}) {

packages/artplayer/src/events/resizeInit.js

@@ -1,5 +1,4 @@
 import { ResizeObserver } from 'resize-observer';
-import { sleep } from '../utils';
 
 export default function resizeInit(art, events) {
     const {
@@ -7,17 +6,15 @@ export default function resizeInit(art, events) {
         template: { $player },
     } = art;
     const resizeObserver = new ResizeObserver(() => {
-        sleep().then(() => {
-            if (option.autoSize) {
-                if (!art.player.fullscreenState && !art.player.fullscreenWebState && !art.player.pipState) {
-                    art.player.autoSize();
-                } else {
-                    art.player.autoSizeRemove();
-                }
+        if (option.autoSize) {
+            if (!art.player.fullscreenState && !art.player.fullscreenWebState && !art.player.pipState) {
+                art.player.autoSize();
+            } else {
+                art.player.autoSizeRemove();
             }
-            art.player.aspectRatioReset();
-            art.emit('resize', $player);
-        });
+        }
+        art.player.aspectRatioReset();
+        art.emit('resize', $player);
     });
     resizeObserver.observe($player);
     events.destroyEvents.push(() => {

packages/artplayer/src/player/attachUrlMix.js

@@ -1,4 +1,4 @@
-import { getExt } from '../utils';
+import { getExt, sleep } from '../utils';
 
 export default function attachUrlMix(art, player) {
     const {
@@ -15,15 +15,17 @@ export default function attachUrlMix(art, player) {
         value: url => {
             const typeName = type || getExt(url);
             const typeCallback = customType[typeName];
-            if (typeName && typeCallback) {
-                art.emit('beforeCustomType', typeName);
-                typeCallback($video, player.returnUrl(url), art);
-                art.emit('afterCustomType', typeName);
-            } else {
-                art.emit('beforeAttachUrl', url);
-                $video.src = player.returnUrl(url);
-                art.emit('afterAttachUrl', $video.src);
-            }
+            sleep().then(() => {
+                if (typeName && typeCallback) {
+                    art.emit('beforeCustomType', typeName);
+                    typeCallback($video, player.returnUrl(url), art);
+                    art.emit('afterCustomType', typeName);
+                } else {
+                    art.emit('beforeAttachUrl', url);
+                    $video.src = player.returnUrl(url);
+                    art.emit('afterAttachUrl', $video.src);
+                }
+            });
         },
     });
 }

packages/artplayer/src/player/attrInit.js

@@ -1,4 +1,4 @@
-import { clamp, sleep } from '../utils';
+import { clamp } from '../utils';
 
 export default function attrInit(art, player) {
     const {
@@ -25,7 +25,5 @@ export default function attrInit(art, player) {
         $video.autoplay = option.autoplay;
     }
 
-    sleep().then(() => {
-        player.attachUrl(option.url);
-    });
+    player.attachUrl(option.url);
 }

packages/artplayer/src/storage.js

@@ -1,19 +1,15 @@
-import { sleep } from './utils';
-
 export default class Storage {
     constructor(art) {
         this.art = art;
         this.storageName = 'artplayer_settings';
-        sleep().then(() => {
-            this.init();
-        });
+        this.init();
     }
 
     init() {
-        const { player } = this.art;
+        const { option } = this.art;
         const volume = this.get('volume');
         if (volume) {
-            player.volume = volume;
+            option.volume = volume;
         }
     }
 

packages/artplayer/src/template.js

@@ -18,36 +18,36 @@ export default class Template {
     init() {
         this.$container.innerHTML = `
           <div class="artplayer-video-player">
-            <video data-index="10" class="artplayer-video"></video>
-            <div data-index="20" class="artplayer-subtitle"></div>
-            <div data-index="30" class="artplayer-layers"></div>
-            <div data-index="40" class="artplayer-mask"></div>
-            <div data-index="50" class="artplayer-bottom">
+            <video class="artplayer-video"></video>
+            <div class="artplayer-subtitle"></div>
+            <div class="artplayer-layers"></div>
+            <div class="artplayer-mask"></div>
+            <div class="artplayer-bottom">
               <div class="artplayer-progress"></div>
               <div class="artplayer-controls">
                 <div class="artplayer-controls-left"></div>
                 <div class="artplayer-controls-right"></div>
               </div>
             </div>
-            <div data-index="60" class="artplayer-loading"></div>
-            <div data-index="70" class="artplayer-notice">
+            <div class="artplayer-loading"></div>
+            <div class="artplayer-notice">
               <div class="artplayer-notice-inner"></div>
             </div>
-            <div data-index="80" class="artplayer-setting">
+            <div class="artplayer-setting">
               <div class="artplayer-setting-inner">
                 <div class="artplayer-setting-body"></div>
                 <div class="artplayer-setting-close">×</div>
               </div>
             </div>
-            <div data-index="90" class="artplayer-info">
+            <div class="artplayer-info">
               <div class="artplayer-info-panel"></div>
               <div class="artplayer-info-close">[x]</div>
             </div>
-            <div data-index="100" class="artplayer-pip-header">
+            <div class="artplayer-pip-header">
               <div class="artplayer-pip-title"></div>
               <div class="artplayer-pip-close">×</div>
             </div>
-            <div data-index="110" class="artplayer-contextmenu"></div>
+            <div class="artplayer-contextmenu"></div>
           </div>
         `;
         this.$player = this.$container.querySelector('.artplayer-video-player');