43:null 44:["$","title",null,{"children":"Video to Lottie | Forrest O. | Observable"}] 4a:T409,viewof options = { const form = formWithSubmit(html` `); // form.querySelector('[type="submit"]').disabled = busy || !videoFile; return form; }4b:T489,async function extractFrames({ videoEl, clipStart, clipEnd, numFrames, quality = 0.8, outputScale = 1 }) { // if (busy) { // throw new Error('Already encoding, wait a moment...'); // } // mutable busy = true; videoEl.pause(); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const outputWidth = outputScale * videoEl.videoWidth; const outputHeight = outputScale * videoEl.videoHeight; canvas.width = outputWidth; canvas.height = outputHeight; const frames = []; for (let i = 0; i < numFrames; i++) { const duration = clipEnd - clipStart; if (duration <= 0) { throw new Error('clipEnd is before clipStart'); } const time = i * (duration / (Math.max(2, numFrames) - 1)) + clipStart; // In threory, waits until seeked time is in view const seekedTime = await seekTo(videoEl, time); context.drawImage(videoEl, 0, 0, outputWidth, outputHeight); frames.push({ time, seekedTime, data: canvas.toDataURL('image/jpeg', quality) }); mutable progress = (i + 1) / numFrames; } // mutable busy = false; return frames; }4c:T40b,lottieJson = frames.reduce( function(lottie, frame, index) { const id = "fr_" + index; const w = outputWidth; const w2 = Math.floor(w / 2); const h = outputHeight; const h2 = Math.floor(h / 2); lottie.assets.push({ id, w, h, u: "", p: frame.data, e: 1 }); lottie.layers.push({ ddd: 0, ind: index + 1, ty: 2, nm: id + ".jpg", cl: "jpg", refId: id, sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 0, k: 0, ix: 10 }, p: { a: 0, k: [w2, h2, 0], ix: 2 }, a: { a: 0, k: [w2, h2, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 } }, ao: 0, ip: index, op: index + 1, st: index, bm: 0 }); return lottie; }, { v: "5.5.2", fr: outputFrameRate, ip: 0, op: options.numFrames, w: outputWidth, h: outputHeight, nm: "@forresto/movie-to-lottie", ddd: 0, assets: [], layers: [], markers: [] } )4d:[] 48:{"id":"1cc9ae3611f6886a","slug":"video-to-lottie","title":"Video to Lottie","thumbnail":"7dd29bc140b935277f12b84722ce8eec93f75037774c1c73be22dded4d741433","access_level":"public","create_time":"$D2019-10-30T23:05:24.833Z","update_time":"$D2021-11-04T10:13:10.283Z","view_time":null,"first_public_time":"$D2019-10-30T23:05:31.357Z","has_unpublished_edits":null,"fork":true,"stars":34,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024","bio":"open web tools for creativity and community","following":false},"version":497,"publish_version":497,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"bio":"open web tools for creativity and community","following":false}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[{"id":"a0d34d6ab56b1c88","reply_to_id":null,"content":"Lottie","create_time":"$D2025-01-06T19:11:03.605Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"08899258ac76875e","login":"fathy-reda-fathy","name":"Fathy Reda fathy","avatar_url":"https://avatars-next.observableusercontent.com/45d29d9db49539a3c8b9ba1450d93f3fd29ed5932c49e02e3dbb4fc292fb5b69","tier":null}},{"id":"476770f68eb32e3f","reply_to_id":null,"content":"Lottie","create_time":"$D2025-01-06T19:11:18.331Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"08899258ac76875e","login":"fathy-reda-fathy","name":"Fathy Reda fathy","avatar_url":"https://avatars-next.observableusercontent.com/45d29d9db49539a3c8b9ba1450d93f3fd29ed5932c49e02e3dbb4fc292fb5b69","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":282,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Video to Lottie","cells":[{"id":0,"value":"md`# Video to Lottie\n\nLocal movie.mp4 to lottie.json converter. Adobe / After Effects optional!\n\nProbably only good for very short clips, that you want to make scrubbable.\n\nDon't make people dowload a 5 MB .lottie.json file when they visit your site!\n\nChoose your web-happy video file here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof videoFile = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"viewof inputFPS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"maxFrameCountGuess = Math.round(duration * inputFPS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"outputWidth = Math.floor(options.outputScale * videoWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"outputHeight = Math.floor(options.outputScale * videoHeight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"options","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"html`

${Math.floor(progress * 100)}%

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md`After frames are captured, lottie.json download link will show here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"outputLink.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`## Lottie preview of encoded frames`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"viewof previewScrub = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"previewImage = html`

${previewScrub}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md`## \\`video\\` element: frames are captured from here`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"videoEl = {\n const videoEl = html`