Video timeline scrubbing stutter

[pixistix]

Hi there!

 

I've been incorporating Pixi into a web app, but I'm running into some issues with frame rate when trying to scrub my video. I'm doing the following to setup my video sprite, by downloading the full clip as a blob, then having the texture update when I change the video's time:

 

const xhr = new XMLHttpRequest()
xhr.open("GET", url, true)
xhr.responseType = "blob"
xhr.onload = () => {
  if (xhr.status === 200) {
    const blob = xhr.response
    var videoUrl = URL.createObjectURL(blob)
    const video = document.createElement("video")
    video.src = videoUrl
    const videoTexture = PIXI.Texture.from(video)
    const videoSprite = new IdentifiableSprite(videoTexture, mediaElement.id) // This just extends PIXI.Sprite to add an ID so I can find it in later loops.
    app.stage.addChild(videoSprite)
    videoSprite.texture.baseTexture.resource.source.ontimeupdate = () => {
      videoTexture.update()
    }
  }
}
xhr.send()

Then whenever my mouse moves across that video in the timeline, I'm trying to update the currentTime on the video, like so:

 

const videoElement = videoSprite.texture.baseTexture.resource.source
videoElement.currentTime = time // time is a variable calculated from the mouse's hover position

This is executing incredibly fast, likely well north of 60fps, and the rest of my application is butter smooth as I'm scrubbing my mouse along, so there's no bottlenecks in the sequence of reading the mouse values and updating the time from it. However, the video only updates once every second or two as I move my mouse. If I wrap those two lines in a throttle to ensure it only sets the currentTime every 100ms or so, it works better, but I've gotta be missing something here. How can I get this scrubbing action of moving my mouse across the timeline to be seamless and 30 or 60fps?

[pixistix]

According to timeupdate's docs:

 

Quote

The event frequency is dependant on the system load, but will be thrown between about 4Hz and 66Hz (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the UI updates are not any more frequent than the user agent can comfortably handle while decoding the video.

 

So I'm wondering if there's another way to do this entirely ? I tried onseeked and it seems to be sort of the same problem.