Movies v0.4, now with MediaElement support!

Just checked in v0.4 of Movies.

In the past couple months, I have learned a LOT about dealing with video on the web. I would describe the experiences I have had as “bone-crushingly painful,” “annoying,” and mostly “a gigantic waste of life.”

In my work building sites with WordPress, and with the work I have done at eMusic, I have been trying to find a default solution to use for video that works cross-browser / cross-platform / everywhere. Something painless, beyond easy, that degrades gracefully.

Here are my observations so far:

  • Ogg Theora (the video codec Firefox supports for native HTML5 Video) plays like hell in Firefox (or I’m encoding it wrong… nah, it plays like hell in Firefox)
  • Flash is mostly better than HTML5 Video in all cases except for WebKit browsers
  • a unified UI is way more important than broad HTML5 support
  • Flowplayer (VideoJS‘s Flash-fallback) is a bag of hell
  • MediaElement gets more right than VideoJS

Accordingly, I have made MediaElement the default player for Movies. You can still use VideoJS by editing one line of  code in the plugin file (you will get an admin warning that makes this painfully obvious) if you want, but I am going to recommend that MediaElement wins this fight.

I haven’t abandoned VideoJS. I updated the JS/CSS to the latest release, and I will keep a watchful eye on their development.

Because MediaElement maintains a consistent UI, I am only setting the MP4 source for the Video tags that are rendered. Flash beats Ogg Theora to a pulp in Firefox – it is sad by how much.

I have also added a new function to the Movies API (the_flash_video()) which will render only the Flash embed code on the page (no HTML5 Video tag) if that is what you desire. I found a use case for this when working on a Theme I am porting from Tumblr – stay tuned.

“Audio” plugin now supports Ogg Vorbis

I just checked in version 0.2 of my HTML5 Audio plugin for WordPress, “Audio.” When used with Shuffle, you can now associate an Ogg Vorbis file and/or image with an MP3 file which will all load automatically and simply into an HTML5 Audio player on browsers that support it with a fallback to Flash for those browsers that don’t.

Support for Ogg is crucial because Firefox will not play MP3s natively. Unless you view the source of your code or are the developer of your site, none of this information should matter to you – you can continue to use MP3s, and the code will load HTML5 Audio/Flash behind the scenes. For those who want to take advantage of the latest/greatest and shun Flash whenever possible, use Ogg and MP3.

More on “Audio” here.

New Plugin, “Movies”

UPDATE: Movies now supports WebM

Full disclosure: I know there are other HTML5 video players available as WordPress Plugins. I also know Daryl Koopersmith just wrote a plugin for VideoJS cuz he told me on Twitter. However, his plugin (and none of the others) take advantage of the glory that is Shuffle.

For HTML5 video to work, you need 2 (maybe 3) things:

  • an H.264-encoded video file
  • an Ogg Theora-encoded video file
  • a still image to use as a “poster” image for the video when it loads into the player

VideoJS kicks ass because once you have these resources, it is easy to use their boilerplate markup to insert a video tag and a fallback Flash object. What makes it awesome even further is that the player can be styled 100% with CSS/images, even 100% CSS3 if you want! That’s why I fell in love with VideoJS immediately.

What is not so easy is managing all of these file types in the Media Library. That’s why I wrote Shuffle. Shuffle lets you associate anything with anything, even allows you to re-order using drag and drop (high-fiving myself!). So if you are gonna use Movies, you are gonna want to use Shuffle!

Shuffle allows you to search for Attachments when attaching a media item to a post. When you import your movies, please fill out Title-Caption -Description for Title-Artist/Director/Whatever-Description. Always filling out a title will help you in 2 ways:

  • the items will be easier to search for
  • the information is displayed on the page, or hidden but still crawlable, in the hMedia microformat

I decided that if I was going to make swiss-army-knife media plugins, I would try to do everything as semantic and clean as possible.

But back to how it works… once you upload your MP4 file, OGV file, and image, you want to attach the OGV and image to the MP4 file (you need Shuffle for this). From then on, you can attach and detach the MP4 file from whatever Post or Page you want, and the OGV and image will always remain attached to the MP4, unless you detach them manually. When the plugin loads your MP4s to the page, it looks for its attachments to fill out the and poster data in the HTML5 video tag, also uses the image for the Flash fallback, and uses the MP4 data and the image source for the hMedia data.

To use Movies in your theme, you have 2 options:

  • As a shortcode: [movies]
  • As a function: the_movies() or the_videos()

If you need info on how to encode your videos in H.264 or OGV, go here. The markup for the VideoJS player is loaded automatically, as is the JavaScript to dynamically load the videos when clicked from within the list of videos attached to your post. To style the player and the way the playlist looks, add a video.css file to your Theme directory. It will load with the rest of the plugin files and will override where necessary.

New Plugin, “Audio”

UPDATE: Audio now supports Ogg Vorbis

That being said, it is off to a good start. In my quest to 1) encapsulate all the code I end up writing 5 million times into re-usable / one-click-installable Plugins and 2) fix how WordPress deals with/doesn’t deal with Media, I have written a pretty sweet plugin for Audio. It is not feature-complete and definitely needs to come with some more Theme options out of the box, but for advanced developers who want to start managing their MP3s / MP3 playlists in a much easier way immediately, it is already pretty powerful.

I claimed the Subversion repository late last week without having written a line of code, but I did have a mission statement which I included in the Plugin’s description:

Audio allows you to use simple functions in your theme to display audio you have attached to Posts/Pages/Custom Post Types in your Media Library. Your player is styled 100% with CSS/images (if you want). Your audio player uses your browser’s native HTML5 capabilities when available with a fallback to Flash when necessary. Allows you to play audio inline on mobile browsers that support HTML5 Audio (heeeey, WebKit!)

Let’s take it step-by-step:

1) You can now output an Audio playlist into your page through 2 EASY methods

  • Shortcode in the editor =
  • the_audio() in your Theme code

These both do the same thing: they create the code necessary for jPlayer to handle player clicks and for you to style your player. The optional take an argument of “layout” if you want to include the list of your tracks below the player:

  • Shortcode in the editor = [audio layout="list"
  • the_audio('list') in your Theme code

In plugins/audio/audio.php, you can configure your URLs to be open to the world or obfuscated, the default is obfuscated. To change this, set this at the top of the file:

define('SECURE', false);

2) The player is styled 100% with CSS and some images I boot-legged from jQuery UI. I HIGHLY-ADVISE you to override all of the styles I have provided. In fact, if you put an audio.css file in your Theme directory, it won’t even load mine! You should copy and paste the code from plugins/audio/css/audio.css and then change it to your own site’s vibe.

3) HTML5 Audio!

The plugin is built on top of jPlayer, a jQuery audio plugin. In Chrome and Safari, your MP3s will play as native HTML5 Audio. Same goes for Android and iPhone. All other browsers that don’t support MP3 natively will fallback to Flash. Firefox supports Ogg Vorbis, but I didn’t have the energy to write support for Ogg Vorbis into the plugin yet. I am trying to de-couple all of the default functionality of Audio from Shuffle, but you should probably use them in tandem to get the benefits of associating thumbnails (album covers) with audio uploads, and later, Ogg Vorbis uploads with MP3s (I still haven’t decided how I’m going to do this).

The description for the plugin now reads:

HTML5 Audio (on supported browsers), Flash fallback, CSS-skin’d player, hAudio Micro-formats, attach images to MP3s (when used with Shuffle)

4) I have decided to get super-semantic and use the hAudio micro-format for the audio data that the plugin outputs. When adding meta data to your MP3s in the Media Library, Title – Caption – Description will be used for Song – Artist – Album.