Pages Navigation Menu

a pixelated personality

WordPress 3.6 Media Action

WordPress 3.6 Media Action

The latest version of WordPress, “Oscar” (or version 3.6 to the less romantic) was released just over a week ago. By now a huge chunk of active WordPress users will have migrated to the latest / greatest version of WordPress. (3.6.1 as of this writing)

This new Oscar version was named in honor of Canadian jazz pianist and composer Oscar Peterson, WordPress 3.6 features more than just a new theme and improved revisions. Oscar includes better auto-save and post locking, native support for audio and video embeds via an HTML5 media player, as well as improved integration with Spotify, Rdio, and SoundCloud.

What’s New?

The newly added user features are as follows:

  • The new Twenty Thirteen theme puts focus on your content with a colorful, single-column design made for media-rich blogging.
  • Revamped Revisions save every change and the new interface allows you to scroll easily through changes to see line-by-line who changed what and when.
  • Post Locking and Augmented Autosave will especially be a boon to sites where more than a single author is working on a post. Each author now has their own autosave stream, which stores things locally as well as on the server (much harder to lose something) and there’s an interface for taking over editing of a post.
  • Built-in HTML5 media player for native audio and video embeds with no reliance on external services.
  • The Menu Editor is now much easier to understand and use.
  • A new audio/video API gives you access to metadata like ID3 tags.
  • You can now choose HTML5 markup for things like comment and search forms, and comment lists.
  • Better filters for how revisions work, so you can store a different amount of history for different post types.
  • Tons more listed on the Codex, and of course you can always browse the over 700 closed tickets.

Supported Audio

MP3 for audio and MP4 for video are pretty standard but the MediaElement.js player supports all of these file types.

  • webm
  • ogv
  • mp4/m4v
  • wmv
  • mov/qt
  • flv
  • mp3/m4a/m4b
  • ogg/oga
  • wma
  • wav

Supported Video

Keep in mind that video files are often very large in size. It is usually recommended that you host video on a service like YouTube or Vimeo since their servers are optimized for streaming video. It will also save you the cost of disk space and bandwidth. See Embedding from Other Sites below.

Using URL

Smartly, you uploaded an audio or video file to another server, say Amazon S3 or a file hosting service. In that case, you can’t use the process above. Instead, simply provide the URL to the file in your content. WordPress will read its extension (.mp3, for example) then automatically show the media player. Just enter the URL to your media file (unlinked) on a line of its own. Keep in mind that video files are often very large in size. It is usually recommended that you host video on a service like YouTube or Vimeo since their servers are optimized for streaming video. It will also save you the cost of disk space and bandwidth. See Embedding from Other Sites below.

Smartly Use Video URL

Maybe you uploaded an audio or video file to another server, say Amazon S3 or a file hosting service. In that case, you can’t use the process above. Instead, simply provide the URL to the file in your content. WordPress will read its extension (.mp3, for example) then automatically show the media player. Just enter the URL to your media file (unlinked) on a line of its own. Consider this a bonus. You might also want to embed a video from a site like YouTube. This has been possible before WordPress 3.6 with a very handy feature called Embeds. It’s not new, but I find many users are completely unaware of it and struggle at copying/pasting blocks of HTML embed code, which often requires the help of a plugin. That’s too much work! Instead, just paste the URL of the page showing the video.

Shortcodes

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 shortcode:
  • I have the URL 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: 
  • 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 filter: here

Example :: There is a YouTube video at http://www.youtube.com/watch?v=mmRPSoDrrFU that you want to embed. Simply paste that into your content on a line of its own and the YouTube player will show in its place when you publish. Be sure that the URL is not linked.

YouTube

YouTube video at http://youtu.be/zTI5seuGi20 becomes video below:

Vimeo

Same method using Vimeo URL:

SoundCloud

Same method for SoundCloud

https://soundcloud.com/hillsongmusic/cornerstone-1

Audio

Dock of the Bay – inserted by simple url (https://flashalexander.com/mp3/dock_of_the_bay.mp3)

At the time of writing, WordPress includes support for about 20 sites. Here’s the list ofsupported sites. New versions of WordPress increase support, with Rdio and Spotify recently being added in 3.6.

Leave a Comment

Your email address will not be published. Required fields are marked *