CODEWITHSUNDEEP
javascriptjqueryvimeovimeo-api
Mike Harrison
Mike Harrison

Reputation: 776

Resume Vimeo video from last progress

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>

Upvotes: 17

Views: 6631

Answers (2)

Dean Meehan
Dean Meehan

Reputation: 2636

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)

Upvotes: 6

Mike Harrison
Mike Harrison

Reputation: 776

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!

Upvotes: 1

Related Questions