优化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];