Search code examples
javascriptjqueryvimeo

How to restore the pause time of vimeo on page reload using localStorage?


I'm trying to create a jquery script to store the pause time of vimeo video so that when he comes back he can watch it from where he left off

jQuery(document).ready(function() {
    player.on('pause', function() {
        console.log("pause");   
    });
});

I want to achieve this using local storage


Solution

  • You already figured out what bricks you needed, now you just need to put them together.

    With the Vimeo Player API, you can fetch the vimeo instance and get the player time when the video pauses.

    Then use the localStorage API to store the data.

    When loading the page, just check localStorage if data is present and use the Vimeo Player API again to set the current time if so.

    let time = localStorage.getItem('videoProgress');
    if(time != null) {
        player.setCurrentTime(time);
    }
    
    player.on('pause', function() {
        player.getCurrentTime().then(function(seconds) {
            localStorage.setItem('videoProgress', seconds);
        });
    });