添加自动尺寸

packages/artplayer/src/player/autoSizeMix.js

@@ -0,0 +1,32 @@
+import { setStyle } from '../utils';
+
+export default function resizeMix(art, player) {
+  const { refs: { $container, $player, $video } } = art;
+
+  Object.defineProperty(player, 'autoSize', {
+    value: () => {
+      const { videoWidth, videoHeight } = $video;
+      const { width, height } = $container.getBoundingClientRect();
+      const videoRatio = videoWidth / videoHeight;
+      const containerRatio = width / height;
+      $container.classList.add('artplayer-auto-size');
+      if (containerRatio > videoRatio) {
+        const percentage = height * videoRatio / width * 100;
+        setStyle($player, 'width', `${percentage}%`);
+        setStyle($player, 'height', '100%');
+      } else {
+        const percentage = width / videoRatio / height * 100;
+        setStyle($player, 'width', '100%');
+        setStyle($player, 'height', `${percentage}%`);
+      }
+    }
+  });
+
+  Object.defineProperty(player, 'autoSizeRemove', {
+    value: () => {
+      $container.classList.remove('artplayer-auto-size');
+      setStyle($player, 'width', null);
+      setStyle($player, 'height', null);
+    }
+  });
+}

packages/artplayer/src/player/eventInit.js

@@ -4,6 +4,8 @@ import { sleep } from '../utils';
 export default function eventInit(art, player) {
   const { option, events: { proxy }, refs: { $player, $video }, i18n, notice } = art;
   let firstCanplay = false;
+  let reconnectTime = 0;
+  const maxReconnectTime = 5;
 
   proxy($video, 'click', () => {
     player.toggle();
@@ -19,6 +21,12 @@ export default function eventInit(art, player) {
     art.loading.show();
   });
 
+  art.on('video:loadedmetadata', () => {
+    if (option.autoSize) {
+      player.autoSize();
+    }
+  });
+
   art.on('video:loadeddata', () => {
     art.loading.hide();
   });
@@ -32,6 +40,7 @@ export default function eventInit(art, player) {
   });
 
   art.on('video:canplay', () => {
+    reconnectTime = 0;
     if (!firstCanplay) {
       firstCanplay = true;
       art.emit('firstCanplay');
@@ -68,12 +77,12 @@ export default function eventInit(art, player) {
   });
 
   art.on('video:error', () => {
-    if (player.reconnectTime < player.maxReconnectTime) {
+    if (reconnectTime < maxReconnectTime) {
       sleep(1000).then(() => {
         player.reconnectTime++;
         art.emit('beforeMountUrl', option.url);
         $video.src = player.mountUrl(option.url);
-        notice.show(`${i18n.get('Reconnect')}: ${player.reconnectTime}`);
+        notice.show(`${i18n.get('Reconnect')}: ${reconnectTime}`);
       });
     } else {
       art.isPlaying = false;

packages/artplayer/src/player/index.js

@@ -17,12 +17,10 @@ import fullscreenWebMix from './fullscreenWebMix';
 import pipMix from './pipMix';
 import loadedMix from './loadedMix';
 import playedMix from './playedMix';
+import autoSizeMix from './autoSizeMix';
 
 export default class Player {
   constructor(art) {
-    this.reconnectTime = 0;
-    this.maxReconnectTime = 5;
-
     mountUrlMix(art, this);
     attrInit(art, this);
     eventInit(art, this);
@@ -42,5 +40,6 @@ export default class Player {
     pipMix(art, this);
     loadedMix(art, this);
     playedMix(art, this);
+    autoSizeMix(art, this);
   }
 }

packages/artplayer/src/player/loadedMix.js

@@ -1,10 +1,9 @@
 export default function seekMix(art, player) {
   Object.defineProperty(player, 'loaded', {
-    get: () => {
-      const { $video } = art.refs;
-      return $video.buffered.length
-        ? $video.buffered.end($video.buffered.length - 1) / $video.duration
-        : 0;
-    }
+    get: () =>
+      art.refs.$video.buffered.length
+        ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) /
+          art.refs.$video.duration
+        : 0
   });
 }

packages/artplayer/src/player/playedMix.js

@@ -1,8 +1,5 @@
 export default function seekMix(art, player) {
   Object.defineProperty(player, 'played', {
-    get: () => {
-      const { $video } = art.refs;
-      return $video.currentTime / $video.duration;
-    }
+    get: () => art.refs.$video.currentTime / art.refs.$video.duration
   });
 }

packages/artplayer/src/player/switchMix.js

@@ -9,7 +9,6 @@ export default function switchMix(art, player) {
       option.url = url;
       player.playbackRateRemove();
       player.aspectRatioRemove();
-      player.reconnectTime = 0;
       player.seek(currentTime);
       if (isPlaying) {
         player.play();