Getting Flowplayer to Play on the All Browsers, Android, iPad, iPhone, iPod

How To:  Getting Flowplayer to Play on the All Browsers, Android, iPad, iPhone, iPod

Applies To: All Browsers, Android, iPad, iPhone, iPod

Flowplayer is a popular video player that you can skin and customize.  We implemented it on one of our sites and to get mobile to work properly on all phones and devices.

First you must reference the downloaded Flowplayer and iPad Plugin scripts and put the files in your site.
<script src="/PATH/TO/SCRIPTS/flowplayer-3.2.9.min.js"></script>
<script src="/PATH/TO/SCRIPTS/flowplayer.ipad-3.2.8.min.js"></script>


Then, you can call this on page load if you have jquery's $(document).ready event.  Or you can put this below the HTML.

Here is the javascript that instantiates the flowplayer.  It will choose between the HTML5 version for mobile browers and the flash version that works on browsers IE6-IE9, Firefox, Chrome, Safari, Opera, and any other Flash enabled browser.

<script type="text/javascript">
    $(document).ready(function() {
        if (navigator.userAgent.match(/Android/i)
         || navigator.userAgent.match(/webOS/i)
         || navigator.userAgent.match(/iPhone/i)
         || navigator.userAgent.match(/iPad/i)
         || navigator.userAgent.match(/iPod/i)
         || navigator.userAgent.match(/BlackBerry/i)
        ) {
            $f("player", {
                src: "/PATH/TO/FLOWPLAYER/flowplayer.commercial-3.2.10.swf",
                wmode: 'opaque'
            }, {
                key: '#$09ce03a35b17ee17229'
            }).ipad({ simulateiDevice: true, controls: false });
        }
        else {
            $f("player", {
                src: "/PATH/TO/FLOWPLAYER/flowplayer.commercial-3.2.10.swf",
                wmode: 'opaque'
            }, {
                key: '#$09ce03a35b17ee17229'
            }).ipad();
        }
    });
</script>

Here is the HTML that is in the body of the page:
Note: Video must be mp4 with AAC audio. 

<a id="player" class="player"
    href="/PATH/TO/VIDEO/video.mp4"
    style="display:block;width:425px;height:300px;margin:10px auto">
</a>

Article ID: 21, Created On: 5/10/2012, Modified: 5/10/2012