videojs 多个视频断点续播

要实现 videojs 多个视频的断点续播，需要考虑以下几个方面：

1. 确认每个视频的唯一标识符，比如视频的 URL 或 ID。
2. 存储每个视频的断点信息，包括上次播放的时间和播放状态。
3. 在视频播放前检查是否存在断点信息，如果存在则从上次播放的时间开始播放。
4. 在视频播放时定期更新断点信息，以确保在下次播放时能够恢复到正确的位置。

具体实现步骤如下：

1. 设置每个视频的唯一标识符，可以使用视频的 URL 或 ID。在这里我们使用视频的 URL 作为唯一标识符。

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  data-setup='{"fluid": true}'>
  <source src="https://example.com/video1.mp4" type='video/mp4'>
  <source src="https://example.com/video1.webm" type='video/webm'>
</video>

<video id="my-video2" class="video-js" controls preload="auto" width="640" height="264"
  data-setup='{"fluid": true}'>
  <source src="https://example.com/video2.mp4" type='video/mp4'>
  <source src="https://example.com/video2.webm" type='video/webm'>
</video>

2. 存储每个视频的断点信息，可以使用本地存储或后端数据库存储。在这里我们使用本地存储。

// 存储断点信息
function savePlaybackPosition(videoId, currentTime, paused) {
  localStorage.setItem(videoId, JSON.stringify({
    currentTime: currentTime,
    paused: paused
  }));
}

// 获取断点信息
function getPlaybackPosition(videoId) {
  var data = localStorage.getItem(videoId);
  return data ? JSON.parse(data) : null;
}

// 删除断点信息
function deletePlaybackPosition(videoId) {
  localStorage.removeItem(videoId);
}

3. 在视频播放前检查是否存在断点信息，如果存在则从上次播放的时间开始播放。

var video = videojs('my-video');

video.ready(function() {
  var playbackPosition = getPlaybackPosition(video.currentSrc());

  if (playbackPosition) {
    video.currentTime(playbackPosition.currentTime);
    if (playbackPosition.paused) {
      video.pause();
    } else {
      video.play();
    }
  }
});

video.on('ended', function() {
  deletePlaybackPosition(video.currentSrc());
});

video.on('timeupdate', function() {
  var currentTime = video.currentTime();
  var paused = video.paused();
  savePlaybackPosition(video.currentSrc(), currentTime, paused);
});

4. 在视频播放时定期更新断点信息，以确保在下次播放时能够恢复到正确的位置。可以使用 videojs 的 timeupdate 事件在视频播放时每隔一段时间更新一次断点信息。

var video2 = videojs('my-video2');

video2.ready(function() {
  var playbackPosition = getPlaybackPosition(video2.currentSrc());

  if (playbackPosition) {
    video2.currentTime(playbackPosition.currentTime);
    if (playbackPosition.paused) {
      video2.pause();
    } else {
      video2.play();
    }
  }
});

video2.on('ended', function() {
  deletePlaybackPosition(video2.currentSrc());
});

video2.on('timeupdate', function() {
  var currentTime = video2.currentTime();
  var paused = video2.paused();
  savePlaybackPosition(video2.currentSrc(), currentTime, paused);
});

以上就是使用 videojs 实现多个视频断点续播的方法。