How to play videos on all major devices and browsers including Firefox?

Question

My goal is to have a video player on a website that supports all major browsers.

I have the videos converted to 4 different videos format, .ogg, .mp4, .webm & .swf.

On the code bellow the html 5 element tries to play the video either mp4, ogg, or webm formats. If this fails, the code "falls back" to try the object element and so the embed element if object also fails.

It seems to work fine on Chrome, Safari, Ipad / Iphone, Android, but I'm having a problem with Firefox and Internet Explorer. It shows me the poster .jpg on all browser and also the following error message on Firefox.

No video with supported format and MIME type found.

Could anyone help me to improve this code or to shoot a few ideas to help me to play videos also on Firefox, Internet Explorer and Safari?

<video width="320" height="240" controls="controls" poster="may_28_2012_F6_HQ.jpg">
  <source src="may_28_2012_F6_HQ.ogg" type="video/ogg" />
  <source src="may_28_2012_F6_HQ.mp4" type="video/mp4" />
  <source src="may_28_2012_F6_HQ.webm" type="video/webm" />
    <object width="320" height="240" data="may_28_2012_F6_HQ.mp4">
      <embed width="320" height="240" src="may_28_2012_F6_HQ.swf">
          Your browser does not support video
      </embed>
    </object>
</video>

Can object and embed even be used like that? Seems to be missing a few attributes ;-) — Ja͢ck

Francis.TM Francis.TM · Accepted Answer · 2012-06-03T03:34:40

I think you should using Javascript to detect the browser, and insert the corresponding video format.

like using jQuery:

if($.browser.mozilla) {
  // using ogg
}else if($.browser.webkit) {
  // using mp4
}else if($.browser.opera) {
  // as webkit
}else {
  // using flash as player
}

How to play videos on all major devices and browsers including Firefox?

3 Answers