VideoJS and FireFox HTML5. The .WebM format does not work.

Question

UPDATE : it seems that the video buffers on FireFox are very slow. After about 5 minutes of waiting, the video will play. However, on all other devices it loads instantly ... What's the deal?

QUESTION How can I make VideoJS play in all browsers, including mobile devices? I thought I did all this in accordance with the VideoJS documentation, but I have to miss something.

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

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

I created my .mp4 video encoded in h.264 from Adobe Premier Pro.
I used the AVS video converter to convert it to .WebM video.

On my Andriod device, the code below works like embedded video.
In FireFox, he tries to download an HTML5 video player, but never downloads a video.
IE9 uses 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 also get Internet Explorer support.