Jump to content

Video timeline scrubbing stutter


Recommended Posts

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.
    videoSprite.texture.baseTexture.resource.source.ontimeupdate = () => {

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?

Link to comment
Share on other sites

According to timeupdate's docs:



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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...