Как продолжить воспроизведение видео с последнего момента для каждого видео в плейлисте?

Question

Я пытаюсь отследить последний момент, когда видео было включено, и после обновления страницы загрузить видео с этого момента. Но я не могу сделать это для всех видео в плейлисте. Я уже пытался использовать querySelectorAll (". Scroll video source") , но как только я пытаюсь найти источник в querySelectorAll, отслеживание перестает работать по какой-то причине. Как я могу это сделать и что я делаю не так?

Вот мой код:

HTML

 <div class="scroll">
<video id="myVideo" class="video" width="640" height="360" controls>
  <source src="videoplayback.mp4" type="video/mp4">
  <source src="videoplayback2.mp4" type="video/mp4">
</video>
<ul>
  <li><a href="videoplayback.mp4">Vid1 </a></li>
  <li><a href="videoplayback2.mp4">Vid2</a></li>

</ul>
</div>

JS

//TRACKING CODE
        var video = document.querySelectorAll(".scroll video")[0];

        video.ontimeupdate = function () {
          localStorage.setItem('time', this.currentTime);
      };

      window.onload = function(){
          let time = localStorage.getItem('time');

            video.currentTime = time;

      };

Кроме того, когда я пытаюсь отследить последний момент видео номер два, я переключаюсь на видео номер один, и я не хочу, чтобы он работал.

SCREENSHOT

https://i.stack.imgur.com/mxsIy.png

Этот момент на скриншоте в 1 минуту 10 секунд был из видео 2, но переключился на момент из видео 1. Как я могу это исправить?

Заранее спасибо за помощь!