Connecting a progress bar to a video box: HELP

Ask the community
, ,
1

Question:
Can someone tell me what is wrong with my code? My progress bar is not connecting to my video event though my ID tags are correct.

Product:
Wix Studio

What are you trying to achieve:
I am trying to get the progress bar to connect with the videos duration.

Here’s my code:

$w.onReady(function () {
  let videoBox1 = $w('#videoBox1');
  let progressBar1 = $w('#progressBar1');

  console.log("videoBox1 element:", videoBox1);

  if videoBox1.isPlaying('timeUpdate', (event) => {
      if (event.duration) {
        let progress = (event.currentTime / event.duration) * 100;
        progressBar1.value = progress;
      }
    });
  } else {
    console.error("Video player element with ID 'videoBox1' not found!");
  }
});
1 Like
2

Hi, @Benjamin_Sullivan !!

Does an event called isPlaying that takes timeUpdate as an argument exist in the Wix API? :upside_down_face:

If that was a misunderstanding on your part, you might need to use setTimeout or setInterval to read the values at intervals of around 500ms and update the progress bar accordingly. :innocent:

2 Likes
3

Hey @onemoretime !

Thank you for the reply. I did try swapping these.
I also went through Wix Ai Assistance and it gave me a new section of code to try but I am still not getting it to function.

$w.onReady(() => {
  // Set the target value of the progress bar
  $w("#myProgressBar").targetValue = 100;

  // Track video progress and update the progress bar
  $w("#myVideoBox").onProgress((event) => {
    let currentTime = event.progress; // Current playback time
    let duration = event.duration;   // Total video duration

    // Calculate progress percentage
    let progressPercentage = (currentTime / duration) * 100;

    // Update the progress bar value
    $w("#myProgressBar").value = progressPercentage;
  });
});
4

@Benjamin_Sullivan

Hmm, I see :innocent:. This is my first time seriously thinking about onProgress, and it turns out to be quite a useful API. With this, there’s no need to use setTimeout or setInterval like I previously suggested. I believe rewriting it like this should work! :smiling_face_with_sunglasses: :raised_hands:

$w.onReady(() => {
  // Set the target value of the progress bar
  $w("#myProgressBar").targetValue = 100;

  // Track video progress and update the progress bar
  $w("#myVideoBox").onProgress((event) => {
    let currentTime = event.target.currentTime; // Current playback time
    let duration = event.target.duration;   // Total video duration

    // Calculate progress percentage
    let progressPercentage = (currentTime / duration) * 100;

    // Update the progress bar value
    $w("#myProgressBar").value = progressPercentage;
  });
});

I tested it on my end, and I was able to confirm that it seems to be working as expected! :relieved_face:

1 Like
5

@onemoretime You are a life saver!

It does seem to be working now - fantastic.

I am wondering if there is a way to improve the animation.
Currently, it is updating in incremental steps, rather then one fluid motion.

Here is the test site so you can see what I mean:

I wonder if there is a more simplistic method of accomplishing this.
Maybe linking a line element instead?

I’d love to hear your thoughts.

Thank you again for all your help!

6

I think the issue is with the update frequency. If onProgress reports the current value once every second, the progress bar will be updated once per second, which will cause it to jump. If it updates every 0.1 seconds, it would be 10 times smoother, which is likely the case here. From what I can observe, the update seems to be happening about every 0.5 seconds. It might be possible to artificially increase the values and interpolate them to make it smoother, but when the progress bar approaches 100 or returns to 0, there might be some challenges with balancing the animation. :innocent: Since the progress bar itself has easing animations, the updates seem to be slightly delayed. :upside_down_face:

1 Like