Update MediaElement to 2.16.0

[wonderboymusic]

Various updates to a13y and i18n:
​https://github.com/johndyer/mediaelement/commit/0a7916982e374f47c863388a54927d27c565d015

Also, merges my pull request:
​https://github.com/johndyer/mediaelement/pull/1337

ME.js in trunk was patched by hand by me.

[wonderboymusic]

This is happening:
​https://github.com/johndyer/mediaelement/pull/1348

[ocean90]

The PR was merged and released as 2.16.1. What's missing, Scott?

[wonderboymusic]

In 30634:

Upgrade to MediaElement 2.16.2
​https://github.com/johndyer/mediaelement/compare/2.15.1...2.16.2

Fixes #30281.

[bradyvercher]

I've ​opened an issue in the MediaElement.js repo, but there are a few changes to the HTML structure in this update that have pretty serious implications for players with custom styles. I haven't done extensive testing with the default players and themes, but did notice a horizontal scrollbar in Twenty Twelve when a basic audio shortcode was added to a page.

What's the preferred approach for tracking this? A new ticket or reopening this one?

[wonderboymusic]

Let's reopen this for the above

[wonderboymusic]

Also:

"Once again MeJS is breaking in Chromium in WP4.1 beta. Was the fix reverted?"

I will try to see what I can do upstream for this.

[wonderboymusic]

@bradyvercher - could you propose a patch here and a PR for ​https://github.com/johndyer/mediaelement/issues/1384 ?

If so, I can apply it to our build of MEjs in case John doesn't accept it in time. I will probably have to monkey-patch the Chromium issue anyways.

[wonderboymusic]

To document how one monkey-patches MEjs:

• Checkout the MediaElement GitHub repo: ​https://github.com/johndyer/mediaelement
• patch -p0 < wp-4.1-monkeypatch.diff (attached above)
• from repo root, simply run grunt noflash
• get the built files you need from local-build/

Building Flash is weird and annoying and is almost never necessary for these fidgets we do.

[wonderboymusic]

In 30736:

Monkey-patch MediaElement to restore H264 support to Chromium.

Documented here:
https://core.trac.wordpress.org/ticket/30281#comment:9

See #30281.

[bradyvercher]

I submitted a PR upstream. I haven't had a chance to test, but hopefully it addresses this full screen problem, too: ​https://github.com/johndyer/mediaelement/issues/1372

I've also attached an updated monkey-patch here.

[DrewAPicture]

What's left here? Are we waiting on upstream changes?

[wonderboymusic]

I added a new patch so we can reference the changes we made later - sidenote: oh man is their whitespace at the end of lines bad.

[wonderboymusic]

In 30783:

Incorporate ​https://github.com/johndyer/mediaelement/pull/1385 into our custom build of MediaElement 2.16.2.

Props bradyvercher.
Fixes #30281.

[obenland]

It looks like the styles for .mesj-offscreen, introduced in r30634, don't work well in very long posts. We've had a hand full reports on .com about text that they are supposed to hide, appearing further up the post.

I'd recommend using the admin's screen-reader-text styles to avoid that problem.

[obenland]

helpful image

[obenland]

We had another report come in, this one about audio controls overflowing their container. It can be seen in ​this site's footer. I'll try and see what exactly is causing it.

I also noticed, when tabbing through the controls of a media element, the controls are set to invisible, leaving you with an empty container. Once you tab back, they're set to be visible again.

[obenland]

The CSS changes were limited, so I assume that the width calculation changed on the JS side, which might be causing the overflow.
I could also reproduce the overflow in Twenty Fifteen mobile.

[obenland]

Fixes volume slider overflow

[obenland]

Added a patch for the volume overflow, ​as pointed out in this issue.

Tested in Chrome, FF, Safari.

[wonderboymusic]

Need to patch with @obenland's fixes for screen reader text and volume overflow - found on .com

[wonderboymusic]

In 30907:

In response to regressions on .com, fix MEjs styles for screen reader text and overflow on the volume slider.

Props obenland.
See #30281.

[nacin]

In [30934]:

Fix MEjs styles for screen reader text and overflow on the volume slider.

Merges [30907] to the 4.1 branch.

props obenland.
see #30281.

[afercia]

In 40642:

Media: Remove the custom styling for the MediaElementJS controls offscreen text.

This offscreen text is not meant to be revealed on focus and just acts as fallback
for assistive technologies that don't support aria-label and role="slider".
Also, revealing it on focus has proven over time to be very fragile and to cause
unexpected layout issues.

See #30281.
Fixes #40707.

[afercia]

In 40647:

Media: Clean-up some MediaElementJS CSS: no more needed after [40642].

See #40707, #32417, #39994, #39995, #30281.