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 [1][2] WordPress plugin 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).

13 Comments

  1. Lonnie says:

    Hi:

    This is exactly the fix I was looking for, but when I went to download it using your link, I got the following error:

    Well this is embarrassing

    It seems that we can’t find the content you are looking for. We hope one of these will help you find it.

    If there is any way you could fix the link or send me the patch, I’d be extremely grateful.

    Thanks!

    Lonnie

  2. shazron says:

    Must have been a temporary server thing — seems to work now.

  3. barry a says:

    The link didn’t work for me either – - but this is the correct link:
    http://www.shazron.com/wp-content/uploads/2010/07/pro-player.html5-video.patch.zip

  4. shazron says:

    Thanks Barry – I had a relative path in there that didn’t go to the right place. Should be fixed now.

  5. iero says:

    Excellent & works perfectly

  6. chris says:

    how do i install the patch?

  7. chris says:

    I keep getting this error message:

    Warning: require(/home/chernoby/public_html/wp-content/plugins/proplayer/content-handler.php) [function.require]: failed to open stream: No such file or directory in /home/root/public_html/wp-content/plugins/proplayer/pro-player.php on line 41

  8. Melanie says:

    Thank you SO much! It works perfect!

  9. Joel J. says:

    This works like a dream. Unbelievable. After hours of research, you came through. I’d love to buy you a coffee for being so generous and sharing this with us all. What non-profit do you help? I am helping a church, and the people will be extremely grateful for this. Thank you, thank you.

  10. cif says:

    I just fixed it straight and nicely BUT can you make your upgraded plugin version compatible with the patch. I had to return back from current 7.9 to 7.7 and this is weird. I mean this is an upgrade in itself :)

  11. leah says:

    this is awesome – thank you so much – but for some reason embedded youtube videos will not play on iphones. any thoughts on why, or a workaround? thanks!

  12. Hush says:

    Can someone confirm you just copy and paste these files into proplayer 4.7.7 and install like normal?

    Also any news on possible updates of this, as long as i upload a mp4 and webm files it works fine in all browsers which is good, but i tried it on my android phone and the video just shows the loading icon and does nothing, If somone could add snap to screen for mobs and get it working it would be greta, also could do with an option to pull files from the media player instead of manually adding the links

  13. kl says:

    To install:
    Plugins> Editor
    Select plugin to edit = PRO Player
    Plugin Files = pro-player.php

    Replace all old code by pasting in new, then Update File… Voila! Works like a charm.

    Thx!

Leave a Reply