5 Beautiful WordPress Video Players

“Every video I’m in,” says Lady Gaga, “every magazine cover, they stretch you; they make you perfect. It’s not real life.”

No, m’lady, it’s not.

But that’s the curse we publishers suffer — we’d like to make things look better if possible. (And just as a side note, not to be picky, but the word “perfect” may have been a stretch there.)

Anyway, with that in mind, in this post we’re going to review and compare 5 WordPress video player plugins that are meant to make your videos look better.

Perfect? Maybe not.

Better? Hopefully.

feature-drive-in

New to WordPress – A Native Player

If self-hosted videos are an important part of your site, then perhaps you know about the relatively recent addition of the built-in WordPress video player.

Now when you insert a video from your media library, or even just place a link to a video in a post, you will see a native video player wrapped around the video.

That’s a nice addition, but the player is still relatively simple. If you’d like a little more control (sometimes a lot more control), you may still want to opt for a video player plugin.

Below we’ll go over the native WordPress player plus five other video player plugins. In addition, we’ll also go over a “bonus” video plugin that you may be interested in too.

WordPress Built-In Player

wordpress

As mentioned, this is the built-in player. We’ll go over it here, so you’ll have something to compare the others to.

Being built-in is nice, and that’s probably one of its best features. You never know how a plugin might interact with a site, but you would think that a built in feature would be likely to pretty much “always work.”

Of course that’s not always the case with things, but as a general rule, it’s probably fairly reliable.

Here are the main features:

  • Size control
  • Set initial image
  • Loop video
  • Autoplay

1. MediaElement.js

mediaelement-800px

MediaElement.js is an HTML5 video and audio player with Flash fallback. It comes with a number of video and audio shortcodes.

This player has a button that allows for full-screen mode; however, I could never seem to get it to appear in Firefox. It appeared in Chrome and Internet Explorer, however.

Check out http://mediaelementjs.com/ for a live example of the player.

    Here are some of your main options with the player:

  • Control size
  • Set initial image
  • Audio function
  • Control duration display
  • Control volume display
  • Control progress bar
  • URL to captions file
  • Autoplay
  • Preload video
  • Loop video

2. VideoJS

videojs-800px

VideoJS is built on the VideoJS HTML5 video player library. It gives you the ability to place videos in a post or page using HTML5. It also has Flash fallback support for non-HTML5 browsers.

You can see a demo here: http://videojs.com/.

This plugin also comes with a handy settings page that can be accessed via a button on the visual editor. Here’s a look:

Check out the features:

  • Control size
  • Set initial image
  • Autoplay
  • Captions
  • No controls option
  • YouTube
  • Preload video
  • Loop video
  • Float left or right

3. Spider Video Player

spider

The Spider Video Player is a multi-functional Flash & HTML5 player that will handle uploaded videos or YouTube videos. It lets you choose between a number of preset templates, or you can create your own. You also get a lot of control in terms of player color, transparency, etc.

This player also offers playlists. So that, along with the detailed control you get with the player, really set this plugin apart.

That said, something else that sets this plugin apart is the giant spider watermark on the screen in the corner. I believe you can get rid of this by going for a pro version, but it’s so large that it would not surprise me if many simply felt they couldn’t use the free version because of it. In fact, that has affected our overall rating score for the player.

Here’s a look at a few of the settings.

Here are the main features:

  • Control size
  • Set initial image
  • Audio function
  • Hide control bar
  • Control buttons on bar
  • Autoplay
  • Loop video
  • Watermark feature

 
And here’s a look at the detailed color control of player:

  • Background color
  • Video background
  • Frame background
  • Frame background transparency
  • Main buttons
  • Button hover
  • Button transparency
  • Sliders
  • Hovered background
  • Selected item background
  • Text
  • Hovered text
  • Selected text

4. HTML5 Video Gallery & Player

html5-video-gallery

This is a relatively simple player whose main advantage is the ability to create a gallery of videos on a page with one shortcode.

You enter videos into separate custom post types and then call in all the different videos through the shortcode.

In my tests, it also seemed that the videos were responsive, but only when the screen was shrunk to phone size. At larger sizes, the player stayed full size for me, so I’m not really sure what was happening there. For that reason, I’ve classified it as a non-responsive player below.

Here’s a look at the features.

  • Control size
  • Set initial image
  • Preload video
  • Gallery

5. Hana FLV Player

hana-flv-player

The Hana FLV Player is actually multiple players in one. You can easily choose to use one of three Flowplayers, the OS FLV player, or the MediaElement.js player. You can also use the FLV Player Maxi with a little bit of configuration.

This ability to switch from one kind of player to a very different looking player gives you a number of nice options in the end. You might also find that one type works better with your site than another, and so that may help in finding the optimal player for your site.

Here are some of the main features:

  • Control size
  • Set initial image
  • Autoplay
  • Preload video
  • Loop video
  • Autorewind
  • Link video to URL
  • Video description
  • Design control with different players
  • Google tracking with different players

BONUS: Responsive Video Embeds

responsive

The Responsive Video Embeds plugin is a little different from the other plugins in that it isn’t really a “player.” What it does, however, is make auto-embedded videos from places such as YouTube and Vimeo responsive on your site.

And so even though it’s not a player, we’ll include it here because it’s a nice plugin to know about, and if you’re interested in video on your site, it might prove to be valuable.

You can see the plugin in action here.

Comparing Features

Below we’ll run through a comparison of options for the different players (including the WordPress Built-In Player).

It should be noted that all of the players allow you to change the size of the player. All of them also let you set an initial image (a kind of thumbnail) for the video. This is done with a separate image for all the players. It isn’t actually taken from the video itself.

Also, it would appear that none of the players is responsive, or at least not consistently so from my tests.

With those commonalities covered, we’ll look at a few features where they differ.

PlayersAutoplayCaptionsEdit ControlsLoopPlaylistYouTube Vids
WP Built-In Playeryesnonoyesnono
MediaElement.jsyesyesyesyesnono
VideoJSyesyesyesyesnoyes
Spider Video Playeryesnoyesyesyesyes
HTML5 Video Gallerynononononono
Hana FLV Playeryesnoyesyesnono

Overall Ratings – Who Wins?

  • MediaElement.js: 3.5/5
  • VideoJS: 3.5/5
  • Spider Video Player: 3/5
  • HTML5 Video Gallery & Player: 2.5/5
  • Hana FLV Player: 4.5/5

While there are a number of nice plugins here, we’re going to have to give the prize to Hana FLV Player because of its ability to actually be about six different players.

As well, as mentioned in the beginning, if you just need something simple, then you might be happy enough with the built-in player now standard in the latest versions of WordPress.

One Final Note: It should be said that some players will look different in different browsers. It’s also possible that your theme or plugins may interfere with them as well, so you’ll need to make sure you test everything in all sorts of browsers before going with a one final choice.

Here’s to looking too perfect!

Photo credit: Twin Ranch Drive In Movie Theater

Tags

Comments (6)

  1. I never understood using a native player and serving videos locally. What is the advantage over using one of these solutions versus embedding from YouTube? IMO with YouTube, not only do you offload server performance, but you can also benefit from it working on all devices, and even monetize the videos.

Participate