{"record":{"id":"ec4c0c245a6d3347","repo":"remotion-dev/remotion","slug":"the-browser-threw-an-error-while-playing-the-video-ec4c0c","errorCode":null,"errorMessage":"The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.","messagePattern":"The browser threw an error while playing the video (.+?): Code (.+?) - (.+?)\\. See https://remotion\\.dev/docs/media-playback-error for help\\. Pass an onError\\(\\) prop to handle the error\\.","errorType":"exception","errorClass":"MediaPlaybackError","httpStatus":null,"severity":"error","filePath":"packages/core/src/video/VideoForRendering.tsx","lineNumber":234,"sourceCode":"\t\t});\n\n\t\tseek.prom.then(() => {\n\t\t\tcontinueRender(handle);\n\t\t});\n\n\t\tcurrent.addEventListener('ended', endedHandler, {once: true});\n\n\t\tconst errorHandler = () => {\n\t\t\tif (current?.error) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('Error occurred in video', current?.error);\n\n\t\t\t\t// If user is handling the error, we don't cause an unhandled exception\n\t\t\t\tif (onError) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthrow new MediaPlaybackError({\n\t\t\t\t\tmessage: `The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`,\n\t\t\t\t\tsrc: props.src as string,\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tthrow new MediaPlaybackError({\n\t\t\t\t\tmessage: 'The browser threw an error',\n\t\t\t\t\tsrc: props.src as string,\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tcurrent.addEventListener('error', errorHandler, {once: true});\n\n\t\t// If video skips to another frame or unmounts, we clear the created handle\n\t\treturn () => {\n\t\t\tseek.cancel();\n\t\t\tcurrent.removeEventListener('ended', endedHandler);\n\t\t\tcurrent.removeEventListener('error', errorHandler);","sourceCodeStart":216,"sourceCodeEnd":252,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/video/VideoForRendering.tsx#L216-L252","documentation":"In the server-render path of `<Video>`, when the underlying video element emits an `error` event with a populated `current.error` and the caller did not supply `onError`, Remotion throws a `MediaPlaybackError` with the browser code, message, the offending `src`, and a docs link.","triggerScenarios":"Server-rendering a composition that contains `<Video>` whose asset fails to load or decode in the headless Chrome used by the renderer, with no `onError` handler on the component.","commonSituations":"Codec unsupported by the render Chrome (e.g. HEVC, ProRes), inaccessible URL from the render host, large asset failing on slow disk, or non-faststart MP4 forcing the renderer to time out and emit an error.","solutions":["Add an `onError` prop to `<Video>` so the render can capture the failure.","Re-encode the asset to faststart H.264 MP4 with AAC audio.","Ensure the asset URL is reachable from the render environment (Lambda, Docker, etc.).","Increase `delayRenderTimeoutInMilliseconds` if the asset is large but loadable."],"exampleFix":"// before\n<Video src={url} />\n// after\n<Video src={url} onError={(err) => console.error(err)} delayRenderTimeoutInMilliseconds={30000} />","handlingStrategy":"try-catch","validationCode":"// Pre-validate asset reachability from the render host\nconst res = await fetch(src, {method: 'HEAD'});\nif (!res.ok) throw new Error(`Asset unreachable from render host: ${res.status}`);","typeGuard":"const isFaststartMp4 = async (url: string): Promise<boolean> => { /* probe moov atom position */ return true; };","tryCatchPattern":"<Video\n  src={url}\n  delayRenderTimeoutInMilliseconds={30000}\n  onError={(err) => {\n    // capture but don't abort the render\n    logRenderError(err);\n  }}\n/>","preventionTips":["Always pass `onError` to `<Video>` in renderable compositions.","Encode source assets as faststart H.264 MP4 with AAC audio.","Verify asset URLs are reachable from Lambda/Docker render hosts.","Raise `delayRenderTimeoutInMilliseconds` for large assets."],"tags":["video","rendering","media-playback","codec","network","lambda"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}