The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.?Create a ticket in our bug tracker.
MediaElement has been upgraded to 4.2.6 (see #39686), which includes many bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes as well as:
Removal of all dependencies to jQuery in code to make it more portable
Updated UIUIUser interface, using flexbox
Improved accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) for player controls
Dropped support for older browsers (supports IE11+, Chrome, FF, Safari, Android 4+ and iOSiOSThe operating system used on iPhones and iPads. 8+), keep in mind that ME.js applies to the front end and not just WP Adminadmin(and super admin)
Upgraded YouTube and Vimeo renderers to use new APIs (for Vimeo, it uses now https://player.vimeo.com/api/player.js, since Froogaloop is deprecated)
Added support for iOS 10 and Mac OS on websites using HTTPSHTTPSHTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information.
With this upgrade, a couple of things must be considered:
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.
player.options.mode has been removed completely.
Although jQuery was removed from the coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. package, a MediaElement migrationMigrationMoving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. file has been included to provide full backward compatibility between themes and development of new features.
Props to @rafa8626 for helping write this Dev Notedev noteEach important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include:
a description of the change;
the decision that led to this change
a description of how developers are supposed to work with that change.
Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase..
With the introduction of the video widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. (#39994) and audio widget (#39995) it was discovered that the WMV and WMA file formats are no longersupported by MediaElement.js as of v3. While coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. is currently shipping with MediaElement.js v2.22, these file formats only play if the Silverlight pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party is installed, something which is less and less common since the plugin is no longer supported as of Chrome 45 and as of Firefox 52. So with the planned upgrade of MediaElement.js from 2.22 to 4.x (see #39686), it is a good time with the WP 4.8 major releasemajor releaseA release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope. to remove support for the formats. This has been done in  for #40819.
Plugins may continue to add embedding support for these file formats by re-adding them via the wp_video_extensions and wp_audio_extensions filters, for example:
Plugins would also need to implement fallback rendering routines via the wp_video_shortcode_override and wp_audio_shortcode_override filters, or else use a different library than MediaElement.js altogether via the wp_video_shortcode_library and wp_audio_shortcode_library filters.
Note that there is no functional difference before and after the removal of WMA and WMV support. When MediaElement.js doesn’t support a format, it displays a download link. Before and after , the following is ho the audio and video shortcodes look like with WMA and WMV files respectively:
In the adminadmin(and super admin), the functional difference is that these formats are not listed as being available for selection in the Video and Audio widgets. Additionally, when you Add Media in the post editor, there is now no option to embed the player for these formats; only a link to the media will be provided, just as when attempting to add non-media files to content.
The latest major updates to Audio/Video before BetaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. were related to editing shortcodes in the medial modal. TinyMCE placeholders for audio and video have been added like so:
When you click the placeholder, the media modal will now be launched. And when you get there, there are some new ways to manage HTML5 playback without writing anything by hand.
Add Multiple Sources
MediaElement.js provides cross-browser support for many extensions by providing Flash and Silverlight files that will bridge the browser support gap when necessary. Ideally, as many browsers as possible would be using native HTML5 playback. To ensure this, you need to specify multiple versions of your files. Since 3.6, the audio and video shortcodes have supported this by allowing you specify multiple extensions as attributes: mp3="yolo.mp3" ogg="yolo.ogg" wma="yolo.wma", etc.
A quick and easy way to encode your files is to use FireFogg (works in Firefox only). Here are some instructions for audio and video files:
Click “Make web video”
Select a File (your iTunes files on a Mac are in: ~/Music/iTunes/iTunes Media/Music – Pick a tune!)
Click “Advanced Options”
Uncheck Video, make sure Audio is checked
Format: Ogg (Theora/Vorbis)
Set quality to 10.0
Optionally add metadata
Click “Encode” – make sure to change the extension in the file prompt from “.ogv” to “.ogg”
Click “Advanced Options”
Make sure Audio and Video are both checked
Format: choose Ogg (Theora/Vorbis) or WebM (VP8/Vorbis)
Optionally add metadata
(Repeat these steps for the format you didn’t select this time)
There is now a workflow to make adding these extra sources to shortcodes easy:
Multiple sources are specified now. Make sure to click blue “Update” button to save your shortcodeShortcodeA shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. back to the editor.
Here is a video workflow, assuming your shortcode has no attributes and you click it:
Add each video source:
Optionally add a poster image:
If you’re feeling CRAZY, add some Subtitles! Here’s a post about them. They’re pretty cool. Probably make sure your web server is serving .vtt files as text/vtt.
Add your subtitles using our easy workflow:
When you’ve added them, MediaElement knows to support them out of the box:
Boom. Subtitles while your video plays:
When you add your subtitles, if will show you a list of “track” elements you have added, you will still need to set your language manually – all will default to English. The idea is that you can add a track element per language. Tracks get stored as the body of your video shortcode.
Testing + Tweaks
Now comes the time for testing and refining, while fixing esoteric bugs. PLEASE HELP! Put your UIUIUser interface + UXUXUser experience hats on, if you wear that kind of hat.
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.
There are some lingering icons in the adminadmin(and super admin) that don’t look as pretty as their MP6ify’d brethren
Document the “new” Media code introduced in 3.5
This ticketticketCreated for both bug reports and feature development on the bug tracker. speaks for itself, and already has a patchpatchA special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing..
Generate audio/video metadata on-demand
#26825 Add ability to generate metadata for audio / video files on-demand
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 HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. should be semi-bulletproof. Many of the Player libraries make heavy use of DIVs instead of items that might be overridden easily with CSSCSSCascading Style Sheets.: 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 metaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress., captions, etc.
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.
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
Register an endpoint for audio / video that will expose the “embed code” via oEmbed
Post Formats are a big feature in WordPress 3.6. What you may not know is: there is now native support for Audio and Video in coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.! There has been great support for embeds by way of WP_Embed and oEmbed providers for a while, but, if you wanted to play an MP3 from your Media Library, you had to install a pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. Supporting audio and video in core gives bands, podcasters, vloggers, et al the ability to easily and beautifully expresses themselves through sounds and moving pictures without using an external service.
How does this work?
At the core of the experience is the fantastic library, MediaElement.js. MediaElement is the facade layer that gives us maximum file support and cross-browser compatibility. While some libraries require a Flash-only solution to make your media work cross-environment, MediaElement lets you use HTML5 audio / video tags in every browser, and, only when necessary, will use a Flash or Silverlight plugin in the background to make incompatible media work. TranslationtranslationThe process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization., things like this: <audio>tagtagA directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) works in old IE, Windows Media files work in Chrome.
MediaElement uses the same HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup, regardless of playback implementation, and you can use CSSCSSCascading Style Sheets. to skin the players.
MediaElement’s great, but we don’t want to be locked in to one external library forever. Instead of using MediaElement-specific markup everywhere, we expose audio and video markup through shortcodes: [audio] and [video].
For the following scenarios:
I have an old post that has a video in the Media Library attached to it, and I want to use the new shortcodeShortcodeA shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site.: [video]
I have the URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for a video, from the Media Library or external, that I want to play: [video src="video-source.mp4"]
I have a source URL and fallbacks for other HTML5-supported filetypes: [video width="600" height="480" mp4="source.mp4" ogv="source.ogv" webm="source.webm"]
Same goes for audio:
I have an old post that has an audio file in the Media Library attached to it, and I want to use the new shortcode: [audio]
I have the URL for an MP3, from the Media Library or external, that I want to play: [audio src="audio-source.mp3"]
I have a source URL and fallbacks for other HTML5-supported filetypes: [audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]
Shortcodes focus on the “what” and abstract the “how.” If you want to use a library that is not MediaElement, you can! Just look at what to filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.: here
There are also new embed handlers for audio and video. Using them is easy as dropping a media link on a line by itself in the editor:
I like this song because it is really cool!
Works for both audio and video with URLs matching the allowed (and filterable) list of extensions (see: here and here)
Adminadmin(and super admin)
Using the new post formats UIUIUser interface, it is even easier to get directly at the audio and video in your Media Library. When selecting, the media modal opens to your library, filtered by media type.
In previous versions of WP, you could upload audio and video, but we were not generating metadata like we do for images. In 3.6, using the getID3 library, we are able to extract data from audio and video like cover art, song length, artist, album, song title, genre, codec, etc. It’s pretty great. We will soon be exposing more of this data in the admin as well, along with inline previews on the Edit Media page:
Themers can get in on the action, too, using structured-post-formats in their theme (Twenty Thirteen is a great place to look). The admin gives users flexibility when associating media with a post. the_post_format_audio() and the_post_format_video() will automagically retrieve and output your media in the front end.