Skip navigation
Currently Being Moderated

HTML5 - Specifying multiple video formats for compatibility

Feb 2, 2014 9:35 AM

I have some code that will allow a video to play in Firefox without using the Divx player:

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

    <script type="text/javascript">
    function changevid() {
       document.getElementById('vid').innerHTML = '<source src="Filename.mp4" type="video/mp4" />';
       document.getElementById('vid').load();
    }
    </script>
</head>


<body>
<body onload="changevid()">
       <video id="vid" width="800" height="450" <video ... autoplay="autoplay" loop="loop" controls="controls" poster="Poster-image-test.jpg">    
       </video>
    </body>
</body>
</html>


It works quite well. But I got the code from an old forum post, and can't honestly say I understand what it's doing. What I need to do now is specify a second version of the video - as a WEBM - so that anything that can't play one format will use the other. Any ideas how might I go about adding that second video to the code?

 
Replies
  • Currently Being Moderated
    Feb 2, 2014 9:51 AM   in reply to Mick8888

    To support all modern browsers and web devices, you must use an HTML5 doc type with 3 file types:

    • OGV
    • WEBM
    • MP4 or M4V for web

    If you don't already have a file converter, use free Miro Video Converter.

    http://www.mirovideoconverter.com/

     

    Copy & Paste the following HTML5 code into a new, blank page.  Change yourvideo to your actual path/video file name.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Video</title>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    </head>
    <body>
    
    <!--begin video-->
    <video width="800" height="450" poster="Your_poster_image.jpg" controls autoplay loop >
         <source src="yourvideo.webm" type="video/webm">
         <source src="yourvideo.ogv" type="video/ogg">
         <source src="yourvideo.mp4" type="video/mp4">
         NOTE: If you see this, you're using an 
         outdated browser that doesn't support 
         the video tag. 
    </video>
    <!--end video-->
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 10:23 AM   in reply to Mick8888

    That's why you need OGV.

    Forget about that JavaScript.  You don't need it if you use HTML5 <video>.

     

     

     

     

    Nancy

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 11:06 AM   in reply to Mick8888

    Might be a missing MIME type on your server.

    What's the URL to your test page?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 11:35 AM   in reply to Mick8888

    You shouldn't tolerate inferior hosting. There's lots of reliable web hosts that don't cost an arm & a leg .

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 11:48 AM   in reply to Mick8888

    Mick,

    In the meantime,  try this code with 3 sample videos -- approx 6 seconds in length.

    Tested and works locally in IE10 & latest versions of FF, Opera & Chrome.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Video</title>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    </head>
    <body>
    
    <!--begin video-->
    <video width="800" height="450" poster="Your_poster_image.jpg" controls autoplay loop >
     <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    NOTE: If you see this, you're using an 
    outdated browser that doesn't support 
    the video tag. </video>
    <!--end video-->
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 12:35 PM   in reply to Mick8888

    I suspect your FF preferences are setup to use DivX as your default media player.

    In FF, go to Tools > Options > Applications.  Search: MP4.  Which player is listed?

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 12:56 PM   in reply to Mick8888

    OK.  So your operating system is opening movies in DivX Player.

    http://osxdaily.com/2009/10/25/change-file-associations-in-mac-os-x/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 2:44 PM   in reply to Mick8888

    All I can tell you is that I have Windows and I have no problems playing HTML5 videos in FF, Opera, Chrome or IE.  If I had a player that took over my system this way, I would uninstall it ASAP.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 3:49 PM   in reply to Mick8888

    In FF, Wilma seamlessly does one complete turn  and then stops.   Loop is not well supported yet.  Some browsers do it, some don't. 

     

    In IE, the playback is a bit jagged, but loop is working.

     

    Overall, Chrome gives the best playback quality.  Seamless, and loop is working.

     

    You have a stray </body> tag at the bottom of your code.  Remove it.

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points