Time intervals on video

Question

In HTML5 using JavaScript on a WEBM video I am trying to display a moving shape on specified time intervals. To determine these time intervals I am using the setTimeout(func, 0) method which returns the current time of the video:

            func() {
                var time = $gVideo.attr('currentTime');
                setTimeout(func, 0);
            }

The problem I encounter is that on different browsers the readings varies a lot. For example Firefox would return:

            [0,10,90,130,210,220,250,340,460,590,760,960,1090,1220,1430,1550,1760,1880,2010,2060,2090,2130,2170,2220,2260,30130,30140,30200,30260,30290,30410,30580,30750,30990,31040,31160,31240,31290,31410,31500,31530,31560] – irregular increments 

Chrome:

            [10,20,30,40 …. 31560] – multiples of 10

Opera:

            [0,10,20,30,40,50,140,230,340,430,520,710,870,1030,1220,1290,1460,1550,1720,1820,1980,1990,2170,2260,2420,2600,2760,2850,3010,3110,3290,3370,3560,3640,3800, …. 31560] – irregular increments

Since it's critical in all the browsers to get the same results like in Chrome, please advise where the flaw in my implementation is. Can be such a big difference in the time values returned by the video implementations in the browsers or it’s a timer problem in JavaScript?

Answer 1

You should not use setTimeout in this case, please try to handle timeupdate event of the video element and get currentTime inside the handler