Make WordPress Core

Opened 9 years ago

Closed 8 years ago

Last modified 6 years ago

#30281 closed defect (bug) (fixed)

Update MediaElement to 2.16.0

Reported by: wonderboymusic's profile wonderboymusic Owned by: wonderboymusic's profile wonderboymusic
Milestone: 4.1 Priority: normal
Severity: normal Version:
Component: External Libraries Keywords: has-patch commit fixed-major
Focuses: javascript Cc:


Various updates to a13y and i18n:

Also, merges my pull request:

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

Attachments (7)

wp-4.1-monkeypatch.diff (18.9 KB) - added by wonderboymusic 9 years ago.
30281.diff (80.9 KB) - added by bradyvercher 9 years ago.
wp-4.1-monkeypatch.2.diff (20.6 KB) - added by wonderboymusic 8 years ago.
screen-shot-2014-12-15-at-2-50-09-pm.png (638.4 KB) - added by obenland 8 years ago.
helpful image
30281.2.diff (877 bytes) - added by obenland 8 years ago.
Screen Shot 2014-12-15 at 11.09.34 AM.png (58.9 KB) - added by obenland 8 years ago.
30281.3.diff (540 bytes) - added by obenland 8 years ago.
Fixes volume slider overflow

Download all attachments as: .zip

Change History (32)

#2 @nacin
9 years ago

  • Milestone changed from 4.0.1 to 4.1

#3 @ocean90
9 years ago

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

#4 @wonderboymusic
9 years ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

#5 @bradyvercher
9 years ago

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?

#6 @wonderboymusic
9 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Let's reopen this for the above

#7 @wonderboymusic
9 years ago


"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.

#8 @wonderboymusic
9 years ago

@bradyvercher - could you propose a patch here and a PR for ?

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.

#9 @wonderboymusic
9 years ago

To document how one monkey-patches MEjs:

  • Checkout the MediaElement GitHub repo:
  • 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.

#10 @wonderboymusic
9 years ago

In 30736:

Monkey-patch MediaElement to restore H264 support to Chromium.

Documented here:

See #30281.

9 years ago

#11 @bradyvercher
9 years ago

I submitted a PR upstream. I haven't had a chance to test, but hopefully it addresses this full screen problem, too:

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

#12 @DrewAPicture
8 years ago

  • Keywords reporter-feedback added

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

#13 @wonderboymusic
8 years ago

  • Keywords reporter-feedback removed

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.

#14 @wonderboymusic
8 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 30783:

Incorporate into our custom build of MediaElement 2.16.2.

Props bradyvercher.
Fixes #30281.

This ticket was mentioned in Slack in #core by obenland. View the logs.

8 years ago

#16 @obenland
8 years ago

It looks like the styles for .mejs-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.

Last edited 8 years ago by obenland (previous) (diff)

8 years ago

#17 @obenland
8 years ago

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.

#18 @obenland
8 years ago

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.

8 years ago

Fixes volume slider overflow

#19 @obenland
8 years ago

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

Tested in Chrome, FF, Safari.

#20 @wonderboymusic
8 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#21 @wonderboymusic
8 years ago

  • Keywords has-patch commit fixed-major added

#22 @wonderboymusic
8 years ago

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.

#23 @nacin
8 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#24 @afercia
6 years ago

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.

#25 @afercia
6 years ago

In 40647:

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

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

Note: See TracTickets for help on using tickets.