add attrMix.js

packages/artplayer/src/player/attrMix.js

@@ -0,0 +1,14 @@
+import { def } from '../utils';
+
+export default function attrMix(art) {
+    const {
+        template: { $video },
+    } = art;
+
+    def(art, 'attr', {
+        value(key, value) {
+            if (value === undefined) return $video[key];
+            $video[key] = value;
+        },
+    });
+}

packages/artplayer/src/player/exclusiveMix.js

@@ -1,6 +1,6 @@
 import { def } from '../utils';
 
-export default function exclusiveInit(art) {
+export default function exclusiveMix(art) {
     const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
 
     function exclusive(props) {

packages/artplayer/src/player/index.js

@@ -1,7 +1,5 @@
 import urlMix from './urlMix';
-import attrInit from './attrInit';
-import eventInit from './eventInit';
-import exclusiveInit from './exclusiveInit';
+import attrMix from './attrMix';
 import playMix from './playMix';
 import pauseMix from './pauseMix';
 import toggleMix from './toggleMix';
@@ -29,13 +27,14 @@ import posterMix from './posterMix';
 import autoHeightMix from './autoHeightMix';
 import themeMix from './themeMix';
 import titleMix from './titleMix';
+import exclusiveMix from './exclusiveMix';
+import optionInit from './optionInit';
+import eventInit from './eventInit';
 
 export default class Player {
     constructor(art) {
         urlMix(art);
-        eventInit(art);
-        attrInit(art);
-        exclusiveInit(art);
+        attrMix(art);
         playMix(art);
         pauseMix(art);
         toggleMix(art);
@@ -63,5 +62,8 @@ export default class Player {
         autoHeightMix(art);
         themeMix(art);
         titleMix(art);
+        exclusiveMix(art);
+        eventInit(art);
+        optionInit(art);
     }
 }

packages/artplayer/src/player/optionInit.js

@@ -8,24 +8,23 @@ export default function attrInit(art) {
     } = art;
 
     Object.keys(option.moreVideoAttr).forEach((key) => {
-        $video[key] = option.moreVideoAttr[key];
+        art.attr(key, option.moreVideoAttr[key]);
     });
 
     if (option.muted) {
-        $video.muted = option.muted;
+        art.muted = option.muted;
     }
 
     if (option.volume) {
-        $video.volume = clamp(option.volume, 0, 1);
+        art.volume = clamp(option.volume, 0, 1);
     }
 
     const volume = storage.get('volume');
     if (volume) {
-        $video.volume = clamp(volume, 0, 1);
+        art.volume = clamp(volume, 0, 1);
     }
 
     if (option.poster) {
-        // $video.poster = option.poster;
         setStyle($poster, 'backgroundImage', `url(${option.poster})`);
     }
 
@@ -33,7 +32,9 @@ export default function attrInit(art) {
         $video.autoplay = option.autoplay;
     }
 
-    $video.controls = false;
+    if (option.theme) {
+        art.theme = option.theme;
+    }
 
     if (option.ads.length === 0) {
         art.url = option.url;

packages/artplayer/src/player/themeMix.js

@@ -8,7 +8,7 @@ export default function themeMix(art) {
 
     def(art, 'theme', {
         get() {
-            return $player.style.getProperty('--theme');
+            return getComputedStyle($player).getPropertyValue('--theme');
         },
         set(theme) {
             option.theme = theme;