从上次进度恢复 Vimeo 视频答案

【问题标题】：Resume Vimeo video from last progress从上次进度恢复 Vimeo 视频
【发布时间】：2016-01-12 12:25:00
【问题描述】：

我的网站主页上有一个嵌入的 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');
});

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>

【问题讨论】：

使用 cookie 或数据库
使用会话存储或本地存储或cookies

标签： javascript jquery vimeo vimeo-api

【解决方案1】：

您可以简单地读取使用

保存的 cookie 的值

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

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

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

【讨论】：

谢谢。我需要将playProgress 的值作为cookie，并在用户使用beforeunload 离开页面时对其进行设置，以便它反映用户看到的视频的最后部分
播放进度，每次运行时更新cookie。即每秒都会更新 cookie。只要cookie名称保持不变，cookie就会代表你想要的值！ :)
谢谢你让我走上正轨，我已经在下面发布了我现在拥有的东西，它似乎正在工作:)
祝您在 Javascript 之旅中好运！

【解决方案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 拼图的最后一块！

【讨论】：