Time intervals on video
-
01-03-2021 - |
문제
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?
해결책
You should not use setTimeout
in this case, please try to handle timeupdate
event of the video element and get currentTime
inside the handler