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