Возобновить видео Vimeo с последнего хода

У меня есть встроенное видео Vimeo на домашней странице моего сайта, которая настроена на автовоспроизведение при загрузке сайта. Я также использую api и froogaloop.js для некоторых пользовательских элементов управления.

Мне нужно сделать, чтобы сохранить время, в которое посетил видео, когда посетитель переходит на другую страницу, а затем возобновить игру с этой точки, если и когда они вернутся на домашнюю страницу.

Я знаю, что могу использовать playProgress, чтобы получить время, прошедшее, но я не уверен, как сохранить это и как его использовать, когда посетитель вернется на домашнюю страницу.

ИЗМЕНИТЬ

Теперь у меня есть следующий код, и я использую js-cookie для хранения файла cookie прогресса. Как получить значение playProgress и установить его как файл cookie с помощью beforeunload on window? Я не очень разбираюсь в javascript, поэтому помощь будет отличной!

JAVASCRIPT (также включая эту библиотеку 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>

Ответ 1

Вы можете просто прочитать значение сохраненного файла cookie с помощью

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

а затем установите значение видео при загрузке, добавив &t=0m0s в конец URL-адреса.

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

Ответ 2

Я получил эту работу со следующим 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);

};

});

Моя единственная проблема в том, что когда вы возвращаетесь к видео (приостановленному), вам нужно дважды щелкнуть его, чтобы возобновить его, когда кнопка Пауза видна. Кто-нибудь знает, почему это было бы? Это последний кусочек моей головоломки Vimeo!