从最后的进度恢复Vimeo视频

Resume Vimeo video from last progress

本文关键字：Vimeo 视频 恢复 最后的      更新时间：2023-09-26

我在我的网站主页上嵌入了一个Vimeo视频，当网站加载时设置为自动播放。我还使用api和froogaloop.js的一些自定义控件。

我需要做的是节省视频的时间，当访问者导航到另一个页面，然后从这一点继续播放，如果和当他们返回到主页。

我知道我可以使用playProgress来获得经过的时间，但我不确定如何存储它以及当访问者返回主页时如何使用它。

编辑

我现在有以下代码，并使用js-cookie来存储进度cookie。我如何获得playProgress的值并将其设置为使用window上的beforeunload的cookie ?我不擅长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');
});


<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>

您可以简单地使用

读取保存的cookie的值
function onPlayProgress(data, id) {
     Cookies.set('timeElapsed', data.seconds);
     status1.text(Cookies.get('timeElapsed') + ' seconds played');
}

，然后通过在url的末尾附加&t=0m0s来设置视频加载时的值。

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

我得到了这个工作与以下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拼图的最后一块!

相关文章：