Browse Source

修复视频初始宽高的bug

liwei 1 year ago
parent
commit
e83d65d5d2
1 changed files with 25 additions and 5 deletions
  1. 25 5
      src/modules/editor/components/CompUI/basicUI/Video/component.tsx

+ 25 - 5
src/modules/editor/components/CompUI/basicUI/Video/component.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted } from "vue";
+import { defineComponent, ref, watch, onMounted,nextTick } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -43,11 +43,31 @@ export const Component = defineComponent({
     );
     onMounted(() => {
       const el = videoRef.value as HTMLVideoElement;
-      el.addEventListener("loadedmetadata", ()=>{
-          if (value.ratio == 0 && comp.layout.size[0] / comp.layout.size[1] != value.ratio) {
-            updateSize();
+
+      if (store.isEditMode) {
+        el.addEventListener("loadedmetadata", ()=>{
+          const { videoWidth, videoHeight } = videoRef.value as HTMLVideoElement;
+          if ( videoHeight != 0 && videoHeight != 0) {
+              const r = videoWidth * 1.0 / videoHeight;
+              if (comp.value.ratio == 0 && Math.abs( comp.layout.size[0] / comp.layout.size[1] - r) > 0.01) {
+                 updateSize();
+                 return;
+              }
+          } else {
+            setTimeout(() => {
+              const { videoWidth, videoHeight } = videoRef.value as HTMLVideoElement;
+              const r = videoWidth * 1.0 / videoHeight;
+    
+              console.log("loadedmetadata==>",videoWidth,videoHeight,  comp.value.ratio, r, comp.layout.size);
+    
+              if (comp.value.ratio == 0 && Math.abs( comp.layout.size[0] / comp.layout.size[1] - r) > 0.01) {
+                  updateSize();
+                  console.log("updated sizeed");
+              }
+            }, 1000);
           }
-      })
+        })
+      }
 
       el.addEventListener("play", () => {
         controls.mediaCtrl.pauseOtherMedia(props.compId);