mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-08-31 02:41:44 +00:00
ukimsanov
592301248e
**The poster guard I added twice was unworkable and I never ran it.** It called existsSync on docs/images/catalog/<name>.png. That directory is gitignored — previews are generated locally, uploaded to the CDN and never committed — so the check is false on every clean checkout and in CI. It would have stripped the poster from all 168 pages, not the 13 with a missing file. It also referenced REPO_ROOT, which does not exist in that file, so the script crashed on the first item. I described this guard in two commit messages without once executing the generator. The poster is now gone entirely, which is the smaller and more honest fix. These previews are autoPlay muted loop, so the poster is visible for a few hundred milliseconds; 13 of the 168 files do not exist and the browser fetches the poster before the video. Removing the attribute kills 13 x 403 and 168 needless image requests, and there is nothing to keep in sync. Also applied a complexity pass to the delivery encode: - hasAudio() deleted. 17 lines and a spawnSync per item to choose between "-c:a aac" and "-an". ffmpeg ignores -c:a when the input has no audio stream; checked, exit 0, output carries no audio track. - The 40-line spawn + Promise wrapper is execFileSync. Everything around it in that script is already synchronous. - The duplicated poster lookup is gone with the poster itself. Net 76 lines lighter. Generator runs clean, emits 168 pages, carry-forward intact.
99 lines
3.5 KiB
Plaintext
99 lines
3.5 KiB
Plaintext
---
|
||
title: "Use images and video"
|
||
sidebarTitle: "Images and video"
|
||
description: "Import, place, replace, trim, and review images and footage in a HyperFrames project."
|
||
---
|
||
|
||
import { DocsVideo } from "/snippets/docs-video.jsx";
|
||
|
||
Images and footage should enter the project once, remain easy to identify, and
|
||
behave the same in preview and the final render.
|
||
|
||
|
||
<DocsVideo
|
||
title="The five basic moves: import, place, crop, trim, and swap the source"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-basics-demo-v1.mp4"
|
||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-basics-demo-v1.jpg"
|
||
/>
|
||
|
||
Each step adds one attribute and shows the result. The last swaps the source
|
||
file; the crop, timing and placement around it stay exactly as they were.
|
||
|
||
## Import a file
|
||
|
||
In Studio:
|
||
|
||
1. Open **Assets**.
|
||
2. Choose **Import media**, or drop the file into the panel.
|
||
3. Preview it.
|
||
4. Drag it to the timeline.
|
||
|
||
Studio accepts common image formats, SVG, MP4, WebM, and MOV. Keep the source
|
||
inside the project before the final render.
|
||
|
||
## Place it deliberately
|
||
|
||
- Set the start and duration by watching the surrounding edit.
|
||
- Choose a crop that preserves the important content.
|
||
- Keep source audio only when it belongs in the mix.
|
||
- Avoid stretching low-resolution media beyond what it can support.
|
||
- Use a wrapper when animating the size or position of video; this keeps frame capture reliable.
|
||
|
||
For a source-level change, ask the agent in terms of the visible result:
|
||
|
||
```text
|
||
Use assets/product-tour.mp4 from 00:04 to 00:10.
|
||
Crop around the editor canvas, keep the source muted, and place it beneath
|
||
the existing caption layer.
|
||
```
|
||
|
||
## Change or replace the source
|
||
|
||
Studio’s Media section shows the current project path and controls Fit,
|
||
Position, playback, and audio. Assets imports files and adds new layers. It does
|
||
not currently provide a one-click source replacement in that Inspector.
|
||
|
||
To keep the existing layer, ask the agent to change its `src`, or edit the
|
||
element in Source. Then recheck the crop, clip length, transition, and any
|
||
motion tied to the old dimensions.
|
||
|
||
Replacing a file should not require rebuilding the whole scene. If the new
|
||
content also changes the story or several scenes, ask the agent to make the
|
||
broader revision.
|
||
|
||
## Avoid fragile sources
|
||
|
||
Temporary signed URLs, private browser sessions, and render-time network
|
||
requests can disappear or fail in another environment. Copy required media into
|
||
the project, keep filenames stable, and run `npx hyperframes check` before
|
||
rendering.
|
||
|
||
Continue to [Use Assets and Catalog](/studio/assets-and-blocks) for the Studio
|
||
controls, or [Media effects](/guides/media-effects) when the source needs a
|
||
non-destructive visual treatment.
|
||
|
||
## The same edits in Studio
|
||
|
||
Everything above is done by editing attributes by hand. Studio writes the
|
||
same attributes when you drag, trim or reframe — it is the other way into
|
||
one file, not a second copy of the project.
|
||
|
||
<Frame caption="Current Studio, changing the real project: inspect the source, change Fit and Position, crop on the canvas, then import another local asset.">
|
||
<video
|
||
autoPlay
|
||
loop
|
||
muted
|
||
playsInline
|
||
preload="metadata"
|
||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-media-edit-loop-v1.jpg"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-media-edit-loop-v4.mp4"
|
||
/>
|
||
</Frame>
|
||
|
||
|
||
## Related topics
|
||
|
||
- [Use Assets and Catalog in Studio](/studio/assets-and-blocks)
|
||
- [Apply a media effect](/guides/media-effects)
|
||
- [Remove a human background](/guides/remove-background)
|