Question

I’m trying to dynamically change the video source of a video tag using Knockout. This is the code:

<div data-bind="if: resource().encodingformats() != ''">
    <video style="max-width: 100%;" controls>
        <!-- ko with: resource() -->
        <source data-bind="attr:{ src: webmUrl }" type='video/webm; codecs="vp8, vorbis"'>
        <source data-bind="attr:{ src: oggUrl }" type='video/ogg; codecs="theora, vorbis"'>
        <source data-bind="attr:{ src: mp4Url }" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <!-- /ko -->
    </video>
</div>

I’m using an if binding to make sure that a brand new video tag is rendered whenever the current resource is changed.

This works in all browsers except Firefox. Firefox gives me an error (warning, actually) of

<source> element has no "src" attribute. Media resource load failed.

I’m guessing the source element is getting rendered for a split second without the src attribute set, which is causing it to bomb?

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?

---

EDIT

I should also mention that after using Firebug to look at the html generated, I coped the entire source 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.

The problem most certainly is that Firefox is extremely picky about how the source tags are generated.

Answer 1

It turns out the real problem above is that Firefox fires off the “error” event even when there’s no error.

So, if you’re subscribing to this event so that you can fall back to a flash player for IE8 users, be sure to check your “error” handler to make sure there’s actually an error.

$(videoTag).one("error", function(){
    //sometimes Firefox fires this event even though there's no error :-/
    if (!this.error) return;

Once you do that, Firefox should happily let you bind the video tag’s sources as I did above.