To play video across all browsers and iOS devices that support HTML5 video and flash fallback from WordPress there is an application called VideoJS.

It makes it all far too easy  – it consists of javascript, CSS and video code which can use just one video format and utilise that format across all browsers and iOS devices.

As a minimum you need an .mp4 file which will be displayed natively in Safari and Internet Explorer with Flash being used from the same mp4 file for older non-HTML5 browsers and also for browsers that don’t support mp4 – Firefox, Chrome and Opera.

You can pass in a 2nd format of the same file and supply as a .webm format – this will then play native HTML5 video in Firefox, Chrome and Opera and then Flash is only used in the older browsers.

Download and activate the VideoJS plugin for WordPress.

You will find VideoJS settings in the WordPress Dashboard > Settings with just some default settings for undeclared settings – keep the CDN hosted version ticked, this references the VideoJS scripts from a remote server so your site doesn’t have to run the scripts. Also here is an option to make the video responsive so it scales to different viewports.

Then all you have to do is use the shortcode to activate on your post or page – in the settings page of VideoJS a full example the shortcode – you don’t need all of it, make sure you have at least the mp4 attribute and value and also set your width and height. Choose whether to autoplay and preload.

[videojs mp4=”http://video-js.zencoder.com/oceans-clip.mp4″ ogg=”http://video-js.zencoder.com/oceans-clip.ogg” webm=”http://video-js.zencoder.com/oceans-clip.webm” poster=”http://video-js.zencoder.com/oceans-clip.png” preload=”auto” autoplay=”false” width=”590″ height=”264″ id=”movie-id1″]

For a more detailed look at HTML5 Video check out some more resources here and here.