Remember playback position of a lightbox player when closed

Remembering the playback position of a video when the lightbox closes is quite simple using afterglow's event system.

Let's assume you have this very basic lightbox player setup:

<!DOCTYPE html>
<html>
  <head>
    <title>afterglow player</title>
    <script src="//cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script>
  </head>
  <body>
    <a class="afterglow" href="#myvideo">Launch lightbox</a>
    <video id="myvideo" width="960" height="540">
        <source type="video/mp4" src="/path/to/myvideo.mp4" />
    </video>
  </body>
<html>

All you have to do to make the playback position sort of permanent when the lightbox closes, is this:

var lastposition = 0;

afterglow.on('myvideo', "before-lightbox-close", function(event) {
  // Store the playback time
  lastposition = event.player.currentTime();
});

afterglow.on('myvideo', "ready", function(event) {
  // Load the playback time
  event.player.currentTime(lastposition);
});

That's it. If you wan't to play around with this, take a look at this pen.


Did this page help you?