Bourn Creative

Transforming Businesses into Extraordinary Brands

  • Portfolio
  • Services
  • About
  • Praise
  • Contact
  • Blog
  • Start Your Project
WordPress Video And Audio Player
standard icon

WordPress Video Player and Audio Player Plugin Review

August 8, 2012 Brian Bourn

UPDATE: This plugin has been rolled into WordPress core. That means you get the same functionality with WordPress out of the box, and don’t need to use a plugin anymore.

By now it’s no secret how powerful videos have become in online marketing, and WordPress makes embedding videos hosted on external sites like YouTube or Vimeo extremely easy. But what about when you do not want to have a video publicly viewable (hidden behind an opt in or paywall page), inside a membership area, or simply just want more control on how the player looks and works?

On several recent client projects we needed a video solution to accomplish this and MediaElement.js was the answer. MediaElement.js is a video and audio player plugin for WordPress built on the MediaElement.js HTML5 media player library. What makes this plugin special is that it also provides Flash or Silverlight fallback players for non-HTML5 browsers (nerd translation = works with older browsers and non-Flash devices like iPhones & iPads).

From a user perspective, it is fairly simple to use and set up. After installation and activation there is just one screen of default settings (which can be overridden on each video or audio file). When you first set up the plugin, we recommend thinking how you will be using the player the most and setting your defaults to that.

For example, if you plan on mostly video blog posts, you should determine the content width of your posts and set the plugin defaults to that. To set the height, do a little math on the width to set the default height to the same ratio as your videos: 16:9, 4:3, etc. This should help to preserve to quality of your videos and eliminate distortion or any black bars within the video player.

MediaElement.JS Audio and Video Player Options

Adding a video or audio file to a WordPress page or post is easy using the plugin’s shortcode. The examples below will inherit the defaults from the plugin settings page.

Please note that all examples below need to wrapped in shortcode brackets [ & ] to work.

video src="http://mysite.com/mymedia.mp4"
audio src="http://mysite.com/mymedia.mp3"

TIP: Use the alternative prefix in the shortcode to help avoid theme or plugin conflicts.

mejsvideo src="http://mysite.com/mymedia.mp4"
mejsaudio src="http://mysite.com/mymedia.mp3"

Multiple options are available to add to the plugin shortcode to customize the video and audio player. There is good documentation at the WordPress plugin’s homepage for the various settings options. The one thing I think could be improved on this plugin would be to also add the shortcode options within the WordPress dashboard under a help tab or on the settings page.

Here Are Some Customization Options:

To set the width of the player:

width="640"

To set the height of the player:

height="360"

To start loading the video or audio as soon as possible, before the user clicks play. Definitely use this setting if video aren’t set to autoplay:

preload="true"

To automatically start the video or audio as soon as it’s ready. I personally hate autoplay anything, but many marketers swear by it:

autoplay="true"

To disable the player progress bar:

progress="false"

To disable the volume control slider. The volume control on the user’s device will still work:

volume="false"

To disable the length output:

duration="false"

To disable the full screen option:

fullscreen="false"

To add a custom video poster/splash image:

poster="http://mysite.com/mymedia.png"

Here is an example of a shortcode for a video with multiple options changed and with a custom set height and width:

mejsvideo src="http://mysite.com/mymedia.mp4" width="640" height="360" preload="true" volume="false" fullscreen="false" duration="false" progress="false" poster="http://mysite.com/mymedia.png"

TIP: Your videos do not have to be hosted on your own site for this plugin. The last few client projects we worked on had their videos hosted on Amazon’s Web Services.
Add MediaElement.js to a Widget

Out of the box, you can’t add a video with MediaElement.js to a WordPress widget, but you can after adding the following code to your theme’s functions.php file.

***Execute Shortcodes In Text Widgets**/
add_filter('widget_text', 'do_shortcode');

Once this code is added, you can add a MediaElement.js video or audio shortcode to a text widget within your WordPress theme.

TwitterFacebookLinkedIn

Category: WordPress Tips & Resources Tags: Web Development, WordPress, WordPress Plugins

Subscribe To Our Blog & Never Miss A Thing

Sign up to get new our latest posts and announcements delivered straight to your inbox. Seriously, at this point, what’s one more email?

About Brian Bourn

Chief Executive · UX Designer · Developer

Strong with the Force, is he... an excellent CEO he makes. As Bourn Creative's fearless leader, Brian manages the business, team, and day-to-day operations. He is also lead organizer of the Sacramento WordPress Meetup group and co-organizer for WordCamp Sacramento.

Brian is a designer at heart who leads the UX design and development on all company projects, building the interactions between websites and visitors, and site managers and the WordPress admin. With hundreds of thousands of lines of code under his belt, Brian specializes advanced WordPress development and custom themeing with the Genesis Framework.

Discover What We Can Do For You

Have a project you think we'll like? Click the button below and tell us about it.

We love working with enthusiastic clients who are as passionate about their business as we are about strategy, design, and development. If that sounds like you, we should talk.

Start Your Project

Bourn Creative

  • Follow Us On Twitter
  • Like Us On Facebook

Copyright © 2021 Bourn Creative, LLC. All Rights Reserved.

Privacy | Disclaimer