{"record":{"id":"50214b562ebddaff","repo":"remotion-dev/remotion","slug":"the-browser-threw-an-error-while-playing-the-video","errorCode":null,"errorMessage":"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.","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/VideoForPreview.tsx","lineNumber":265,"sourceCode":"\t\t\treturn;\n\t\t}\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\tconst err = new MediaPlaybackError({\n\t\t\t\t\t\tmessage: `Code ${current.error.code}: ${current.error.message}`,\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 ${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});","sourceCodeStart":247,"sourceCodeEnd":283,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/video/VideoForPreview.tsx#L247-L283","documentation":"When the underlying `<video>` element emits an `error` event in the preview (`<Video>`) path and no `onError` prop is supplied, Remotion re-throws a `MediaPlaybackError` containing the browser's error code and message plus a documentation link. This is the detailed variant of the error (fires when `current.error` is populated).","triggerScenarios":"The HTML5 video element fails to load or decode `src` during preview/Studio playback and no `onError` handler is provided on `<Video>`.","commonSituations":"Unsupported codec (e.g. MOV in Chrome), CORS rejection, broken URL, network drop, or a transcoded asset whose moov atom is at the end (non-faststart MP4).","solutions":["Add an `onError` prop to `<Video>` to handle the failure gracefully.","Re-encode the asset to a faststart H.264 MP4 (moov atom at the front).","Verify the URL and CORS headers from the playback environment.","Match codec to the player runtime (e.g. WebM/VP9 for Chromium-only)."],"exampleFix":"// before\n<Video src={url} />\n// after\n<Video src={url} onError={(err) => console.error('video error', err)} />","handlingStrategy":"try-catch","validationCode":"// Validate codec/URL before playback\nconst canPlay = document.createElement('video').canPlayType('video/mp4');\nif (canPlay === '') throw new Error('Codec not supported');","typeGuard":"const isPlayableCodec = (mime: string): boolean => ['probably','maybe'].includes(document.createElement('video').canPlayType(mime));","tryCatchPattern":"<Video\n  src={url}\n  onError={(err) => {\n    // log, fallback, or surface to UI\n    console.error('video playback error', err);\n  }}\n/>","preventionTips":["Always pass `onError` to `<Video>` in production apps.","Use faststart H.264 MP4 for broad browser support.","Verify CORS headers (`Access-Control-Allow-Origin`) for remote assets."],"tags":["video","media-playback","codec","network","runtime"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}