How can I seamlessly loop a video (webm since it has transparencies) in javascript canvas?

Question

I am trying to play a video from beginning to 10 seconds, then loop the video from second 3 to 10 untill a key "c" is pressed. if it is pressed once, play the video from where it is currently in the loop untill the end (about 14 seconds). When video plays from seconds 10 on start a new instance of the video (or a different one while the first one is still finishing).

the loop kind of works, it loops the video from second 3 till 10 indefinately. But it also includes seconds 0 till 3 as empty frames which causes flickering. How do I "cut" the empty seconds and play only the frames I want to loop? (javascript canvas)

 draw(context) {
    // Get a reference to the video element
    var video = document.getElementById("playerVideo" + this.playernumber);
  
    // Check the readyState of the video
    if (video.readyState >= video.HAVE_ENOUGH_DATA) {
      // If the video has fully loaded, start playing it
      video.play();
    }
  
    // Set the playback rate of the video to a value close to 1
    if (this.playernumber <= 6) {
      video.playbackRate = 0.48;
    }
     else {
      if (
        video.currentTime <= video.duration - video.duration + 2.5 ||
        video.currentTime >= video.duration - 2.5
      ) {
        this.game.speed = 20;
        console.log(video.duration);
        video.playbackRate = 0.83;
      } else {
        this.game.speed = 7;
        video.playbackRate = 0.48;
      }
      video.loop = true;
      
      video.play();
    }
    if (video.currentTime >= 10) {
        video.currentTime = 3;
      }
      document.addEventListener("keydown", (event) => {
        if (event.key === "c" && video.currentTime >= 3 && video.currentTime <= 10) {
          video.loop = !video.loop;
        }
      });
    // Draw the video frame on the canvas
    context.drawImage(this.image, this.x, this.y);
  
    video.addEventListener("loadedmetadata", function() {
      // Set the dimensions of the canvas to match the video
      canvas.width = this.videoWidth;
      canvas.height = this.videoHeight;
  
      // Start the video
      this.play();
    });
  
    // Handle the "c" key press
    
  
    // Check if the video has reached its full duration
    if (video.currentTime >= video.duration) {
      // If it has, reset the currentTime to 0 to start the video over again
      video.currentTime = 0;
  
      // Play a randomly selected video from a preloaded set of 6 videos
      this.playernumber = 8;
      video = document.getElementById("playerVideo8");
      
    }
  }