Gutenlypso: Custom video block based on VideoPress

[rralian]

Description

Update (@mmtr)

Let's create a custom video block that uploads the files to VideoPress and display the video in a VideoPress player, so we avoid issues with the unsupported formats by the browser.

Currently, the video block in Core renders an HTML5 video player with the original uploaded file as source. This means that the video will be playable only if the format is supported by the browser.

A custom video block based on VideoPress should solve this since VideoPress converts the video to a supported format.

pafL3P-cU-p2

Note

This issue has been updated because we are not able to reproduce it as originally described. Instead, we believe that the problems are caused by uploading videos in formats not supported by the browser video player (see #29328 (comment) for more context).

Original summary

I was editing a post on a p2 (in draft form, created by a different author) and dragged a video from a my desktop into a paragraph block. It appeared to work, and I can see that the video block seems to have been created. But when I published the post, there was no video.

If I click "play" I can see it should be a working block, but there's nothing there. I opened up the media tab for that p2 and there is no corresponding video item. I have since uploaded the video separately and corrected the post, so you'll have to create your own example to confirm fix this. :-)

[alisterscott]

Confirmed this as an issue for both wp-admin and Calypso Gutenberg for a WP.com simple site.

I tested this on a Jetpack site wp-admin and it worked as expected

[vindl]

I think the reason behind this is that we don't allow video/audio uploads on a site with a free plan. Manually inserting the the video block either shows the plan upgrade nudge (Media Library) or error message (Upload), but in this case it silently fails.

I think we should at least show an error message similar to the Upload button case, or ideally a plan upgrade nudge. This will probably require some adjustments in Gutenberg core to allow for this kind of extensibility.

[alisterscott]

I think the reason behind this is that we don't allow video/audio uploads on a site with a free plan.

I was testing on a business plan simple site

[vindl]

I was testing on a business plan simple site

Thanks for confirmation. Overall in both cases I think we need to start surfacing these error messages so we can start to understand what's going on. Also, any logging output from console or failed network request would be helpful in tracking this down.

[apeatling]

Got this on a premium plan today. It might have worked, but there was no indication of status. I saw the same on the front end as Bob posted.

[apeatling]

Be sure to test this with a 100mb+ video file.

[kwight]

Be sure to test this with a 100mb+ video file.

Why is that?..

I looked at this quickly today too. On a simple business plan, everything worked and published as expected, while on a free plan, I got the preview while editing the post, but no media upload and the broken view on the front-end, with this console error:

So things seem to be doing what they should, but as @vindl said, we need helpful reporting to the user and maybe better front-end handling.

[kwight]

Further oddness; with a premium plan, I can select an already-uploaded video, which will insert fine, but can't be played (the component has a component-disabled class, but not the disabled attribute, so that might be a core Gutenberg bug). In addition, clicking the Edit (pencil) icon will just clear the video from the block, rather than linking to the video in the media gallery. Hard to see where to start with all of this.

[mmtr]

I have been investigating this and I think we have 2 different issues here.

First, as @vindl pointed out and @kwight confirmed, we were not handling the errors caused by the audio/video files restrictions on free plans, so I opened a different issue for that (#29742, solved by #29743). This only happens in Gutenlypso and only when dragging files.

Secondly, we have an issue when uploading large files as @apeatling noticed. For some reason, the API is aborting the request that creates a new media file when the file is big (40MB+), so the editor displays a black placeholder for the video block which turns into nothing playable when publishing the post. This happens in both Gutenlypso and wp-admin.

However, I'm not sure this 2nd issue is the one originally described by @rralian, since I'm not able to upload ever the file. @rralian can you confirm how did you manage to correct the post? When you say you uploaded the file separately, do you mean you did that out of the editor?

[mmtr]

After doing a deeper analysis, it seems that there is no problem with large files but with the format of the files. My confusion came because on my test I was using a small .MP4 video and a large .MOV video.

The video block renders a HTML5 video player with the original uploaded file as source. So, if you upload a file in a format which is not playable by the browser, producing the black placeholder described in the 2nd issue of my previous comment. For example, Chrome doesn't play the .MOV files, but Safari does.

This was not happening in the Classic editor because VideoPress was converting the files and we're embedding the VideoPress video compatible with all the browsers. There is also an issue in Gutenberg (WordPress/gutenberg#9457) for including the ability to upload the video in alternative formats, but the process for doing that would be manual.

So I think we should either replace the src of the video block with the converted file by VideoPress or develop a custom block which will allow us to do that, in case the video block provided by Gutenberg doesn't allow it.

[mmtr]

Forgot to mention that I get the same result when testing in a Core site.

@alisterscott can you clarify what format was the video you couldn't upload to a WP.com Simple site but you were able to do it to a Jetpack site?

[mmtr]

Related: Automattic/jetpack#8764

[vindl]

So I think we should either replace the src of the video block with the converted file by VideoPress or develop a custom block which will allow us to do that, in case the video block provided by Gutenberg doesn't allow it.

The first option sounds like a shorter one but I doubt that Video block is allowing that to be overridden. We should try that just in case, and fall back to custom block if that doesn't work out as you've suggested.

[mmtr]

Closing this after completing the 2nd phase of the VideoPress extension for the block editor: pafL3P-cU-p2

It'll be shipped as part of the Jetpack 7.1 release (#31045).