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>

use cookies or database – bibliophilsagar Oct 14 '15 at 12:21 — bibliophilsagar, Oct 14 '15 at 12:21
use sessionstorage or localstorage or cookies – J Santosh Oct 19 '15 at 13:51 — J Santosh, Oct 19 '15 at 13:51

Dean Meehan · Answer 1 · 2015-10-27T14:41:53.907

6

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)

edited Oct 27 '15 at 14:41

answered Oct 19 '15 at 13:35

Dean Meehan

2,511
22
36

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 – Mike Harrison Oct 19 '15 at 13:37
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! :) – Dean Meehan Oct 19 '15 at 13:39
Thanks that got me on the right track, I have posted what I have now below which seems to be working :) – Mike Harrison Oct 19 '15 at 14:20
Best of luck with your journey into Javascript! – Dean Meehan Oct 19 '15 at 14:37

Mike Harrison · Answer 2 · 2015-10-26T09:49:10.737

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!

Resume Vimeo video from last progress

2 Answers2