The Most Exciting Feature of WordPress 3.6: Native Audio and Video Support

We’re all eagerly looking forward to WordPress 3.6 with its beautiful updates to Post Format UI and bright new default Twenty Thirteen theme. But there’s one feature that far and away surpasses all the others.

The upcoming WordPress 3.6 release will add native support for audio and video files. This one is a real game changer. We’re going to give you a full introduction to the new capabilities and show you how you can use them on your WordPress site. But first, let’s take a look at how we’ve previously been managing multimedia files.

In the old days…

If you’re a podcaster or video blogger, in the old days your WordPress site required a plugin in order to play the audio or video files that you created.

For example, if you were going to upload a video, here’s what it would look like in the WordPress post edit screen:

Inserting an uploaded video into a post just results in a clickable link with no player.

As you can see, inserting an uploaded video into a post just results in a clickable link with no player on the front end. Boo! If this was a first time discovery, I’d be off to find a suitable plugin for displaying my media.

Of course, you could always take advantage of a third party service like Youtube or Vimeo and easily embed it in WordPress. But what if you just want to use your own server? There was no way to do this before without the help of a plugin.

A Preview of Audio/Video Uploads in WordPress 3.6:

Below is a quick preview of how you might upload a video in WordPress 3.6. You can also see how the post format selection will appear:

Option to post embed code or upload your own video file

What I like about the update is that it provides a clear path of action. Once the user selects “Video”, he doesn’t have to wonder what’s next or how to get the video to display. He can either paste in the URL to the video or upload one. The shortcode is automatically provided. Here’s what that looks like on the front end:

Front end video display

The whole experience is much easier than before, don’t you think? These updates make it possible for anyone to post the occasional audio or video file without having to search for a media player.

What’s under the hood?

Some of you may already be familiar with MediaElement.js and have perhaps even used in on your WordPress site via a plugin. There are a number of reasons MediaElement.js was chosen to power WordPress’ core audio/video support, but these are perhaps the most compelling:

  • Outstanding support for all major browsers and devices
  • MediaElement.js uses the same HTML markup, regardless of playback implementation
  • The players can be easily skinned with CSS

If you’re wondering just how robust the browser and device support is, check out this chart from the MediaElement.js website:

MediaElement.js Browser and Device Support

MediaElement.js Features:

  • HTML5 audio and video players in pure HTML and CSS
  • Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers
  • Accessibility standards including WebVTT

The awesome thing about the media players is that any regular Joe with just a little bit of CSS can style them to make them look completely custom. Full visual control of the media player was quite rare in the old days of using plugins. In fact, many media players come branded for the software and make their logos/links difficult to remove. Not so with the new native players. The display is entirely under your control.

Why Native Audio/Video support makes life easier for everyone:

Solid audio/video support means a better experience for both publishers and readers
Finding the right audio or video plugin can be a gigantic hurdle, especially for a beginner. Not only does it require a plugin compatible with the current version but it also requires learning how to use it, and some of them don’t make it easy. The new native audio/video player makes it possible for anyone to upload and display multimedia content without having to be familiar with plugin installation and customization. Not only is it easier for those posting blogs but it’s also fantastic for the readers, given the broad support for browsers and devices. This is the way it should be and I’m glad it’s finally here.

Third-party services like Youtube and Vimeo no longer required

So now if you take a quick video with your phone, you can easily upload it to your WordPress blog without having to jump through a bunch of different hoops. Multimedia bloggers, bands, podcasters, magazines and news sites can their own audio and video libraries with WordPress – no plugins or third-party services required. Just remember that streaming audio and video can take a huge toll on your server, so you may still want to use a service like Youtube or Vimeo. WordPress 3.6 has you covered with new embed handlers if you go that route.

The new native audio and video support is a giant leap forward for all WordPress users. Since WordPress powers a very large chunk of the web, we’re bound to see a huge increase in multimedia blogging. Are you excited about the changes in WordPress 3.6? Will you ditch your audio/video plugins and use the new native capabilities?

