Support of poster image for video block is missing

[benoitchantre]

At the moment, there's no option to set the cover poster image for a video.

Tested with Gutenberg 2.1

[karmatosed]

For now, lets close this as the cover image block stands on it's own. If we were going to add video we would probably have another cover video block. I don't think though that's something we're considering right now for version one. It could be an awesome plugin block though for someone to make.

[benoitchantre]

@karmatosed I realize my wording was wrong. I wanted to say the Poster Image is missing. Here's a screenshot taken when Gutenberg is disabled.

When Gutenberg is enabled, this feature is missing.

[karmatosed]

Ah! Thanks for the clarification.

[SergioEstevao]

This will also be great to support this because of the mobile apps, WordPress iOS editor uses the poster image to represent the video in the editor. This allows us to show something to the users without waiting to get a frame from the video source.

[gziolo]

@jorgefilipecosta or @danielbachhuber, any hints on how to get the poster image from the media object after the upload is done? I'd like to help get it solved as this is one of the last blockers to have WordPress mobile apps to work with Gutenberg without those annoying compatibility issues.

[SergioEstevao]

@gziolo so if you are using VideoPress (trough Jetpack) you can query the VideoPress API and get an thumbnail URL to use.

On WordPress.org I don't know if there is any standard mechanism to get a thumbnail.

Meanwhile I also pushed a PR on Aztec to allow to display videos correctly even when a poster image is not defined.

[gziolo]

Initially, maybe all we need is just an attribute which is able to recognize this poster so it wouldn't break if you open it on mobile and then back on the web. I think it needs to work both ways.

[danielbachhuber]

@gziolo To clarify existing behavior, the WordPress Classic Editor inserts a [video] shortcode for videos:

[video width="1280" height="720" mp4="http://wordpress-develop.test/wp-content/uploads/2018/06/SampleVideo_1280x720_1mb.mp4"][/video]

Once the shortcode is within the post, there's an Edit icon you can use to get to the poster image screen:

The poster image is only stored as an attribute on the shortcode, not within the database:

Gutenberg will need to support <video poster="#"> and have some UI for setting the attribute value.

Hope this helps clarify.

Related #7501

[jorgefilipecosta]

Sorry @gziolo I missed your ping.

I think in Gutenberg the best way to have a poster image is a button on the video block toolbar that allows selecting one from the media gallery plus an inspector UI that allows previewing it or even drag & drop a post image.
The poster image should just be an attribute of the video block.

As @danielbachhuber referred poster image is just a property of the shortcode where it is used it is not stored in the database and the same video may have different poster images in different places.