30:T409,viewof options = { const form = formWithSubmit(html` `); // form.querySelector('[type="submit"]').disabled = busy || !videoFile; return form; }31: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; }32: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: [] } )33:[] 2e:{"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"},{"id":7,"value":"viewof videoFile = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"viewof inputFPS = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"maxFrameCountGuess = Math.round(duration * inputFPS)","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"outputWidth = Math.floor(options.outputScale * videoWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"outputHeight = Math.floor(options.outputScale * videoHeight)","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"options","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"html`

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

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

${previewScrub}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"md`## \\`video\\` element: frames are captured from here`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"videoEl = {\n const videoEl = html`