Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Client Side Media: Local poster generation during video upload #79366

@adamsilverstein

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"). It is currently only covered indirectly: the AddPoster step exists inside the GIF-to-video conversion work (#76942), but there is no dedicated coverage for posters on regular video uploads.

Proposed approach

Reuse the poster-generation step built for #76942 (assume that lands first): extract the first frame client-side and sideload it as the video attachment's poster during the normal upload pipeline.

  • Add a poster-generation step to the video upload path in @wordpress/upload-media
  • Extract the first frame in the browser (canvas / ImageDecoder / WebCodecs, same primitives as Add animated GIF to web video conversion #76942)
  • Sideload the generated poster and set it as the video block's poster attribute
  • Graceful fallback (no poster) when frame extraction is unavailable

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
  • Reuses the poster step from Add animated GIF to web video conversion #76942 rather than duplicating logic
  • Graceful fallback when the browser cannot extract a frame
  • e2e coverage

Depends on / builds atop #76942. Part of #76756.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions