From c4c6748e82a921ddf369438cf69e3722dae9b946 Mon Sep 17 00:00:00 2001 From: gator Date: Fri, 4 Sep 2026 18:11:16 +0000 Subject: [PATCH] Play inline again - faststart remux makes the embedded player work --- index.html | 56 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 5063dd9..fd4ec99 100644 --- a/index.html +++ b/index.html @@ -28,20 +28,18 @@ h3{font-size:20px;margin:0 0 10px;letter-spacing:-.01em} .quote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:0 0 22px; color:var(--ink);font-size:17px} - .play{display:inline-flex;align-items:center;gap:13px;text-decoration:none; - background:var(--accent);color:#fff;font-weight:650;font-size:16.5px; - padding:15px 26px;border-radius:11px;border:1px solid #6ba0ff; - transition:filter .15s ease} - .play:hover{filter:brightness(1.1)} - .play svg{flex:0 0 auto} - .cap{font:12.5px/1.6 var(--mono);color:var(--muted);margin-top:14px} + .demo{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:40px;align-items:start} + @media(max-width:740px){.demo{grid-template-columns:1fr}} + .player{width:100%;aspect-ratio:9/16;border-radius:14px;border:1px solid var(--line); + background:#000;display:block} + .cap{font:12.5px/1.6 var(--mono);color:var(--muted);margin-top:12px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px} .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px} .card .n{font:600 12px/1 var(--mono);color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:10px} .card p{margin:0;color:var(--muted);font-size:15px} - table{width:100%;border-collapse:collapse;font-size:15px;max-width:520px} + table{width:100%;border-collapse:collapse;font-size:15px} th,td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top} - th{color:var(--muted);font-weight:600;width:42%;font-size:14px} + th{color:var(--muted);font-weight:600;width:44%;font-size:14px} .k{font-family:var(--mono);font-size:13.5px;color:var(--accent2)} ul{margin:0;padding-left:20px;color:var(--muted)} li{margin-bottom:9px} @@ -62,23 +60,27 @@

The clip

-

Butcher, on humanoid robots

-

“That robot is going to be the best-selling product of all time. Every house gets one.”

-

A bulldog in a podcast booth, mid-argument on a video call. The audio, the mouth movement and the room were all produced in a single generation from a text prompt — no reference photo, and no separate lip-sync pass.

- - - - Watch the clip - -

720×1280 · 8s · h264 + AAC · 24fps · 3.3 MB · opens in a new tab

- - - - - - - -
Modelgoogle/veo-3.1-lite
RouteOpenRouter video API
ModeText-to-video, native audio
Generation time62 seconds
List price$0.05 / second at 720p
+
+
+ +

720×1280 · 8s · h264 + AAC · 24fps · 3.3 MB

+
+
+

Butcher, on humanoid robots

+

“That robot is going to be the best-selling product of all time. Every house gets one.”

+

A bulldog in a podcast booth, mid-argument on a video call. The audio, the mouth movement and the room were all produced in a single generation from a text prompt — no reference photo, and no separate lip-sync pass.

+ + + + + + +
Modelgoogle/veo-3.1-lite
RouteOpenRouter video API
ModeText-to-video, native audio
Generation time62 seconds
List price$0.05 / second at 720p
+
+
@@ -98,7 +100,7 @@
  • Describing the breed matters more than image quality. A full-resolution character plate was reconstructed faithfully from a 150×150 thumbnail once the coat and markings were named in words.
  • Every line is verified, not assumed. Generated audio is transcribed back with Whisper and checked against the script before a clip is accepted.
  • Each shot gets a clean context. Generating several clips in one conversation caused dialogue to bleed between characters — one had another’s line appended to its own.
    • -
  • Video needs remuxing before it will stream. Model output puts the moov index at the end of the file, so a browser shows a blank player until the whole thing downloads. A lossless faststart pass moves it to the front.
    • +
  • Video needs remuxing before it will play in a page. Model output puts the moov index at the end of the file, so a browser shows a blank player until the whole thing downloads. A lossless faststart pass moves it to the front and the clip plays immediately.
  • Captions are burned in afterwards, not generated. Video models render text unreliably; an overlay pass gives identical typography across every clip and costs nothing to restyle.