Friday, July 19, 2013

HTML5 Videos and FLVPlayer Integration

I've been working with HTML5 videos lately. There are several articles out there but nothing that specifically addresses how to fall back to Flash using FLVPlayer.

First thing you need to do is create three versions of your video: MP4, OGV and WEBM. Miro Video Converter is a free utility that can convert to all three formats. Even if you are starting with an MP4 video I suggest creating a new MP4 video from it in case it contains some metadata that is incompatible with all of the HTML5 video players out there. I've run into this on more than one occasion.

I'll use s3.company.com as a placeholder for the server that serves your videos and your FLVPlayer.

<html>
<head>
    <script type="text/javascript" src="http://s3.company.com/players/flvplayer155/swfobject/swfobject.js"></script>
    <script type="text/javascript">
        var flashvars = {
            flvpFolderLocation: "http://s3.company.com/players/flvplayer155/flvplayer/",
            flvpWidth: "720",
            flvpHeight: "480",
            flvpVideoSource: "http://s3.company.com/videos/video1.mp4",
            flvpInterfaceDisplay: "autohide",
            flvpInterfaceLayout: "overlay",
            flvpShowbCc: "false",
            flvpShowbMenu: "false",
            flvpShowbInfo: "false",
            flvpShowbForward: "false",
            flvpShowbBack: "false",
            flvpAutoStartMovie: "false",
            flvpVideoBuffer: "3",
            flvpVidConstraints: "fit to width",
            flvpTurnOnCorners: "false"
        };

        var params = {
            menu: "true",
            allowfullscreen: "true"
        };
                              
    </script>
</head>
<body bgcolor="#888888">  
    <video controls width="720" height="480">
        <source src="http://s3.company.com/videos/video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="http://s3.company.com/videos/video1.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="http://s3.company.com/videos/video1.webm" type='video/webm'>
        <div id="flashUpgrade">
            <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
        </div>
    </video>
    <script type="text/javascript">
        swfobject.embedSWF("http://s3.company.com/players/flvplayer155/FLVplayer.swf", "flashUpgrade", "720", "480", "9.0.0", "http://s3.company.com/players/flvplayer155/swfobject/expressInstall.swf", flashvars, params);
    </script>
</body>
</html>
  1. Since FLVPlayer builds its embed object using javascript, move the declarations for flashvars and params to the SCRIPT section in HEAD.
  2. Android and some other HTML5 players do not like AUTOPLAY in the VIDEO tag. Leave that out.
  3. Make sure the MP4 video is first in the list of all three video file SOURCEs for HTML5.
  4. FLVPlayer overwrites the flashUpgrade DIV with its embed code, so put its swfobject.embedSWF call in a SCRIPT section after /VIDEO so browsers that don't understand HTML5 will still load the flash video player. Don't autostart FLVPlayer either (flvpAutoStartMovie: "false" in flashvars).
  5. Replace 720 and 480 in all three locations with the dimensions of your video if different.