It is a rare website these days that doesn’t have some sort of audio or video player in it. When creating a website with Drupal, there are now quite a few options on how to do this. Choosing which one to use is now quite difficult.
The old stalwart is swfobject, which is a module that allows you to use one of the very basic generic players or install more advanced flash players like flowplayer or jwplayer. I’ve used these in the past and they work as long as what you want is one of their players. Both of these players have a limited amount of support for theming. If you have a lot of time and want to cut apart images, you can style these players quite heavily from a graphics and color standpoint, but you are still going to be left with the layout exactly the same. Jwplayer does allow you to move a few buttons around on the control bar, but it is very limited and, if you remove too much or move things too much, it will break the player. The only way to really customize these players is to decompile and recompile them with a flash editor, which is not a very smart thing to do.
Another consideration is cost. Both flowplayer and jwplayer are not free for commercial use. While they aren’t very expensive (around $100 per license), they are still non-free software running on your website. Since it isn’t free and has a different license, it can’t be hosted at drupal.org. This means in order to install and use these players, you need to download them from their own websites and install them into the modules directory manually.
The final issue could be the worst: they are all Flash. With the emergence of many devices (including all mobile devices) that don’t render Flash well or at all, having a non-Flash way of presenting your media is more important than ever. Neither flowplayer nor jwplayer provides a non-Flash fallback, which means the content can’t be accessed by as many people.
Enter the MediaFront module.
There are several things that make the MediaFront module particularly appealing. First, it is 100% free and open source. This means that the player is included with the module when you download it. No need to go to a separate website to download the actual player. Second, it is an HTML5-based player with a Flash fallback. This means that it will automatically optimize itself for whatever player is best for your particular device and browser. If you are using something that supports h264, it will serve up that video. If it doesn’t, it will wrap the video in Flash.
Finally, because it is HTML-based, it can do all the theming overrides as currently found in Drupal. It uses the same rendering engine as Drupal when rendering out the player, control bar, and playlist. You can access the HTML directly and modify what goes where and what classes everything has. You can also write CSS to modify how the player looks and acts. This makes it much more easy to modify than the Flash-only players.
Next time you need to display media on your website, be sure to check out the MediaFront module.
It is important to keep in mind that these modules are only intended for displaying media. There is a entirely different component of media which is the storing, processing and delivery of the media itself. That is the subject of a different module and blog post. (See MediaMove and CDN2 modules)