HTML5 Video Not Working in Firefox

HTML & CSS
1

I’m using Zencoder’s HTML5 video player and can’t seem to get it to work in Firefox. I’ve tested it in both 3.6 and 4.0 beta, as well as Google Chrome and Safari all on a mac. I have both the javascript and css files referenced correctly as well as $(function(){VideoJS.setup();}); in the header. The video demo works in firefox but for some reason when I implement it on my site it won’t load up.

Here is the code used to generate the player:

<div id="videoContainer" class="video-js-box">
    <video id="video" class="video-js" width="720" height="380" poster="../images/main-seller.jpg" controls preload>
        <source src="../MainVideos/Main_Sell.mp4" type="video/mp4;codecs='avc1.42E01E, mp4a.40.2'"></source>
        <source src="../MainVideos/Main_Sell_web.mp4" type="video/mp4;codecs='avc1.42E01E, mp4a.40.2'"></source>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="720" height="380" id="FLVPlayer">
            <param name="movie" value="FLVPlayer_Progressive.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="scale" value="noscale" />
            <param name="salign" value="lt" />
            <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=<?=VIDEOS?>/BrockMainSellForWebsite&amp;autoPlay=true&amp;autoRewind=true" />

            <param name="swfversion" value="8,0,0,0" />
            <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don&#65533;t want users to see the prompt. -->
            <param name="expressinstall" value="../Scripts/expressInstall.swf" />
            <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="720" height="380">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />

                <param name="scale" value="noscale" />
                <param name="salign" value="lt" />
                <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=<?=VIDEOS?>/BrockMainSellForWebsite&amp;autoPlay=true&amp;autoRewind=true" />
                <param name="swfversion" value="8,0,0,0" />
                <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                <div align="center" style="background-color:#FFF; width:718px; color:#008dd5">
                    <br />
                    <br />

                    <br />
                    <br />
                    <br />
                    <br />
                    <h4>Content on this page requires the newest version of Adobe Flash Player</h4>
                    <p><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></p>
                </div>
                <!--[if !IE]>-->

            </object>
            <!--<![endif]-->
        </object>

    </video>
</div>

Any help is greatly appreciated. Thanks!

2

Do you have the flash file too? Firefox doesn’t support MP4, so I guess it should try the flash instead (if the script works properly).

3

It does work in Firefox if you use an OGG or WEBM video. FireFox doesn’t play MP4s, at least not without Flash.

You have 2 mp4s in your video tag code, which doesn’t really make sense. The browser is just going to play the first one.

With only an MP4, FireFox should be falling back to Flash, however you don’t have the class=“vjs-flash-fallback” on your Flash object, which is needed by VideoJS. Adding that back to the first object might fix your problem.

You also have an object inside another object. I’m not familiar with the Flash player you’re using, but that seems unnecessary.

Hope that helps.

-Heff

4

I don’t think HTML 5 works in Firefox yet? Or maybe im behind in my times :confused: