Skip to content

Local poster generation during video upload #79366

Description

@adamsilverstein

What problem does this address?

When a user uploads a video, the page has no poster image to show until the video itself loads, so the video area can render blank/late and hurt perceived performance and layout stability. Generating a poster image locally from the video's first frame during upload lets pages render meaningful content before the video finishes loading.

Anne called this out for the 7.1 cycle ("local poster generation during video upload so pages can render before a video finishes loading").

Approach

The original assumption was that we could reuse the poster-generation step from the GIF-to-video work (#76942 / #78410). In practice that step runs vips on a GIF's first frame (a still-image decode) and cannot decode a real video, so there was no reusable video-frame extractor to build on. Instead, a small, dependency-free video first-frame extractor was added (the approach proven in swissspidy/media-experiments), implemented independently on trunk.

In @wordpress/upload-media:

  • A new poster-utils.ts with getPosterFromVideo() loads the video, seeks slightly past the start (to avoid an empty first frame), draws it to an OffscreenCanvas, and returns a JPEG File. No new dependencies.
  • Two new pipeline operations, AddPoster and UploadPoster. For video uploads, prepareItem queues AddPoster -> Upload -> UploadPoster:
    • addPosterForItem generates the poster (best-effort).
    • uploadPosterForItem uploads the poster as its own image attachment and pushes its URL to the block via onChange, setting the block's poster attribute. The poster upload runs independently so the video item completes immediately.
  • In @wordpress/block-library, the Video block's onSelectVideo now reads media.poster in addition to the media-library media.image.src.

Frame extraction is fully guarded: an unplayable codec, a seek timeout, or a missing canvas context results in no poster and a normal upload.

Acceptance criteria

  • Regular video uploads generate a local poster from the first frame during upload
  • Generated poster is sideloaded and applied to the video block automatically
  • Graceful fallback when the browser cannot extract a frame
  • e2e coverage

Notes

  • Rather than reusing the Add animated GIF to web video conversion #76942 poster step (not feasible, see above), a dedicated video-frame extractor was added.
  • Linking the poster as the video attachment's featured_media (so it is also exposed via the REST API / media library) is left as a follow-up: @wordpress/upload-media delegates all server I/O to injected settings callbacks and has no direct REST dependency, and the poster already persists via the block's poster attribute in post content.

Implemented in #79406. Part of #76756.

Activity

  1. changed the title [-]Client Side Media: Local poster generation during video upload[/-] [+]Local poster generation during video upload[/+] on Jun 26, 2026
  2. moved this from 🦵 Punted to 7.2 to 📋 Iteration/Tracking Issues in WordPress 7.1 Editor Taskson Jul 13, 2026
  3. adamsilverstein commented on Jul 13, 2026

    @adamsilverstein
    MemberAuthor

    Punting from 7.1.

  4. moved this from 📋 Iteration/Tracking Issues to 🦵 Punted to 7.2 in WordPress 7.1 Editor Taskson Jul 13, 2026
  5. swissspidy commented on Aug 21, 2026

    @swissspidy
    Member

    Related: #79364 (regenerate/optimize an existing video as well as its poster image)

  6. moved this from 🏗️ In Progress to 🦵 Punted to 7.3 in WordPress 7.2 Editor Taskson Oct 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions