title: Dynamic Video Tag and Knockout JS
body: <p>I'm trying to dynamically change the video source of a <code>video</code> tag using Knockout.  This is the code:</p>
  
  <pre><code>&lt;div data-bind="if: resource().encodingformats() != ''"&gt;
      &lt;video style="max-width: 100%;" controls&gt;
          &lt;!-- ko with: resource() --&gt;
          &lt;source data-bind="attr:{ src: webmUrl }" type='video/webm; codecs="vp8, vorbis"'&gt;
          &lt;source data-bind="attr:{ src: oggUrl }" type='video/ogg; codecs="theora, vorbis"'&gt;
          &lt;source data-bind="attr:{ src: mp4Url }" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
          &lt;!-- /ko --&gt;
      &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using an <code>if</code> binding to make sure that a brand new video tag is rendered whenever the current resource is changed.</p>
  
  <p>This works in all browsers except Firefox.  Firefox gives me an error (warning, actually) of </p>
  
  <pre><code>&lt;source&gt; element has no "src" attribute. Media resource load failed.
  </code></pre>
  
  <p>I'm guessing the <code>source</code> element is getting rendered for a split second without the <code>src</code> attribute set, which is causing it to bomb?</p>
  
  <p>Is there an easy way to fix this?  I suppose I could just bind the entire video's html, but that seems overly sloppy.  Is there an easy way to get Firefox to work with the same code that otherwise works fine in IE9?</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I should also mention that after using Firebug to look at the html generated, I coped the entire <code>source</code> tags into my code, and that worked fine.  In other words, I ditched the knockout bindings for a minute, and copied in the html that knockout was generating, and everything worked.</p>
  
  <p>The problem most certainly is that Firefox is extremely picky about how the source tags are generated. </p>