我试图使一个简单的队列系统，播放视频轮流轮流。视频源存储在一个数组中。下面的代码有一个函数，它从数组中获取第一个索引元素，播放该视频，然后从数组中删除该元素。它一次又一次地重复相同的方法，直到在数组中找不到任何元素。
它按预期播放第一个视频，但随后跳过第二个视频（数组元素）并播放第三个视频。我哪里出错了，我该如何修复它？

myArr = ["http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"]

function test() {
  $('#player').attr('src', myArr[0])

  $("#player").on("loadedmetadata", function() {
    myArr = myArr.slice(1)

    var onEnd = setInterval(() => {
      $("#player").on("timeupdate", function() {
        var cTime = this.currentTime;
        var dur = this.duration;
        //console.log(cTime, dur)

        //check if video finished playing
        if (cTime == dur) {
          console.log('video Ended')
          if (myArr.length != 0) {
            clearInterval(onEnd)
            test()
          } else {
            clearInterval(onEnd)
            console.log('all videos played')
          }
        }
      });
    }, 500)
  })
}

test()

video {
  width: 100%;
  height: 60vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video id="player" muted autoplay></video>