{"record":{"id":"fab1c0f591fed40b","repo":"remotion-dev/remotion","slug":"the-browser-threw-an-error-while-playing-the-video-fab1c0","errorCode":null,"errorMessage":"The browser threw an error while playing the video","messagePattern":"The browser threw an error while playing the video","errorType":"exception","errorClass":"MediaPlaybackError","httpStatus":null,"severity":"error","filePath":"packages/core/src/video/VideoForPreview.tsx","lineNumber":280,"sourceCode":"\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 ${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: src as string,\n\t\t\t\t});\n\t\t\t} else {\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\tconst err = new MediaPlaybackError({\n\t\t\t\t\t\tmessage: `The browser threw an error while playing the video ${src}`,\n\t\t\t\t\t\tsrc: src as string,\n\t\t\t\t\t});\n\t\t\t\t\tonError(err);\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',\n\t\t\t\t\tsrc: 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\t\treturn () => {\n\t\t\tcurrent.removeEventListener('error', errorHandler);\n\t\t};\n\t}, [onError, src]);\n\n\tconst currentOnDurationCallback =\n\t\tuseRef<VideoForPreviewProps['onDuration']>(onDuration);\n\tcurrentOnDurationCallback.current = onDuration;\n\n\tuseEmitVideoFrame({ref: videoRef, onVideoFrame});\n","sourceCodeStart":262,"sourceCodeEnd":298,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/video/VideoForPreview.tsx#L262-L298","documentation":"Same handler as the detailed variant, but fires when the `<video>` element emitted an `error` event with no `current.error` object populated and no caller `onError` is supplied. Remotion still throws a `MediaPlaybackError` so the failure surfaces, but without a code/message.","triggerScenarios":"The browser fires an error event on the video tag but does not populate `HTMLMediaElement.error` (rare browser quirk or aborted playback), and the caller did not pass `onError`.","commonSituations":"Browser-specific error quirks, autoplay being blocked before metadata loads, or rapidly switching `src` while a previous load is in flight.","solutions":["Always pass an `onError` prop to `<Video>` to capture these events.","Ensure autoplay policies are satisfied (`muted`, `playsInline`) so the browser doesn't abort playback.","Avoid rapidly swapping `src`; key the component by URL."],"exampleFix":"// before\n<Video src={url} />\n// after\n<Video src={url} muted playsInline onError={(err) => handleError(err)} />","handlingStrategy":"try-catch","validationCode":"// Satisfy autoplay policies\nconst isAutoplaySafe = (el: HTMLVideoElement) => el.muted && el.playsInline;","typeGuard":null,"tryCatchPattern":"<Video\n  muted\n  playsInline\n  src={url}\n  onError={(err) => handleVideoError(err)}\n/>","preventionTips":["Always supply `onError` so undocumented error events don't crash playback.","Set `muted` and `playsInline` to avoid autoplay-policy aborts.","Key `<Video>` by `src` to avoid mid-load src swaps."],"tags":["video","media-playback","runtime","browser"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}