Why does video playback slow down if playback is controlled through html5-video events?

Question

HTML

It is necessary to make "bookmarks" on the video - playing pieces of the video at a specified interval. This is convenient when there is a lecture (about 1 hour), and users sometimes need to watch or several techniques that take 5-10 minutes. Searching and scrolling for the user himself is also not very convenient.

<video id="video" tabindex="0" loop="loop" controls="controls" width="480" height="360">
        <source src="day1.mp4" type="video/mp4;" />
</video>
          <p><a id="fastFwd"  onclick="skip(60, 68)">Отрезок 1</a></p>
          <p><a id="fastFwd"  onclick="skip(300, 308)">Отрезок 2</a></p>

function skip(value, endtimeoffset) {
        var video = document.getElementById("video");
        video.currentTime = value;
        video.play();
    video.addEventListener("timeupdate", function() {
      if (video.currentTime >= endtimeoffset) {
      video.pause();
    }}, false);

Somehow it works crookedly when the user clicked and started watching one segment, then clicked another. The second is played with a delay of several seconds, if the user does not start to panic and poke randomly in different segments, then the video turns on. How to make a segment that does not turn on first be played immediately, or at least show that playback will start now - wait a couple of seconds?

Answer 1

It is better to put var video = document.getElementById("video");it in a separate function that will only work when the video is loaded. You are parsing the DOM every time.

function skip(value) {
        video.currentTime = value;
}

Works without delay.
Well, caching can be the reason.