jQuery Forum

I'm using a method suggested at DaringFireball to address HTML5 video autobuffering no matter what in Safari. The fix is to have a poster frame that, when clicked, activates jQuery's replaceWith() to replace said image link with the appropriate HTML5 <video> tag.  Example. Bingo, problem solved.  I wanted to do exactly this with a page that has a bunch of short <audio> clips on it, so I tried it.

Turns out that, as reported in this question (with testcase linked) that while this works perfectly in Safari, in Firefox (at least the Mac version, 3.6.3) it results in TWO copies of the video getting thrown on top of each other and playing simultaneously.  Depending on how quickly each starts you can usually hear the echo, and if you pause the visible one you'll hear the audio from the second continue to play.  The same thing happens on the above-linked DF example.

I had run into this exact behavior in my version of the same thing using the <audio> tag--weird echo in Firefox as it plays two copies of the same sound file.

It's possible that this is a bug in Firefox, not jQuery, but doing a simplified "document.getElementById('test').innerHTML = '<video>'" version resulted in the expected behavior, with only one copy.

I put together a simple audio-only testcase here (it's a short audio clip, but if you pause it after it starts playing you'll notice the invisible copy keeps playing).  The whole code:

I'm a novice at JS (and jQuery), so maybe I'm missing something obvious here; if jQuery is fine and it's something I and the above-linked question are both doing wrong, I apologize.

If jQuery isn't fine, any idea what's up with this?  Is it an actual bug or just unintended behavior?