优化DEMO

packages/artplayer/src/controls/index.js

@@ -158,7 +158,11 @@ export default class Controls {
 
         errorHandle(parent, 'Controls option.position can not be empty');
         this.id += 1;
-        return component(this.art, this, parent, option, callback, 'control');
+        const control = component(this.art, this, parent, option, callback, 'control');
+        if (!(control.$ref.firstElementChild && control.$ref.firstElementChild.tagName === 'I')) {
+            control.$ref.classList.add('art-control-onlyText');
+        }
+        return control;
     }
 
     set show(value) {

packages/artplayer/src/controls/quality.js

@@ -1,4 +1,4 @@
-import { append } from '../utils';
+import { append, getStyle } from '../utils';
 
 export default function quality(controlOption) {
     return art => ({
@@ -6,7 +6,7 @@ export default function quality(controlOption) {
         mounted: $control => {
             const {
                 option,
-                events: { proxy },
+                events: { proxy, hover },
                 player,
             } = art;
             
@@ -19,6 +19,10 @@ export default function quality(controlOption) {
                 .join('');
             const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
 
+            hover($control, () => {
+                $qualitys.style.left = `-${getStyle($qualitys, 'width') / 2 - $control.clientWidth / 2}px`;
+            });
+
             proxy($qualitys, 'click', event => {
                 const index = Number(event.target.dataset.index);
                 const { url, name } = option.quality[index];

packages/artplayer/src/events/index.js

@@ -33,8 +33,12 @@ export default class Events {
     }
 
     hover(target, mouseenter, mouseleave) {
-        this.proxy(target, 'mouseenter', mouseenter);
-        this.proxy(target, 'mouseleave', mouseleave);
+        if (mouseenter) {
+            this.proxy(target, 'mouseenter', mouseenter);
+        }
+        if (mouseleave) {
+            this.proxy(target, 'mouseleave', mouseleave);
+        }
     }
 
     loadImg(img) {

packages/artplayer/src/style/bottom.scss

@@ -154,6 +154,10 @@
                 }
             }
     
+            .art-control-onlyText {
+                padding: 0 10px;
+            }
+
             .art-control-volume {
                 .art-volume-panel {
                     position: relative;
@@ -199,19 +203,13 @@
                     width: 60px;
                 }
             }
-    
-            .art-control-time {
-                padding: 0 10px;
-            }
 
             .art-control-quality {
                 position: relative;
                 z-index: 30;
-                padding: 0 10px;
                 .art-qualitys {
                     display: none;
                     position: absolute;
-                    left: -15px;
                     bottom: 35px;
                     width: 100px;
                     padding: 5px 0;