add cssPropertyMix

packages/artplayer/src/player/cssPropertyMix.js

@@ -0,0 +1,15 @@
+import { def } from '../utils';
+
+export default function cssPropertyMix(art) {
+    const { $player } = art.template;
+
+    def(art, 'cssProperty', {
+        value(key, value) {
+            if (value) {
+                return $player.style.setProperty(key, value);
+            } else {
+                return getComputedStyle($player).getPropertyValue(key);
+            }
+        },
+    });
+}

packages/artplayer/src/player/index.js

@@ -24,6 +24,7 @@ import miniMix from './miniMix';
 import loopMix from './loopMix';
 import posterMix from './posterMix';
 import autoHeightMix from './autoHeightMix';
+import cssPropertyMix from './cssPropertyMix';
 import themeMix from './themeMix';
 import titleMix from './titleMix';
 import typeMix from './typeMix';
@@ -61,6 +62,7 @@ export default class Player {
         loopMix(art);
         posterMix(art);
         autoHeightMix(art);
+        cssPropertyMix(art);
         themeMix(art);
         titleMix(art);
         typeMix(art);

packages/artplayer/src/player/optionInit.js

@@ -7,9 +7,9 @@ export default function attrInit(art) {
         template: { $video, $poster },
     } = art;
 
-    Object.keys(option.moreVideoAttr).forEach((key) => {
+    for (const key in option.moreVideoAttr) {
         art.attr(key, option.moreVideoAttr[key]);
-    });
+    }
 
     if (option.muted) {
         art.muted = option.muted;
@@ -37,9 +37,5 @@ export default function attrInit(art) {
         $video['webkit-playsinline'] = true;
     }
 
-    if (option.theme) {
-        art.theme = option.theme;
-    }
-
     art.url = option.url;
 }

packages/artplayer/src/player/themeMix.js

@@ -1,18 +1,15 @@
 import { def } from '../utils';
 
 export default function themeMix(art) {
-    const {
-        option,
-        template: { $player },
-    } = art;
+    const { option } = art;
 
     def(art, 'theme', {
         get() {
-            return getComputedStyle($player).getPropertyValue('--art-theme');
+            return art.cssProperty('--art-theme');
         },
         set(theme) {
             option.theme = theme;
-            $player.style.setProperty('--art-theme', theme);
+            art.cssProperty('--art-theme', theme);
         },
     });
 }