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 the bug tracker.
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.
We have been parsing the ID3 tags in audio and video files on upload since 3.6. ID3 tags, in many cases, contain the binary bits for an image related to the item (album cover, still, etc). On upload, if your theme and the relevant pseudo post type for attachment:audio or attachment:video registered support for thumbnails AND your current theme supported it, we would upload the image bits and attach to the media item as its featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts..
So basically it was a hidden feature, because it required you to jump through hoops to turn it on.
On top of that, if you switch themes, and the theme doesn’t support thumbnails for audio or video, the images will no longer appear alongside the media on the Edit Media page. Weird.
Playlists are best enjoyed with images, videos are best enjoyed with poster images. Soundcloud is doing some awesome things with images in their embeds – see a few on the homepage here: http://highforthis.com. Moral of the story: I think this support should be on by default. Alternately, we could add that code to every default theme’s functions.php, but then what if you switch themes…
Playlist UIUIUser interface
As I mentioned previously, the UI for playlists needs to be:
2) ExtensibleExtensibleThis is the ability to add additional functionality to the code. Plugins extend the WordPress core software.
TranslationtranslationThe process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization.: it needs to show up in a theme without much drama, inherit the style of the theme, respond the theme’s $content_width, all while allowing you to completely override this behavior. So, what I have is an ultra generic design controlled by settings in the media modal:
I have tested this in the last 5 default themes:
I would like to drop this code in soon, but I wanted to give an opportunity for feedback. All of this can easily be iterated upon once it goes in.
Documentation of 3.5 Media Code
This is ongoing – there has been a lot of code churn in the Backbone code, by myself and others, I’ll be picking this back up once that settles down.
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.