Resume Vimeo video from last progress

Question

I have an embedded Vimeo video on the homepage my site, which is set to autoplay when the site loads. I am also using the api and froogaloop.js for some custom controls.

What I need to do is save the time the video has got to when a visitor navigates to another page, then resume playing from this point if and when they return to the homepage.

I know I can use playProgress to get the time elapsed, but am not sure how to store this and how to use it when the visitor returns to the homepage.

EDIT

I now have the following code, and am using js-cookie to store the progress cookie. How would I get the value of playProgress and set it as a cookie using beforeunload on window? I am not great at javascript so help would be great!

JAVASCRIPT (also including this library https://github.com/js-cookie/js-cookie)

$(function() {
    var iframe = $('#player1')[0];
    var player1 = $f(iframe);
    var status1 = $('.status1');

// When the player is ready, add listener for playProgress
    player1.addEvent('ready', function() {
        status1.text('ready');
        player1.addEvent('playProgress', onPlayProgress);
    });

    function onPlayProgress(data, id) {
        status1.text(data.seconds + ' seconds played');
    };

    // SETTING A COOKIE
    Cookies.set('timeElapsed','something');
});

HTML

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class="videoholder">
    <h3>Player 1</h3>
    <iframe id="player1" src="https://player.vimeo.com/video/142216434?api=1&player_id=player1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div>
        <p><span class="status1">&hellip;</span></p>
    </div>
</div>

Ridglee

use cookies or database – Cariecaries

use sessionstorage or localstorage or cookies – Tuttifrutti

Answer 1

You can simply read the value of the cookie saved using

function onPlayProgress(data, id) {
     Cookies.set('timeElapsed', data.seconds);
     status1.text(Cookies.get('timeElapsed') + ' seconds played');
}

and then set the value of the video when it is being loaded by appending &t=0m0s at the end of the url.

$('#player1').attr('src','https://player.vimeo.com/video/142216434?api=1&player_id=player1&t='+timeElapsed)

Winna

Thanks. I need to get the value of playProgress to be the cookie, and for this to be set as the user leaves the page using beforeunload so it reflects the last part of the video the user has seen – Ridglee

On play progress, update the cookie every time the function runs. i.e. every second the cookie will be updated. As long as the cookie name stays the same, the cookie will represent the value you want! :) – Winna

Thanks that got me on the right track, I have posted what I have now below which seems to be working :) – Ridglee

Best of luck with your journey into Javascript! – Winna

Answer 2

I got this working with the following javascript:

$(function() {
var iframe = $('#player1')[0];
var player1 = $f(iframe);

// When the player is ready, add listener for playProgress
player1.addEvent('ready', function() {

    player1.api('seekTo',(Cookies.get('timeElapsed')));

    player1.api('pause');

    player1.addEvent('playProgress', onPlayProgress);
});

function onPlayProgress(data, id) {

  Cookies.set('timeElapsed', data.seconds);

};

});

My only issue now is that when you return to the (paused) video, you need to click twice to get it to resume as the Pause button is visible. Does anyone know why this would be? This is the last piece of my Vimeo puzzle!

Ridglee