MediaElement upgrades in WordPress 4.9

MediaElement has been upgraded to 4.2.6 (see #39686), which includes many bug fixes as well as:

  • Removal of all dependencies to jQuery in code to make it more portable
  • Updated UI, using flexbox
  • Improved accessibility for player controls
  • Dropped support for older browsers (supports IE11+, Chrome, FF, Safari, Android 4+ and iOS 8+), keep in mind that ME.js applies to the front end and not just WP Admin
  • Upgraded YouTube and Vimeo renderers to use new APIs (for Vimeo, it uses now, since Froogaloop is deprecated)
  • Added support for iOS 10 and Mac OS on websites using HTTPS

With this upgrade, a couple of things must be considered:

  1. In order to create themes compatible with it, it is required to add the classPrefix: mejs- in the player configuration, since latest version of MEJS switched to BEM naming convention, so make sure it is set correctly.
  2. player.options.mode has been removed completely.
  3. Although jQuery was removed from the core package, a MediaElement migration file has been included to provide full backward compatibility between themes and development of new features.

A full list of changes in MediaElement.js is available in the project’s GitHub repository.

Props to @rafa8626 for helping write this Dev Note.

#4-9, #dev-notes, #jquery, #mediaelement

Audio / Video 2.0 – codename “Disco Fries”

Some history:

I wanted to do a Make post on my wants for Audio / Video in 3.9 to solicit feedback and spark some discussion about what the community wants / needs / doesn’t want / doesn’t need. Adding audio / video in 3.6 was a great first step, but there are some things we can do to continue to modernize Media and give our huge user base even more ways to display and manage their content. We can also make some changes that help developers navigate the new world of MediaElement.js, Backbone, and Underscore.

First Things First: New Icons

#26650 Replace media file type icons with Dashicons

There are some lingering icons in the admin that don’t look as pretty as their MP6ify’d brethren

Document the “new” Media code introduced in 3.5

In 3.5, we overhauled Media. @Koop produced some beautiful code, and a LOT of it. Raise your hand if you’ve ever dived in and tried to program against it? Raise you hand if you understand how all of it works? Me neither. As a community, we need to help each other learn what it is and what it does. Documentation will go a long way in getting us all on the same page. Do we have a documentation standard for JS? We need one. While this isn’t the easiest place to start, it is a necessary one. I would be happy to spend time on this, as I have spent many hours recently reading the code and learning how it works. The main files: media-editor.js, media-views.js, media-models.js

Support subtitles for Video

#26628 Use the content of a video shortcode when provided.

This ticket speaks for itself, and already has a patch.

Generate audio/video metadata on-demand

#26825 Add ability to generate metadata for audio / video files on-demand

Add “Playlist” and “Video Playlist” shortcodes

#26631 Add a “playlist” shortcode

Adding inline players for audio and video was a great first step. How do I add music to my site? Just upload an MP3 and drop the URL on a line by itself. Done. Or use the audio shortcode. This works most of the time, but can be a little clunky if you want to share an album of your tunes. MediaElement doesn’t “support” playlists out of the box, but MediaElement is JavaScript, and with JavaScript and little UI elbow grease, we can EASILY support playlists.

My ticket already contains a patch, but is still considered a work in progress. I think the playlist shortcode should produce markup that does the following:

  • Works out of the box with any existing theme: the HTML should be semi-bulletproof. Many of the Player libraries make heavy use of DIVs instead of items that might be overridden easily with CSS: LIs and the like.
  • Gives the developer total control if they want to write their own implementation
  • Exposes enough data to the page so the themer/dev can make their own decision regarding display of album cover, track meta, captions, etc.

My current implementation drops data onto the page for each playlist inline. A wrapper div “.wp-playlist” will have a script tag in it with type=”application/json”. I do this so that if ‘wp-playlist.js’ is unenqueue’d, the developer still has the data necessary to write their own implementation. The data is reachable in JS like so:

var data = $.parseJSON( el.find('script').html() );

My current UI for playlist is a basic one, and uses Backbone Views to render the tracklist on load and update the “current” playing track view. There are 2 camps of people when it comes to “JS on the frontend” – one who doesn’t like it (others) and one who says “who cares” (me). One of the reasons I am posting this at the beginning is so we can flesh out issues like this.

Abstract Gallery logic into “Collection” logic that Galleries, Playlists, etc can use with minimal registration code

I have already done a first pass at this in the playlist shortcode patch. It goes like this: a “gallery” is really a “collection” of attachments of type “image.” A “playlist” is really a “collection” of attachments of type “audio.” So they should extend or be instances of a “collection”-type class. Currently, the Gallery code has to be dupe’d. By abstracting this code, Gallery, Playlist, Video Playlist, + any other “collection” of media type can be registered minimally.

Other Ideas

  • In our playlist JS code, emit events that others can hook into – maybe a video playlist is: News clip, ad, news clip, ad, etc. When emitting events before / after an ad, the dev could disable next/prev buttons
  • Make a playlist embeddable on other sites via an iframe or embedded markup
  • Register an endpoint for audio / video that will expose the “embed code” via oEmbed


#audio, #backbone, #jquery, #media, #mediaelement, #underscore, #video

The release cycle for WordPress 3.6 isn’t going…

The release cycle for WordPress 3.6 isn’t going to start until January, but we can of course start to drop in some early things before then. (This worked out nicely before the start of 3.5.)

With that in mind, I have added jQuery 1.9 Beta 1 to trunk. It comes with a migration plugin for deprecated/removed features, and this migration plugin issues warnings in the console so we may fix them. Yes, we are likely to ship the migration plugin in 3.6 final; that’s why it exists. But for now, we should aim to fix anything not only outright broken in core, but also any warnings. (There are a lot of them.)

For more, see the jQuery announcement post and the WordPress core Trac ticket, #22975.

A side note: If you are using the WordPress Beta Tester plugin and wish to go back to the 3.5 branch, you can do so by changing the update stream setting from “Bleeding edge nightlies” (which is currently 3.6-alpha) to “Point release nightlies” (which is currently 3.5.1-alpha) and then downgrade. Of course, we’re happy to have you testing the 3.6 branch, which will be kept fairly stable throughout its development.

#3-6, #jquery

Just a heads up WP trunk uses jQuery…

Just a heads up. WP trunk uses jQuery 1.5.2. 1.5.2 no longer allows selectors of the form [property=value]. These selectors now require quotes: [property=”value”]. Unquoted values will result in “uncaught exception: Syntax error, unrecognized expression: [property=value]”. Check your plugins against 1.5.2.

#3-2, #dev-notes, #jquery

If your menus or widgets screens broke…

WordPress 3.0.5 was released at the same time as jQuery 1.5. Unfortunately, 1.5 has some backwards incompatible changes that appear to break a number of areas in the admin. The timing is awkward and it looks like it was us. It wasn’t.

There’s nothing we can do about this even for WordPress 3.1, which is freezing at jQuery 1.4.4.

If your theme deregisters jQuery and re-registers jQuery 1.5, then you’ll want to make sure that this change only applies for the frontend, i.e. ! is_admin(). (Or use the wp_enqueue_scripts hook, which only fires for the theme-side.) This might not be obvious — if you’re enqueueing the latest jQuery from, say, Google’s CDN, you’ll be getting 1.5 suddenly, and things will break.

Someone should put together a quick plugin that restores and enforces the bundled jQuery in the admin. I’ll do it later tonight if no one else does.

Reference: #16508 and numerous support forum threads.


Updated jQuery UI to 1.5.2.

Updated jQuery UI to 1.5.2.


Tag auto-suggest now works for more than …

Tag auto-suggest now works for more than just the first tag. Before, you had to hit “enter” and send each tag down below if you wanted to use auto-suggest, because once you typed a comma, auto-suggest would stop working. Super-lame. Now it works like you think it should.

#auto-suggest, #jquery, #tags

Updated to jQuery UI 1.5.1

Updated to jQuery UI 1.5.1


Updated jQuery and jQuery UI to the late …

Updated jQuery and jQuery UI to the latest from the jQuery trunk.


Timestamp editing is now in the post box …

Timestamp editing is now in the post box area and disclosed through a jQuery slide down.

#jquery, #ui