优化svg

packages/artplayer/src/controls/playAndPause.js

@@ -24,11 +24,11 @@ export default class PlayAndPause {
 
     art.on('video:playing', () => {
       setStyle(this.$play, 'display', 'none');
-      setStyle(this.$pause, 'display', 'block');
+      setStyle(this.$pause, 'display', 'flex');
     });
 
     art.on('video:pause', () => {
-      setStyle(this.$play, 'display', 'block');
+      setStyle(this.$play, 'display', 'flex');
       setStyle(this.$pause, 'display', 'none');
     });
   }

packages/artplayer/src/controls/time.js

@@ -6,22 +6,13 @@ export default class Time {
   }
 
   apply(art, $control) {
-    $control.innerHTML = '00:00 / 00:00';
-
-    function setTime() {
+    function getTime() {
       $control.innerHTML = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
     }
 
-    art.on('video:canplay', () => {
-      setTime();
-    });
-
-    art.on('video:timeupdate', () => {
-      setTime();
-    });
-
-    art.on('video:seeking', () => {
-      setTime();
+    getTime();
+    ['video:loadedmetadata', 'video:timeupdate', 'video:progress'].forEach(event => {
+      art.on(event, getTime);
     });
   }
 }

packages/artplayer/src/controls/volume.js

@@ -19,9 +19,9 @@ export default class Volume {
     art.on('volume', percentage => {
       if (percentage === 0) {
         setStyle(this.$volume, 'display', 'none');
-        setStyle(this.$volumeClose, 'display', 'block');
+        setStyle(this.$volumeClose, 'display', 'flex');
       } else {
-        setStyle(this.$volume, 'display', 'block');
+        setStyle(this.$volume, 'display', 'flex');
         setStyle(this.$volumeClose, 'display', 'none');
       }
     });