{"record":{"id":"f51c19b6bf2d2795","repo":"remotion-dev/remotion","slug":"html5video-is-not-supported-in-remotion-web-ren","errorCode":null,"errorMessage":"<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations","messagePattern":"<Html5Video> 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/html5-video.tsx","lineNumber":52,"sourceCode":"\t\tendAt,\n\t\ttrimBefore,\n\t\ttrimAfter,\n\t\tname,\n\t\tpauseWhenBuffering,\n\t\t_remotionInternalStack,\n\t\t_remotionInternalNativeLoopPassed,\n\t\tshowInTimeline,\n\t\tonAutoPlayError,\n\t\tonVideoFrame,\n\t\t...otherProps\n\t} = props;\n\tconst {loop, ...propsOtherThanLoop} = props;\n\tconst {fps} = useVideoConfig();\n\tconst environment = useRemotionEnvironment();\n\tconst shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);\n\n\tif (environment.isClientSideRendering) {\n\t\tthrow new Error(\n\t\t\t'<Html5Video> 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 {durations, setDurations} = useContext(DurationsContext);\n\n\tif (typeof ref === 'string') {\n\t\tthrow new Error('string refs are not supported');\n\t}\n\n\tif (typeof props.src !== 'string') {\n\t\tthrow new TypeError(\n\t\t\t`The \\`<Html5Video>\\` 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","sourceCodeStart":34,"sourceCodeEnd":70,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/video/html5-video.tsx#L34-L70","documentation":"Thrown at the top of the Html5Video forwarding function when `useRemotionEnvironment().isClientSideRendering` is true. Remotion's client-side-rendering target (@remotion/web-renderer) does not support the native <Html5Video> tag, because CSR plays media live rather than frame-accurately. The message directs users to <Video> from @remotion/media, the CSR-compatible video component. This is part of the v5 package split.","triggerScenarios":"Mounting <Html5Video> (or <Video> that resolves to Html5Video under the hood) inside a composition that is being rendered or previewed in a client-side-rendering environment where `getRemotionEnvironment().isClientSideRendering === true`. This happens when the app is built with @remotion/web-renderer and the rendering path hits the Html5Video component body.","commonSituations":"Migrating a server-rendered Remotion app to the v5 @remotion/web-renderer CSR pipeline without swapping the video component; importing Html5Video directly in a composition that runs in the browser-only render target; mixing @remotion/core video primitives with a CSR configuration.","solutions":["Replace <Html5Video> with <Video> imported from @remotion/media when targeting client-side rendering.","If you need server-side rendering (Studio, Lambda, CLI render), keep the environment as SSR so Html5Video is permitted.","Audit imports: ensure components that embed video are not loaded into a CSR build of the app."],"exampleFix":"// before (in a client-side-rendering app)\nimport {Html5Video} from '@remotion/core';\n\n// after\nimport {Video} from '@remotion/media';","handlingStrategy":"type-guard","validationCode":"import {getRemotionEnvironment} from 'remotion';\n\nif (getRemotionEnvironment().isClientSideRendering) {\n  // do NOT render <Html5Video> here\n}","typeGuard":"import {getRemotionEnvironment} from 'remotion';\n\nconst allowsHtml5Video = (): boolean =>\n  !getRemotionEnvironment().isClientSideRendering;","tryCatchPattern":null,"preventionTips":["In CSR apps, import <Video> from @remotion/media, never Html5Video from @remotion/core.","Gate component choice on getRemotionEnvironment().isClientSideRendering.","Keep CSR and SSR compositions in separate files to avoid accidental cross-imports."],"tags":["video","client-side-rendering","v5","web-renderer"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}