Preload fast embed startup media

Author: richiemcilroy

apps/site/app/embed-fast/[assetId]/route.ts

@@ -107,6 +107,10 @@ function html(value: unknown) {
     .replaceAll('"', """);
 }
 
+function linkHeaderValue(value: string) {
+  return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+}
+
 function jsString(value: string) {
   return JSON.stringify(value).replaceAll("<", "\\u003c");
 }
@@ -223,6 +227,34 @@ function playbackOrigin(bootstrap: WatchPlaybackBootstrapReady | null) {
   }
 }
 
+function preloadablePlaybackSelection(
+  selection: ReturnType<typeof playbackSelection>,
+) {
+  if (!selection?.url || selection.contentType !== "video/mp4") return null;
+  return selection;
+}
+
+function appendStartupLinkHeaders(
+  headers: Headers,
+  edge: ReturnType<typeof playbackOrigin>,
+  selection: ReturnType<typeof playbackSelection>,
+) {
+  if (edge) {
+    headers.append(
+      "link",
+      `<${linkHeaderValue(edge.origin)}>; rel=preconnect; crossorigin`,
+    );
+  }
+
+  const preload = preloadablePlaybackSelection(selection);
+  if (!preload) return;
+  const preloadContentType = preload.contentType ?? "video/mp4";
+  headers.append(
+    "link",
+    `<${linkHeaderValue(preload.url)}>; rel=preload; as=video; type="${linkHeaderValue(preloadContentType)}"; crossorigin="use-credentials"; fetchpriority=high`,
+  );
+}
+
 function playerMessage(
   bootstrap: WatchPlaybackBootstrapResponse | null,
   selection: ReturnType<typeof playbackSelection>,
@@ -246,6 +278,8 @@ export function renderFastEmbedHtml(options: FastEmbedRenderOptions) {
   const contentType = selection?.contentType
     ? ` type="${html(selection.contentType)}"`
     : "";
+  const preload = preloadablePlaybackSelection(selection);
+  const preloadContentType = preload?.contentType ?? "video/mp4";
   const bootstrapMs =
     typeof options.bootstrapMs === "number"
       ? ` data-rend-bootstrap-ms="${Math.max(0, Math.round(options.bootstrapMs))}"`
@@ -261,6 +295,7 @@ export function renderFastEmbedHtml(options: FastEmbedRenderOptions) {
 <title>Rend player</title>
 ${edge ? `<link rel="dns-prefetch" href="${html(edge.dnsPrefetch)}">` : ""}
 ${edge ? `<link rel="preconnect" href="${html(edge.origin)}" crossorigin>` : ""}
+${preload ? `<link rel="preload" as="video" href="${html(preload.url)}" type="${html(preloadContentType)}" crossorigin="use-credentials" fetchpriority="high">` : ""}
 <style>
 html,body{margin:0;width:100%;height:100%;background:#050505;color:#f7f7f7}
 body{overflow:hidden}
@@ -328,6 +363,9 @@ export async function GET(
     request,
     normalizedAssetId,
   );
+  const ready = bootstrap?.status === "ready" ? bootstrap : null;
+  const selection = playbackSelection(bootstrap, startup);
+  const edge = playbackOrigin(ready);
   const headers = new Headers({
     "cache-control": "no-store",
     "content-type": "text/html; charset=utf-8",
@@ -340,6 +378,7 @@ export async function GET(
       headers.append("set-cookie", setCookie);
     }
   }
+  appendStartupLinkHeaders(headers, edge, selection);
 
   return new Response(
     renderFastEmbedHtml({

apps/site/app/embed-fast/route.test.mts

@@ -72,6 +72,7 @@ test("fast embed defaults to progressive fMP4 when startup hints support it", ()
   });
 
   assert.match(html, /src="https:\/\/api\.rend\.so\/v\/00000000-0000-0000-0000-000000000001\/hls\/360p\/progressive\.mp4"/);
+  assert.match(html, /rel="preload" as="video" href="https:\/\/api\.rend\.so\/v\/00000000-0000-0000-0000-000000000001\/hls\/360p\/progressive\.mp4" type="video\/mp4" crossorigin="use-credentials" fetchpriority="high"/);
   assert.match(html, /data-rend-player-selected="progressive_mp4"/);
   assert.match(html, /data-rend-player-artifact="hls\/360p\/progressive\.mp4"/);
   assert.doesNotMatch(html, /playback_token|set-cookie|authorization/i);
@@ -113,6 +114,9 @@ test("fast embed route forwards bootstrap cookies to the document response", asy
     assert.equal(response.status, 200);
     assert.equal(response.headers.get("cache-control"), "no-store");
     assert.equal(response.headers.get("x-rend-fast-embed"), "1");
+    assert.match(response.headers.get("link") ?? "", /rel=preconnect/);
+    assert.match(response.headers.get("link") ?? "", /hls\/360p\/progressive\.mp4/);
+    assert.match(response.headers.get("link") ?? "", /rel=preload; as=video/);
     assert.match(response.headers.get("set-cookie") ?? "", /__rend_playback=/);
     assert.equal(
       fetches[0]?.url,

scripts/run-daytona-provider-benchmark.mjs

@@ -303,7 +303,9 @@ function daytonaApiKeyForTarget(env, target) {
 function rendAssetIdFromUrl(rawUrl) {
   try {
     const pathParts = new URL(rawUrl).pathname.split("/").filter(Boolean);
-    if (pathParts[0] !== "embed" || !pathParts[1]) return "";
+    if (!["embed", "embed-fast"].includes(pathParts[0]) || !pathParts[1]) {
+      return "";
+    }
     return decodeURIComponent(pathParts[1]);
   } catch {
     return "";