VideoJS And FireFox HTML5 Video .WebM Format Not Working

Question

UPDATE: It seems buffer the video on FireFox extremely slowly. After about 5 minutes of waiting, the video will play. Howeverm on all other devices, it loads instantly... What's the deal?

QUESTION: How can I make VideoJS play on all browsers, including mobile devices? I thought I did it all according to the VideoJS documentation but I must be missing something.

The website is: http://centerforconfidence.com/addons/stop-tracking-ga/index.php?ct=disable

Situation:
I am using VideoJS and the Embed Form Builder from: http://videojs.com/embed-builder/

I've created my .mp4 video encoded in h.264 from Adobe Premier Pro.
I used AVS video converter to convert that into a .WebM video

On my Andriod Device, the code below works as an embedded video.
On FireFox, it attempts to load the HTML5 video player, but never loads the video.
On IE9, it uses the Flash Fallback.

     <!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="560" height="340" controls preload autoplay poster="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/ImagePreview2.png">
      <source src="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.webm" type='video/webm; codecs="vp8, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object id="flash_fallback_1" class="vjs-flash-fallback" width="560" height="340" type="application/x-shockwave-flash" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" 
          value='config={"playlist":["http://www.centerforconfidence.com/addons/videos/webinar-invite-1/ImagePreview2.png", {"url": "http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.mp4","autoPlay":true,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/ImagePreview2.png" width="560" height="340" alt="Poster Image" 
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.mp4">MP4</a>,
      <a href="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.webm">WebM</a>,
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

Thanks!

Answer 1

Just use .ogv for firefox. Then you will get Internet Explorer support too.