Image Credits:
Creative Commons license:Untitled by wakingphotolife
Creative Commons license: Your petite tune by Esellee

Tags ,

Comments (14)

  1. I think I’ll still be sticking to YouTube and Vimeo, because not only am I in a shared hosting environment on all my sites, but these third-parties have a community element to them that builds my exposure and drives traffic to my site. Plus, since I’m a YouTube partner, I can place annotations in my videos that take people directly to my site.

    Still great to see them moving forward with this though. Perhaps for audio it will be useful for me, and I know a lot of podcasters that’ll love it as well.

    • I get what you are saying, as a “video guy” it may not make as much sense. With that being said, there are a lot of blogs that post things about their children or shoot a random small video that they do not wish to post on YouTube or Vimeo. I think this is something Sarah conveyed in the post.

      Another interesting thought is how this may apply to a plugin like Membership or Market Press where you have the potential to sell your media content. This feature gives a native way to share a “preview” and embed with out having to post third party. It may give more control… but we shall see. :-)

      • It would also be huge for anyone who wants to share an exclusive story. Post a video on YouTube, and people can just embed it, or download it and reupload themselves, creating no path to your website at all.

        Hold it on your own site, and if it is something that really takes off, they have to come to your site to see it.

        Of course, if people are able to embed your video on their site… much more server load for you. I’d probably, in that situation, try to remove embedding functions from social sharing, so that people can only see it from my site. You get less exposure on the story, but it’s exclusive.

        Pros and Cons

  2. Im working with WP 3.6 on my local machine (mac osx) and i can’t seem to find the usage of this “native video” option yet. I’ve uploaded a video (.mov) and it when i update the post, view it on the front end, it wants me to download the video, its just a link in my post, no video player… I guess this will take some time to understand, but not the simplest solution I’d have to admit. I think WP could’ve made a bit better, unless im missing something, which i could be…

  3. I love this!

    I wonder if we’ll see a push on the VideoPress front…

    I also wonder things will go with video compression plugins and video ad type plugins (pre-roll, mid-roll and post-role or something else). If anything at all. :)

  4. This is a pretty cool addition. I’m excited for it. How does this translate into users of the site? For example, would this be able to allow Buddypress users to add this video/audio functionality into their profiles or into groups? Or am I putting the cart in front of the horse lol?

  5. Yawn. MUCH ado about nothing. Soooo many reasons to use YouTube I can’t see why I would ever do it this way whether it’s easy or not! The social media and SEO aspects, not to mention the server load issues you mentioned yourself far outweigh the benefits of doing it this way. Just because we can doesn’t mean we should.

  6. Yeah, this would only be helpful for someone that does a rare short video as anything bigger, unless you have a dedicated server, would just bog down things.

    As most have mentioned, I am sticking with my Vimeo account.

  7. Could someone explain how the players can be ‘easily skinned’ using CSS? The CSS seems to be largely within the mediaelement.js file, which is not especially easy to edit and would involve hacking a core file.
    Thanks

  8. This is just awesome. Video and audio has always been a hunt for the right plugin. This will help a lot of newcomers to get their “stuff” out!.

    My congrats on a good article – that I will read again for reference on videos and support. Now I will test and later remove all the different plugins on my many sites.

  9. OK … I’m obviously a dummy for being so late to this discussion … but …

    I’ve got a bunch of audio on my site, and configured it using JetPack’s audio shortcode that allowed me a whole range of customization for how the player displayed, animation, width, etc. etc. … NONE of which seems to be available with this new supposedly better native shortcode. The JetPack code was *already* easy, and far more useful. Unless anyone can identify where the customization info might be, I say this is a totally crappy addition that actually makes life *harder* for a relatively neophyte WP user trying to run a somewhat complicated site already.

    Boo.

  10. This is not even working for me! I add the media, e.g. [audio mp3="http://trobaz.com/wp-content/uploads/2013/08/Dont-Give-Up.mp3"][/audio] to the page, post, then on viewing the page, i see the player, but i click the play button and nothing happens.

Participate