When calling the play() function, I can see that there's a noticeable delay of 0.0~0.5 seconds before it actually starts playing.
I am facing some problems when using the following event listener
media.addEventListener(
"play",
function(){
toggle_class(button[0], true);
// compute animations for seekbar
time_to_compute = media.duration - media.currentTime;
progress.style = "transition: width linear " + time_to_compute + "s; width:100%;";
}
);
Instead of changing the bar's position on time change, im changing it once and making it animated using a transition. The problem is that the transition starts BEFORE the video plays (0.0~0.5 seconds). This problem happens in both chrome and firefox.
Is there a javascript event for when the video actually plays?
The timeupdate event lets you know when the currentTime property changes, so you could wait to start the animation until the first timeupdate occurs. There's also the playing event that fires when the media starts playing the first time or resumes playing after being paused, so you might be able to use that.
A full list of HTMLMediaElement events can be found on MDN.
That said, I'd be very wary of an animation running in parallel with the video, they're bound to get out of sync. Instead, I'd probably use timeupdate with requestAnimationFrame to update the progress indicator.