ProPlayer WordPress plugin HTML 5 video fallback patch

The <video> tag is great and all – but unfortunately fullscreen support is not ubiquitous yet, but support is in the latest versions of Chrome, Firefox and Safari.  It should have been supported when initially implemented (but you’ll have to trawl through the WHATWG mailing lists to see the arguments for and against).

No matter - fullscreen is an important feature, and in my work supporting a non-profit, they needed to have this feature for their members for viewing classes (which may run 1.5 to 2 hrs long), and the <video> tag in its current incarnation then with no fullscreen support just didn’t cut it.

Considering that most people don’t upgrade their browsers often, but have Flash installed already - we still needed a Flash based video player for fullscreen support. People understand most Flash video players with fullscreen buttons (thank YouTube for that), so it was not hard to educate them about this feature. The non-profit uses WordPress, so we settled on Isa Goksu’s ProPlayer WordPress plugin (and website) which allows for customizability.

The problem was that recently, some students wanted iPhone / iPad video playback as well, and with the current Flash player, they were seeing no videos at all. We had already moved to h.264 movie file support in anticipation of this, since it is supported by the Flash player and most browser <video> tag implementations (save Firefox).

I modified the ProPlayer plugin to fallback to using the <video> tag, if Flash is not available. It works great on the iPad and the iPhone 3GS (iOS 4), but on the iPhone 3G (iOS 3.12) it cannot be played, I don’t know why.

UPDATE: Looks like the video was encoded using a h.264 profile that the iPhone 3G didn’t recognize. iPhone 3G supports h.264 Basic Profile 3.0, later iPhones support High Profile

Download the patch here. The version of the plugin that was patched is 4.7.7 (pro-player.php file only).