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.