title: Play streaming videos on firefox with html5 or flash
body: <p>I am trying to stream video file on web. my server is httpd 2.2 runnin gon centos 5 64 bit. So far it has worked well with ie9, chrome, opera but I have issues with firefox. I cannot rely on a user to have certain plugins installed. I want the video to be able to play in html5 if not supported then roll onto flash. The following is the current code that I have.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;SCRIPT type="text/javascript" src="jquery-1.7.2.min.js"&gt;&lt;/SCRIPT&gt;
  &lt;SCRIPT type="text/javascript" src="modernizr.custom.13466.js"&gt;&lt;/SCRIPT&gt;
  &lt;script type="text/javascript" src="excanvas.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  function supports_canvas() {
        return !!document.createElement('canvas').getContext;
      }
  
  function supports_video() {
      console.log("supports video");
      console.log(document.createElement('video').canPlayType);
        return !!document.createElement('video').canPlayType;
      }
  
  function supports_h264_baseline_video() {
        if (!supports_video()) { return false; }
        var v = document.createElement("video");
        return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
      }
  
  
  function supports_ogg_theora_video() {
        if (!supports_video()) { return false; }
        var v = document.createElement("video");
        return v.canPlayType('video/ogg; codecs="theora, vorbis"');
      }
  
  function supports_webm_video() {
        if (!supports_video()) { return false; }
        var v = document.createElement("video");
        return v.canPlayType('video/webm; codecs="vp8, vorbis"');
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script type="text/javascript"&gt;
  $(document).ready(function() {  
      /*console.log("document ready");
      if ( !supports_video() ) { 
          console.log("false");   
          return false; 
      }
  */
  
      if (Modernizr.canvas) {
            // let's draw some shapes!
          } else {
            // no native canvas support available :(
          }
  });
  &lt;/script&gt;
  
      &lt;!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --&gt;
      &lt;!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --&gt;
      &lt;video width="640" height="360" controls&gt;
          &lt;!-- MP4 must be first for iPad! --&gt;
          &lt;source src="movie.mp4" type="video/mp4" /&gt;
          &lt;!-- Safari / iOS video    
          &lt;source src="movie.ogv" type="video/ogg" /&gt;--&gt;
          &lt;!-- Firefox / Opera / Chrome10 --&gt;
          &lt;!-- fallback to Flash: --&gt;
          &lt;object width="640" height="360" type="application/x-shockwave-flash"
              data="movie.swf"&gt;
              &lt;!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --&gt;
              &lt;param name="movie" value="movie.swf" /&gt;
              &lt;param name="flashvars"
                  value="controlbar=over&amp;amp;image=movie.jpg&amp;amp;file=movie.mp4" /&gt;
              &lt;!-- fallback image. note the title field below, put the title of the video there --&gt;
              &lt;img src="movie.jpg" width="640" height="360" alt="__TITLE__"
                  title="No video playback capabilities" /&gt;
          &lt;/object&gt;
      &lt;/video&gt;
      &lt;!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want 
      &lt;p&gt;
          &lt;strong&gt;Download Video:&lt;/strong&gt; Closed Format: &lt;a
              href="movie.mp4"&gt;"MP4"&lt;/a&gt; Open Format: &lt;a href="movie.ogv"&gt;"Ogg"&lt;/a&gt;
      &lt;/p&gt;--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have placed the following in .htaccess file and httpd conf</p>
  
  <pre><code>AddType video/mp4 mp4
  AddType video/ogg ogg
  AddType video/webm webm
  </code></pre>
  
  <p>I have also loaded the following into httpd</p>
  
  <pre><code>AddHandler h264-streaming.extensions .mp4
  LoadModule h264_streaming_module /usr/lib64/httpd/modules/mod_h264_streaming.so
  </code></pre>
  
  <p>Message in firefox i get is: <em>firefox no video with supported format</em></p>
  
  <p>Any suggestions?</p>