Update index.html

index.html

@@ -154,17 +154,24 @@
         }
 
         #video-container {
-            width: 100%;
-            background-color: #000;
             margin: 20px auto 0;
             position: relative;
             overflow: hidden;
             border-radius: 8px;
             display: none;
+            background-color: #000;
+        }
+
+        #video-container.aspect-16-9 {
+            width: 100%;
+            aspect-ratio: 16 / 9;
         }
 
-        #video-container.aspect-16-9 { aspect-ratio: 16 / 9; }
-        #video-container.aspect-9-16 { aspect-ratio: 9 / 16; max-height: 60vh; }
+        #video-container.aspect-9-16 {
+            height: 65vh;
+            aspect-ratio: 9 / 16;
+            max-width: 100%;
+        }
 
         #video-container img {
             position: absolute;
@@ -316,15 +323,17 @@
         const displayNextImage = () => {
             if (imageElements.length === 0) return;
 
-            const lastIndex = (currentImageIndex - 1 + imageElements.length) % imageElements.length;
-            imageElements[lastIndex].classList.remove('active');
+            imageElements.forEach(img => img.classList.remove('active'));
             
             const activeIndex = currentImageIndex % imageElements.length;
             const currentImg = imageElements[activeIndex];
             
-            currentImg.className = 'active kenburns';
             const randomAnimation = KENBURNS_CLASSES[Math.floor(Math.random() * KENBURNS_CLASSES.length)];
-            currentImg.classList.add(randomAnimation);
+            currentImg.className = 'kenburns ' + randomAnimation;
+            
+            setTimeout(() => {
+                currentImg.classList.add('active');
+            }, 50);
 
             currentImageIndex++;
         };
@@ -338,12 +347,20 @@
             displayNextImage(); 
             slideInterval = setInterval(displayNextImage, SLIDE_DURATION_MS);
         };
-
+        
         const startRecording = () => {
             const ctx = canvas.getContext('2d');
             const stream = canvas.captureStream(30);
             recordedChunks = [];
-            mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+
+            const options = { mimeType: 'video/webm; codecs=vp9' };
+            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+                 options.mimeType = 'video/webm; codecs=vp8';
+                 if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+                      options.mimeType = 'video/webm';
+                 }
+            }
+            mediaRecorder = new MediaRecorder(stream, options);
 
             mediaRecorder.ondataavailable = event => {
                 if (event.data.size > 0) recordedChunks.push(event.data);
@@ -365,17 +382,7 @@
             recordingInterval = setInterval(() => {
                 const activeImg = document.querySelector('#video-container img.active');
                 if (activeImg) {
-                    const containerRect = videoContainer.getBoundingClientRect();
-                    const imgRect = activeImg.getBoundingClientRect();
-                    const scaleX = activeImg.width / imgRect.width;
-                    const scaleY = activeImg.height / imgRect.height;
-                    
-                    const dx = (imgRect.left - containerRect.left) * scaleX;
-                    const dy = (imgRect.top - containerRect.top) * scaleY;
-                    const dWidth = containerRect.width * scaleX;
-                    const dHeight = containerRect.height * scaleY;
-
-                    ctx.drawImage(activeImg, dx, dy, dWidth, dHeight, 0, 0, canvas.width, canvas.height);
+                    ctx.drawImage(activeImg, 0, 0, canvas.width, canvas.height);
                 }
             }, 1000 / 30);
         };
@@ -401,14 +408,18 @@
             setStatus('Preparando imágenes...', 'processing');
 
             videoContainer.innerHTML = '';
-            imageElements = Array.from(files).map(file => {
-                const img = document.createElement('img');
-                img.src = URL.createObjectURL(file);
-                videoContainer.appendChild(img);
-                return img;
-            });
             
-            setTimeout(() => {
+            const imageLoadPromises = Array.from(files).map(file => {
+                return new Promise((resolve) => {
+                    const img = document.createElement('img');
+                    img.src = URL.createObjectURL(file);
+                    img.onload = () => resolve(img);
+                    videoContainer.appendChild(img);
+                });
+            });
+
+            Promise.all(imageLoadPromises).then(loadedImages => {
+                imageElements = loadedImages;
                 const utterance = new SpeechSynthesisUtterance(text);
                 utterance.lang = langSelect.value;
                 
@@ -416,8 +427,8 @@
                     setStatus('Reproduciendo y grabando video...', 'processing');
                     
                     const [w, h] = aspectRatioSelect.value.split(':').map(Number);
-                    canvas.width = 1280;
-                    canvas.height = (1280 * h) / w;
+                    canvas.width = w === 9 ? 720 : 1280;
+                    canvas.height = w === 9 ? 1280 : 720;
 
                     startSlideshow();
                     startRecording();
@@ -438,7 +449,7 @@
                 };
 
                 window.speechSynthesis.speak(utterance);
-            }, 500);
+            });
         });
         
         window.addEventListener('beforeunload', stopAllProcesses);