Firefox html5 video rewinds instead of playing

Question

I am using video tag on my website. It works with every major browser, but I am running into issues with Firefox.

When I tap on the play button video scrolls to the end of video!

In order to start the video I need to rewind video to position other than start and than click on play. Weird. I tried to set initial position of video to 1s but it didn't help. I still need to scroll it manually. Any help will be appreciated. Thank you

<video width="80% height="80%" controls id="video1">
          <source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.mp4" type="video/mp4">
          <source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.ogv" type="video/ogg">
          <source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.webmhd.webm" type="video/webm">
          Your browser does not support the video tag. 
</video>

Javascript:

V I D E O */

function setupVideo(){ if(!myVideo){ console.log("Setting up video"); myVideo=document.getElementById("video1"); timeElapsed = 0; timer;
```
    myVideo.addEventListener("play",videoStarted,false);
    myVideo.addEventListener("pause",videoPaused,false);
    myVideo.addEventListener("loadeddata",videoLoaded,false);

        console.log(" Video Element is: "+myVideo);

}
else{
    console.log("Video Was Already set");
    playPause();
    }
```
}

function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); }

function videoLoaded(e) { console.log(" Video Loaded "); myVideo.currentTime = 1; }

function videoStarted(e) { console.log("Video Started"); //start the timer timer = setInterval(videoPlaying,1000); }

function videoPlaying(){ timeElapsed ++; console.log("Video Playing "+myVideo.currentTime);
```
if(Math.ceil(myVideo.currentTime)== 10)
{
    console.log(" it reached 10  now display quiz");
    playPause();

}
```
}

function videoPaused(e) { clearInterval(timer); console.log("Pause"); }

Can you clean up the source code indenting a little bit, please? I tried but the code thwarted me somehow and I didn't want to inadvertently edit your code. Basically, highlight block of text and select code indent ("{}" icon). — Multimedia Mike, Mar 11 '13 at 21:36

mark4o · Accepted Answer · 2013-03-12T17:40:28.680

1

Your WebM or OGV video may have negative or invalid timestamps. Some software produces video that starts at a time slightly less than zero, particularly if the audio and video frames are not aligned to start at the same time. (That is, the video may start slightly before 0 and the audio may start at 0.)

If the video is produced with ffmpeg, try using the option -avoid_negative_ts 1.

If you have the mkvtoolnix package installed you can view the timestamps in a webm file with the command mkvinfo -s file.webm.

edited Mar 12 '13 at 17:40

answered Mar 11 '13 at 21:40

mark4o

58,919
18
87
102

Thanks! It looks like a video issue. I used miro video converter. How can I check if the timestamp is correct? In other words is there a way to validate the video? – Janusz Chudzynski Mar 12 '13 at 13:57
@Janusz You can view webm timestamps with `mkvinfo -s` *file*.webm (I just added this to the answer). – mark4o Mar 12 '13 at 17:43

Firefox html5 video rewinds instead of playing

1 Answers1