HTML5, Firefox playing duplicate videos after jQuery insert.

Question

Hello,

I've extracted the following from a project we are working on:

http://www.bridgedev1.com/videotest.html

This plays an OGV or M4V video depending on the browser, as one would expect.

The page is loaded, then the video inserved using jQuery. This works perfectly in Safari and Chrome.

The problem is that in Firefox (3.6.3). When you pause the video, a second copy of the video is still playing.

Deleting the video element in Firebug removed the first, visible, video but left the soundtrack of a second video playing. The Network Traffic tab also revealed the 7.2 MB video was also loading twice.

This problem occurs on both Windows and Mac, and is worse on the PC.

Can anyone offer a soloution?

Thanks

Jim

Answer 1

We've had very mixed results cross-browser using jQuery to insert the video tag. (IE is especially bad.)

Our workaround has been to hardcode the video tag, and then to adjust the attributes and to use .append() for adding sources.

Best,

Zach

Developer, LongTail Video

Answer 2

I know this question is a few months old but I was having the same issue and found a solution.

In the html of my page I have the following div:

<div id="Video"></div>

This div serves as a placeholder for the flash player that is used for flv videos and for IE & Firefox. If the video is an MP4 and the browser supports .H264 video, javascript is used to replace the div with an HTML5 video tag.

At first I included the src attribute in the video tag. This caused the problem you experienced: the video sometimes played twice, the audio was doubled. Inserting first then setting src afterward seems to fix the issue.

    if (canPlayH264() && isMP4) { //HTML5       

$("#Video").replaceWith('<video id="HTML5Video" controls />');  
$("#HTML5Video")[0].src = "thefile.mp4";
$("#HTML5Video")[0].play();