Home WordPress How to embed audio and video players in WordPress

How to embed audio and video players in WordPress

by admin

Outdated: The information in this article is outdated. See our Media Embeds guide instead. It shows you how WordPress 5.0’s media embed blocks work.

WordPress 3.6 has been released and one of it’s best new features is the ability to embed audio and video players for uploaded media directly into post or page content. The excellent MediaElement.js JavaScript library is used to output an HTML5 or Flash player, depending on the browser and device, for near-total compatibility. This is a very well-regarded script and is now included in WordPress core for native functionality and for theme/plugin authors to leverage.

In preparing guides for the imminent .com launch, I was surprised not to find multiple tutorials explaining to regular users how they can use this new feature. Just this morning I was asked by a customer if it was possible to show a player for an uploaded MP3 file. The answer a few weeks ago would have been to use a plugin. The answer today is yes, WordPress can do that. Here’s how.

 

Upload and Embed

First let’s take a look at what the audio and video player look like. Not screenshots, but the real thing! I’ve uploaded these files and embedded the players using the steps below.

What You’ll Get

Here’s an excerpt from John Piper’s The Legacy of Antioch sermon.

 

And now a video of windmills…

How To Do It

The process is similar to inserting an image into your post content.

1. Add or edit a page or post.

2. Click in your content where you want the player to appear then hit Add Media above the content editor.

add-media

3. Click Upload Files.

4. Upload an audio or video file.

5. Make sure the file you uploaded is selected then under Attachment Display Settings set Embed or Link to “Embed Media Player”.

embed-setting

6. Click Insert into page.

WordPress will have inserted a shortcode for your audio or video that will be replaced with the player.

File Types

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

Video Considerations

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 a 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.

http://sample-content..com/resurrect/uploads/2013/06/sample.mp3

That will automatically produce this, playing off of a different server.

 

Using Shortcodes

You may have noticed if you view your content in Text mode that the media player is generated by an audio or video shortcode. You can use a shortcode directly with a set of attributes for even more control over how MediaElement.js renders the player. Read Scott Taylor’s Audio / Video Support in Core post on the WordPress Core blog for shortcode examples.

Embedding from Other Sites

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.

For 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.

http://www.youtube.com/watch?v=mmRPSoDrrFU

That simple line above becomes this:

Here’s one from SoundCloud to demonstrate the wide range of sites supported.

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

Conclusion

So that’s all pretty cool. WordPress now has a huge range of support for local and externally hosted audio and video. Our themes at .com are all responsive (mobile-friendly) so I’ve developed some code to make most of the WordPress embeds responsive as well (resize your browser to see it in action on this post). I hope to share that with theme developers in a future post.

The Legacy of Antioch video and audio by John Piper. © 2012 Desiring God Foundation. Website: desiringGod.org. Used by Permission.

Related Posts