Prevent only seeking forward? Also, I can't call 'seek' inside of the 'Seek' callback

[CyberBill (Bill Carlson)]

Some background - I run an educational website that does video-based training. My training is government approved, and a part of that process is being able to require that users watch the video in its entirety. I can accomplish this by passing in ‘false’ to the ‘seeking’ playback configuration object, which works, but I find that it isn’t a very good experience to my students. I would like them to be able to seek BACK in the video to replay sections if they missed something. As such, I have implemented a solution to try and accomplish this, but it doesn’t work.

My solution is that I have a TimeChanged event handler that stores the event.time (seconds since video start), like this:

player.on(bitmovin.player.PlayerEvent.TimeChanged, function (event) {
     console.log('time changed! time=' + event.time);
     latestPlayTime = event.time;
});

Then I implement a Seek event handler that detects seeking forward, and if detected it seeks to the latest play time:

player.on(bitmovin.player.PlayerEvent.Seek, function (event) {
     console.log('seek event!');
     console.log("seekTarget = " + event.seekTarget);
     console.log("position = " + event.position);

     // Disable seeking forward from the UI
     if (!canSeek) {
          if (event.issuer == 'ui') {
               var delta = event.seekTarget - latestPlayTime;
               // Only allow seeking up to 100ms forward, or anytime back
               if (delta > 0.1) {
                    console.log("Seeking forward is disabled");
                    console.log("Seeking to " + latestPlayTime);
                    player.seek(latestPlayTime);
               }
          }
     }
});

What ends up happening is that the video tends to freeze, sometimes audio continues though, the UI has the ‘loading’ animation tend to get stuck, callbacks stop firing (I’m guessing the player crashed and recreated itself?), and it just generally “doesn’t work”. Sometimes I have also noticed that if I tell it to seek to some value, it seeks to a different one - it sort of splits the difference between where the user wanted to go, and where I tried to limit it.

My request is that if you have any suggestions for how to accomplish this, I’d love to know what I should try! It would be great if you could make a ‘try seek’ or ‘can seek’ callback that I can interface with to get the desired output without having to call ‘seek’ from the ‘Seek’ event handler. Or if you are so inclined to implement a this type of seeking that disallows seeking forward, that would be great!

If you would like to see a demo, I have posted it at https://oft.tv/TestPage

[kazuhide (Kazuhide Yamamoto)]

Hi,

Thanks for reaching out to our community.

To prevent the seek forward for VOD content on the Web player, I think a simple approach is to overwrite the seek function before loading a source. The following code snippet can work on the web to add a restriction for seeking forward.

    player = new bitmovin.player.Player(document.getElementById('player'), conf);

+   const originalSeek = player.seek;
+   player.seek = function (time, issuer) {
+     let diff = time - player.getCurrentTime();
+     if (diff < 0) {
+       // call player.seek() if the seek target time is before the current position. Ignore it otherwise.
+       return originalSeek.apply(this, arguments);
+     }
+   }
    
    player.load(source).then(function () {
        console.log('Successfully loaded source'); // Success!
    }, function () {
        console.log('Error while loading source'); // Error!
    });

The reason why your original code didn’t work well could be because it calls the player.seek() API within the PlayerEvent.Seek event. Since player.seek() triggers the PlayerEvent.Seek event, it creates a circular reference.

Hope it helps. Please let us know if you have any question.

Best Regards,
Kazuhide