fixed choppy video on iPhone - mp4 encoding

2026-02-08 18:04:34 +00:00
parent 8896aced3e
commit ac95ee9060
22 changed files with 539 additions and 60 deletions
--- a/public/media/andy.mp4
+++ b/public/media/andy.mp4
--- a/public/media/andy.webm
+++ b/public/media/andy.webm
--- a/public/media/ben.mp4
+++ b/public/media/ben.mp4
--- a/public/media/ben.webm
+++ b/public/media/ben.webm
--- a/public/media/recording_1770569104899.mp4
+++ b/public/media/recording_1770569104899.mp4
--- a/public/media/recording_1770569130681.mp4
+++ b/public/media/recording_1770569130681.mp4
--- a/public/media/recording_1770571670297.mp4
+++ b/public/media/recording_1770571670297.mp4
--- a/public/media/recording_1770571697502.mp4
+++ b/public/media/recording_1770571697502.mp4
--- a/public/media/recording_1770572219607.mp4
+++ b/public/media/recording_1770572219607.mp4
--- a/public/media/recording_1770572287059.mp4
+++ b/public/media/recording_1770572287059.mp4
--- a/public/media/recording_1770572628450.mp4
+++ b/public/media/recording_1770572628450.mp4
--- a/public/media/recording_1770572652336.mp4
+++ b/public/media/recording_1770572652336.mp4
--- a/public/media/recording_1770572757674.mp4
+++ b/public/media/recording_1770572757674.mp4
--- a/public/media/recording_1770572849703.mp4
+++ b/public/media/recording_1770572849703.mp4
--- a/public/signsync/test/index.html
+++ b/public/signsync/test/index.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SignSync Test Videos</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family: "Avenir Next", "Segoe UI", sans-serif;
+        background: #f4f2ec;
+        color: #1f1b16;
+      }
+      body {
+        margin: 0;
+        padding: 24px 16px 48px;
+      }
+      h1 {
+        font-size: 20px;
+        margin: 0 0 16px;
+      }
+      .videos {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        align-items: start;
+      }
+      .panel {
+        background: #fff;
+        border: 1px solid #e5e1d8;
+        border-radius: 12px;
+        padding: 12px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+      }
+      .controls {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+      .note {
+        font-size: 12px;
+        color: #5b5145;
+        margin: 0 0 16px;
+      }
+      .btn {
+        border: 1px solid #c8bfae;
+        background: #efe9dd;
+        color: #2f271f;
+        padding: 8px 14px;
+        border-radius: 999px;
+        font-size: 14px;
+        cursor: pointer;
+      }
+      .btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      .label {
+        font-size: 14px;
+        margin: 0 0 8px;
+        color: #5b5145;
+      }
+      video {
+        width: 100%;
+        height: auto;
+        border-radius: 8px;
+        background: #101010;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>SignSync Test Videos</h1>
+    <div class="controls">
+      <button class="btn" id="toggleBtn" type="button">Play Both</button>
+    </div>
+    <p class="note">On iPhone, both videos must be muted to play simultaneously. Use individual controls for audio.</p>
+    <div class="videos">
+      <div class="panel">
+        <p class="label">/signsync/media/ben.mp4</p>
+        <video id="videoA" src="/signsync/media/ben.mp4" controls playsinline muted></video>
+      </div>
+      <div class="panel">
+        <p class="label">/signsync/media/andy.mp4</p>
+        <video id="videoB" src="/signsync/media/andy.mp4" controls playsinline muted></video>
+      </div>
+    </div>
+    <script>
+      const videoA = document.getElementById('videoA');
+      const videoB = document.getElementById('videoB');
+      const toggleBtn = document.getElementById('toggleBtn');
+
+      const updateButtonLabel = () => {
+        const isPlaying = !videoA.paused || !videoB.paused;
+        toggleBtn.textContent = isPlaying ? 'Pause Both' : 'Play Both';
+      };
+
+      toggleBtn.addEventListener('click', async () => {
+        const shouldPlay = videoA.paused && videoB.paused;
+        if (shouldPlay) {
+          try {
+            videoA.muted = true;
+            videoB.muted = true;
+            await Promise.all([videoA.play(), videoB.play()]);
+          } catch (error) {
+            console.error('Failed to play both videos:', error);
+          }
+        } else {
+          videoA.pause();
+          videoB.pause();
+        }
+        updateButtonLabel();
+      });
+
+      ['play', 'pause', 'ended'].forEach((eventName) => {
+        videoA.addEventListener(eventName, updateButtonLabel);
+        videoB.addEventListener(eventName, updateButtonLabel);
+      });
+    </script>
+  </body>
+</html>