Embed block doesn't use MediaElement.js

[Lewiscowles1986]

Issue Overview

Video widget seems to differ from traditional insert of video from media library. Does not use video shortcode and does not use mediaElement.js as far as I can tell.

Steps to Reproduce (for bugs)

1. Upload video to media
2. Add via traditional UI
3. Activate Gutenberg
4. Edit Post / Page & Convert to blocks. (Instantly destroys preview. Unsure why)
5. Add video block.

• Chrome Version 64.0.3282.140 (Official Build) (64-bit) on Xenial 64-bit (all updates applied).
• WP 4.9.4
• Gutenberg 2.1.0

Expected Behavior

• I feel like this should use mediaElement.js
• I feel like the video shortcode should display it's UI, or a warning that no UI will show.

Current Behavior

• In WYSIWYG shows the video in both WP classic & Gutenberg.
• After converting to blocks, does not.
• Using video block doesn't seem to use any core WP

Possible Solution

I don't know. Parity with existing video media seems reasonable, but maybe there are things I don't know.

Screenshots / Video

Related Issues and/or PRs

N/A

Todos

• Tests
• Documentation

[bph]

maybe this is also related #4842

[youknowriad]

This just uses the HTML5 video tag. Any reason using mediaElement is better than using a standard?
Maybe it was a browser issue initially but it seems that the browsers supported by WordPress do support the video element?

[Lewiscowles1986]

I use it to add speed buttons for .5x, 1x, 1.5x, 2x speeds, which rely on a html5 <video> tag, but also the mediaElement library and way of stylizing UI.

As for WP itself using mediaElement.js IDK. I do know that they recently bumped versions rather than choosing to remove it.

[Lewiscowles1986]

Oh https://wordpress.org/support/topic/a-godsend-6/ got a review on my plugin (first public plugin review)

If this isn't supported I will have to make a separate plugin (because it's not right to enforce in the existing) to bring mediaElement.js to Gutenberg as a block for video's so that this user can continue to be happy with my plugin 😉.

If I have to do that, I'll probably deactivate the existing blocks so there is not confusion around "which is the right block", which seems an unnecessary thing to have to document.

[Lewiscowles1986]

Another reason to use it is that it aims to present a consistent UI across browsers. Separating from them would be an indication that is not a design goal, or that duplicated efforts have been chosen.

There is feedback from a user of my media-playback-speed plugin (not perfect). They are using media-element.js with a niche plugin to allow playback speed to alter, enabling students to adjust from beginner, to proficient. (not my design work, and I know it's audio not video btw)

[youknowriad]

There is work being done in #805 to bring mediaelement to Gutenberg. I believe this should be done as a followup PR to these changes.

[anthonyburchell]

I've created an issue in #5240 to track my PR for the mediaelement component. We can make that a separate PR so we at least expose the library and component to be used for video/audio and block developers. I'm happy to update the audio/video blocks after that to have the album art time and all-around styling where appropriate as is mocked up above. :D excited to get these things working!

[Lewiscowles1986]

@anthonyburchell please see my comments on that issue. There may be other reasons to add a mediaelement component, but #4710 does seem like some of the work being done could benefit both this and other efforts (another plugin I have 😏) without too much JS or frontend engineering

[Diko-Jelev]

Any update here?

I wonder how there's no update on this vital feature. By vital I mean video thumbnail generation from both local and video websites that could be easily passed to the social share buttons...

What is the status?

The best solution is either of a usage of a third party videoplayers which makes no sense anymore or (used to be) a WP plugin (video thumbnails) not updated in the last 3 years. And having in mind that Gutenberg is not from yesterday.... Let us even not mention WP...

Sooooo. Please, please please. what is the status of this bug...feature?

[Lewiscowles1986]

@wetfirer there is a plugin you can use to preserve shortcode functionality https://wordpress.org/plugins/cd2-gutenberg-shortcode-preview-block/

So long as WP keeps their shortcodes supported (interim solution), and keeps Gutenberg version stable this will work with other mediaElement / traditional media plugins, providing the visual nature of Gutenberg, with familiar controls

I use it along with https://wordpress.org/plugins/media-playback-speed/, a plugin which I re-wrote and published to the plugin directory.

[paaljoachim]

Checking in.
If someone could give a status update to where this issue is at right now that would be helpful.

@ntsekouras Nik I think you might want to know about this issue.

[mtias]

Browser players have come a long way since mediaElement was needed that we should not be forcing any specific player layer on top and leave that open to plugins / user-land (picture-in-picture, external display support, etc).