{"record":{"id":"5e8ba749b5a9cf6b","repo":"remotion-dev/remotion","slug":"offthreadvideo-is-not-supported-in-remotion-web","errorCode":null,"errorMessage":"<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations","messagePattern":"<OffthreadVideo> is not supported in @remotion/web-renderer\\. Use <Video> from @remotion/media instead\\. See https://remotion\\.dev/docs/client-side-rendering/limitations","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/video/OffthreadVideo.tsx","lineNumber":38,"sourceCode":") => {\n\t// Should only destruct `startFrom` and `endAt` from props,\n\t// rest gets drilled down\n\tconst {\n\t\tstartFrom,\n\t\tendAt,\n\t\ttrimBefore,\n\t\ttrimAfter,\n\t\tname,\n\t\tpauseWhenBuffering,\n\t\t_remotionInternalStack,\n\t\tshowInTimeline,\n\t\t...otherProps\n\t} = props;\n\tconst environment = useRemotionEnvironment();\n\tconst shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);\n\n\tif (environment.isClientSideRendering) {\n\t\tthrow new Error(\n\t\t\t'<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations',\n\t\t);\n\t}\n\n\tconst onDuration = useCallback(() => undefined, []);\n\n\tif (typeof props.src !== 'string') {\n\t\tthrow new TypeError(\n\t\t\t`The \\`<OffthreadVideo>\\` tag requires a string for \\`src\\`, but got ${JSON.stringify(\n\t\t\t\tprops.src,\n\t\t\t)} instead.`,\n\t\t);\n\t}\n\n\tvalidateMediaTrimProps({startFrom, endAt, trimBefore, trimAfter});\n\n\tconst {trimBeforeValue, trimAfterValue} = resolveTrimProps({\n\t\tstartFrom,","sourceCodeStart":20,"sourceCodeEnd":56,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/video/OffthreadVideo.tsx#L20-L56","documentation":"`<OffthreadVideo>` relies on server-side frame extraction (it pulls still frames from a media URL via the Remotion server). This is not available in `@remotion/web-renderer` (client-side rendering), so the component hard-throws when `useRemotionEnvironment().isClientSideRendering` is true.","triggerScenarios":"Using `<OffthreadVideo>` in a project where Remotion is configured for client-side rendering (`@remotion/web-renderer` / Player in CSR mode), or shipping a composition built for SSR rendering into a CSR runtime.","commonSituations":"Switching a project from server rendering to client-side rendering (Player), or migrating a composition that used `<OffthreadVideo>` into a Player-based app without swapping the video component.","solutions":["Replace `<OffthreadVideo>` with `<Video>` from `@remotion/media` when running client-side.","Keep `<OffthreadVideo>` only in compositions rendered via the server/CLI/Lambda pipeline.","Confirm your runtime environment: check `useRemotionEnvironment().isClientSideRendering`."],"exampleFix":"// before\nimport {OffthreadVideo} from 'remotion';\n<OffthreadVideo src={url} />\n// after (client-side rendering)\nimport {Video} from '@remotion/media';\n<Video src={url} />","handlingStrategy":"type-guard","validationCode":"import {useRemotionEnvironment} from 'remotion';\nconst env = useRemotionEnvironment();\nif (env.isClientSideRendering) {\n  // render <Video> from @remotion/media instead\n}","typeGuard":"const isCSR = () => useRemotionEnvironment().isClientSideRendering;","tryCatchPattern":null,"preventionTips":["Audit for `<OffthreadVideo>` usages when migrating to client-side rendering.","Keep separate composition sets for SSR vs CSR pipelines.","Document which compositions are render-only."],"tags":["offthreadvideo","client-side-rendering","web-renderer","environment"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}