jQuery 从上次进度开始继续播放 Vimeo 视频

在本文中，我们将介绍如何使用jQuery代码来控制Vimeo视频的播放，以便从上次观看的进度继续播放视频。

视频回顾

Vimeo是一个流行的视频分享平台，它提供了一个强大的API，使我们能够在网页中嵌入和控制Vimeo视频。我们可以使用Vimeo提供的JavaScript库Vimeo Player SDK来实现这个目标。

初始化Vimeo播放器

首先，我们需要将Vimeo Player SDK引入我们的网页中，确保在初始化之前完成：

<script src="https://player.vimeo.com/api/player.js"></script>

然后，在我们的HTML中创建一个容器来放置Vimeo播放器：

<div id="vimeo-player"></div>

接下来，我们使用jQuery来初始化Vimeo播放器：

$(document).ready(function() {
  var player = new Vimeo.Player('vimeo-player');
});

这样，我们就成功地初始化了Vimeo播放器。

从上次进度开始播放

我们想要实现的目标是，在用户离开页面后返回时，从他们上次观看的进度开始继续播放视频。为了实现这一点，我们需要在用户观看视频时监听他们的进度，并将其保存到本地存储中。

$(document).ready(function() {
  var player = new Vimeo.Player('vimeo-player');

  // 监听播放进度
  player.on('timeupdate', function(data) {
    var currentTime = data.seconds;

    // 保存当前进度到本地存储
    localStorage.setItem('vimeo_progress', currentTime);
  });
});

在这个代码段中，我们使用了Vimeo Player SDK提供的timeupdate事件来监听播放进度。每当播放器更新当前时间时，我们将其保存到本地存储中。

接下来，在页面加载时，我们使用保存在本地存储中的值来设置视频的起始时间：

$(document).ready(function() {
  var player = new Vimeo.Player('vimeo-player');

  // 监听播放进度
  player.on('timeupdate', function(data) {
    var currentTime = data.seconds;

    // 保存当前进度到本地存储
    localStorage.setItem('vimeo_progress', currentTime);
  });

  // 从上次观看的进度开始播放
  var savedProgress = localStorage.getItem('vimeo_progress');
  if (savedProgress) {
    player.setCurrentTime(savedProgress);
  }
});