{"record":{"id":"308c75d4953569e7","repo":"remotion-dev/remotion","slug":"video-frame-has-not-loaded","errorCode":null,"errorMessage":"Video frame has not loaded","messagePattern":"Video frame has not loaded","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/studio/src/components/Timeline/get-sequence-context-menu-items.ts","lineNumber":89,"sourceCode":"\t} else if (element.tagName === 'IMG') {\n\t\tconst image = element as HTMLImageElement;\n\t\tif (image.naturalWidth === 0 || image.naturalHeight === 0) {\n\t\t\tthrow new Error('Image has not loaded');\n\t\t}\n\n\t\tcanvas = document.createElement('canvas');\n\t\tcanvas.width = image.naturalWidth;\n\t\tcanvas.height = image.naturalHeight;\n\t\tconst context = canvas.getContext('2d');\n\t\tif (!context) {\n\t\t\tthrow new Error('Could not create canvas context');\n\t\t}\n\n\t\tcontext.drawImage(image, 0, 0);\n\t} else if (element.tagName === 'VIDEO') {\n\t\tconst video = element as HTMLVideoElement;\n\t\tif (video.videoWidth === 0 || video.videoHeight === 0) {\n\t\t\tthrow new Error('Video frame has not loaded');\n\t\t}\n\n\t\tcanvas = document.createElement('canvas');\n\t\tcanvas.width = video.videoWidth;\n\t\tcanvas.height = video.videoHeight;\n\t\tconst context = canvas.getContext('2d');\n\t\tif (!context) {\n\t\t\tthrow new Error('Could not create canvas context');\n\t\t}\n\n\t\tcontext.drawImage(video, 0, 0);\n\t} else {\n\t\tthrow new Error('Expected an image, video, or canvas element');\n\t}\n\n\tconst blob = new Promise<Blob>((resolve, reject) => {\n\t\tcanvas.toBlob((result) => {\n\t\t\tif (result) {","sourceCodeStart":71,"sourceCodeEnd":107,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/studio/src/components/Timeline/get-sequence-context-menu-items.ts#L71-L107","documentation":"copyImageToClipboard draws the timeline thumbnail element into a canvas so it can be copied to the clipboard. For <video> elements it uses videoWidth/videoHeight as the canvas size; if the video has no decoded frame yet, both are 0 and drawing would fail, so the library throws this error upfront.","triggerScenarios":"Right-clicking 'Copy image to clipboard' on a Timeline/Sequence thumbnail whose <video> element has not finished loading or decoding any frame (videoWidth === 0 || videoHeight === 0).","commonSituations":"Copying a video element immediately after page load or seek before metadata/first frame is ready; slow network so the video has not buffered; a broken or unsupported video source so the frame never loads.","solutions":["Wait for the video element's loadeddata/loadedmetadata (or seeked) event before copying.","Check video.readyState >= 2 (HAVE_CURRENT_DATA) and videoWidth > 0 before invoking the copy action.","Retry the copy after a short delay or after scrubbing the timeline to force frame decode.","If the source is broken, fix the video URL/source so a frame can load."],"exampleFix":"// before\nawait copyImageToClipboard(videoEl); // may throw\n// after\nif (videoEl.readyState < 2 || videoEl.videoWidth === 0) {\n  await new Promise((r) => videoEl.addEventListener('loadeddata', r, {once: true}));\n}\nawait copyImageToClipboard(videoEl);","handlingStrategy":"validation","validationCode":"function canCopyVideoFrame(v) {\n  return v instanceof HTMLVideoElement && v.readyState >= 2 && v.videoWidth > 0 && v.videoHeight > 0;\n}","typeGuard":"const isVideoWithFrame = (el: Element): el is HTMLVideoElement =>\n  el instanceof HTMLVideoElement && el.videoWidth > 0 && el.videoHeight > 0;","tryCatchPattern":"try {\n  await copyImageToClipboard(el);\n} catch (err) {\n  if (err.message === 'Video frame has not loaded') {\n    // retry after loadeddata or show a 'frame not ready' toast\n  }\n}","preventionTips":["Check video.readyState >= 2 before copy actions","Listen for loadeddata/seeked before enabling the copy menu item","Handle broken sources by verifying the video loads at all"],"tags":["canvas","clipboard","video"],"backgroundTag":"invalid-state-transition","analyzedSha":"46a3a6bf13ca367376ff18bbb06dae2e87e0d068","analyzedAt":"2026-09-18T00:12:20.256Z","contentChangedAt":"2026-09-18T00:12:20.256Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}