fix: if avaliable requestVideoFrameCallback() instead of request animation frame for better subtitle sync

[brys0]

Chrome and other browsers now offer the use of requestVideoFrameCallback() which will allow a callback function to be run on every video frame. This should be more consistent then something like requestAnimationFrame. In my experience when dealing with sync issues using requestVideoFrameCallback() helped greatly for a move smooth experience.

[weizhenye]

Most anime video frame is 24 fps, while requestAnimationFrame match the display refresh rate, most common is 60 fps.

Isn't requestAnimationFrame better than requestVideoFrameCallback?

[weizhenye]

And requestAnimationFrame is only used for checking when a subtitle should display, not used for animations.

Animations (\t()) is implemented with Web Animation API, which may be same as requestAnimationFrame, but we have no way to change Web Animation API to use requestVideoFrameCallback.

[brys0]

requestVideoFrameCallback() is meant to be more accurate in terms of getting a time on the video, chrome's currentTime is purposely inaccurate to avoid fingerprinting, but requestVideoFrameCallback includes metadata.mediaTime, which should be more frame perfect. At least in my testing it appears to be more accurate then just using requestAnimationFrame(), but your mileage may vary.

See: https://stackoverflow.com/questions/70667611/htmlmediaelement-currenttime-does-not-appear-to-advance-between-requestmediafram

[weizhenye]

Oh, I got your point.

media.currentTime precision might be 100ms, only 10 fps, requestVideoFrameCallback is a better than it.

[brys0]

Precisely, sorry if I didn't make myself very clear, but yes, it should be a fair bit more accurate then using requestAnimationFrame for displaying subtitles at the right time.