Wznów wideo Vimeo z ostatniego postępu

Question

Mam wbudowane wideo Vimeo na stronie głównej mojej witryny, która jest ustawiona na autoodtwarzanie po załadowaniu strony. Używam również api i froogaloop.js dla niektórych niestandardowych elementów sterujących.

Co należy zrobić, to zapisać czas, w którym wideo się dostało, gdy użytkownik przejdzie na inną stronę, a następnie wznowić odtwarzanie od tego miejsca, jeśli i kiedy powrócą na stronę główną.

Wiem, że mogę użyć numeru playProgress, aby uzyskać czas, który upłynął, ale nie jestem pewien, jak go zapisać i jak go użyć, gdy użytkownik wróci na stronę główną.

EDIT

teraz mam następujący kod, a używam JS-cookie do przechowywania cookie postępu. Jak uzyskać wartość playProgress i ustawić jako plik cookie przy użyciu beforeunload na window? Nie jestem świetny w javascript, więc pomoc byłaby świetna!

JavaScript (w tym także tej biblioteki 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> 

Answer 1

można po prostu odczytać wartość cookie zapisane za pomocą

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

, a następnie ustaw wartość wideo podczas ładowania, dodając na końcu adresu URL: &t=0m0s.

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

Answer 2

mam to działa z następującym 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); 

}; 

}); 

Moim jedynym problemem teraz jest to, że po powrocie do (wstrzymane) VIDEO, trzeba kliknąć dwa razy, aby dostać to, aby wznowić jako przycisk Pause jest widoczny. Czy ktoś wie, dlaczego tak się stało? To jest ostatni element mojej układanki Vimeo!