添加自动旋转全屏

packages/artplayer/src/events/resizeInit.js

@@ -1,41 +1,24 @@
 import { throttle } from '../utils';
 
 export default function resizeInit(art, events) {
-    const {
-        option,
-        player,
-        template: { $player },
-    } = art;
+    const { option, player } = art;
 
-    const object = document.createElement('object');
-    object.setAttribute('aria-hidden', 'true');
-    object.setAttribute('tabindex', -1);
-    object.type = 'text/html';
-    object.data = 'about:blank';
-    let playerWidth = player.width;
-    let playerHeight = player.height;
     const resizeFn = throttle(() => {
-        if (player.width !== playerWidth || player.height !== playerHeight) {
-            playerWidth = player.width;
-            playerHeight = player.height;
-            if (option.autoSize) {
-                if (!player.fullscreen && !player.fullscreenWeb && !player.pip) {
-                    player.autoSize = true;
-                } else {
-                    player.autoSize = false;
-                }
+        if (option.autoSize) {
+            if (!player.fullscreen && !player.fullscreenWeb && !player.pip) {
+                player.autoSize = true;
+            } else {
+                player.autoSize = false;
             }
-            player.aspectRatioReset = true;
-            art.emit('resize', {
-                width: player.width,
-                height: player.height,
-            });
         }
+        player.aspectRatioReset = true;
+        art.emit('resize', {
+            width: player.width,
+            height: player.height,
+        });
     }, 500);
 
-    events.proxy(object, 'load', () => {
-        events.proxy(object.contentDocument.defaultView, 'resize', resizeFn);
+    events.proxy(window, ['orientationchange', 'resize'], () => {
+        resizeFn();
     });
-
-    $player.appendChild(object);
 }

packages/artplayer/src/player/fullscreenRotateMix.js

@@ -0,0 +1,40 @@
+import { addClass, removeClass, hasClass, def, setStyle } from '../utils';
+
+export default function fullscreenRotateMix(art, player) {
+    const { $container, $player } = art.template;
+
+    def(player, 'fullscreenRotate', {
+        get() {
+            return hasClass($container, 'art-fullscreen-rotate');
+        },
+        set: (value) => {
+            if (value) {
+                addClass($container, 'art-fullscreen-rotate');
+                player.autoSize = true;
+                const { clientHeight: bodyHeight, clientWidth: bodyWidth } = document.body;
+                const { clientHeight: playerHeight, clientWidth: playerWidth } = $player;
+                const bodyRatio = bodyWidth / bodyHeight;
+                const videoRatio = playerWidth / playerHeight;
+                const needSpin = bodyRatio < videoRatio;
+                if (needSpin) {
+                    const scale = Math.min(bodyHeight / playerWidth, bodyWidth / playerHeight).toFixed(2);
+                    setStyle($player, 'transform', `rotate(90deg) scale(${scale},${scale})`);
+                    art.emit('fullscreenRotateChange', true);
+                }
+            } else {
+                removeClass($container, 'art-fullscreen-rotate');
+                player.autoSize = art.option.autoSize;
+                setStyle($player, 'transform', null);
+                art.emit('fullscreenRotateChange', false);
+            }
+        },
+    });
+
+    def(player, 'fullscreenRotateToggle', {
+        set(value) {
+            if (value) {
+                player.fullscreenRotate = !player.fullscreenRotate;
+            }
+        },
+    });
+}

packages/artplayer/src/player/fullscreenWebMix.js

@@ -5,7 +5,7 @@ export default function fullscreenWebMix(art, player) {
 
     def(player, 'fullscreenWeb', {
         get() {
-            return hasClass($player, 'art-web-fullscreen');
+            return hasClass($player, 'art-fullscreen-web');
         },
         set(value) {
             if (player.fullscreen) {
@@ -13,11 +13,11 @@ export default function fullscreenWebMix(art, player) {
             }
 
             if (value) {
-                addClass($player, 'art-web-fullscreen');
+                addClass($player, 'art-fullscreen-web');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWebChange', true);
             } else {
-                removeClass($player, 'art-web-fullscreen');
+                removeClass($player, 'art-fullscreen-web');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWebChange', false);
             }

packages/artplayer/src/player/index.js

@@ -14,6 +14,7 @@ import aspectRatioMix from './aspectRatioMix';
 import screenshotMix from './screenshotMix';
 import fullscreenMix from './fullscreenMix';
 import fullscreenWebMix from './fullscreenWebMix';
+import fullscreenRotateMix from './fullscreenRotateMix';
 import pipMix from './pipMix';
 import loadedMix from './loadedMix';
 import playedMix from './playedMix';
@@ -42,6 +43,7 @@ export default class Player {
         screenshotMix(art, this);
         fullscreenMix(art, this);
         fullscreenWebMix(art, this);
+        fullscreenRotateMix(art, this);
         pipMix(art, this);
         loadedMix(art, this);
         playedMix(art, this);

packages/artplayer/src/style/fullscreenRotate.scss

@@ -0,0 +1,11 @@
+.art-fullscreen-rotate {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+}

packages/artplayer/src/style/fullscreenWeb.scss

@@ -1,9 +1,9 @@
 .art-video-player {
-    &.art-web-fullscreen {
+    &.art-fullscreen-web {
         position: fixed;
         z-index: 9999;
-        width: 100%;
-        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
         left: 0;
         top: 0;
         right: 0;

packages/artplayer/src/style/index.js

@@ -13,6 +13,7 @@ import './info.scss';
 import './hideCursor.scss';
 import './aspectRatio.scss';
 import './fullscreenWeb.scss';
+import './fullscreenRotate.scss';
 import './pip.scss';
 import './autoSize.scss';
 import './flip.scss';