javascript - 如何使用 Swup.js 在两个页面之间转换英雄视频，而无需在页面更改时重新启动视频

Question

我无法使用 Swup.js 在两个页面之间转换英雄视频。

目前，我可以使用名为“transition-wipe”的自定义类转换视频元素，该类在页面更改时将视频的宽度从 50% 更改为 100%，效果很好，但是在加载下一页时视频会重新启动。

有没有办法在转换时暂停视频并从上一个停止的地方播放下一个视频？我的目的是让视频在页面之间呈现动态，并在不重新启动的情况下连续播放。我似乎找不到任何解决方案，所以任何建议都将不胜感激！:)

Answer 1

您可以使用Web Storage API来存储视频在浏览器中的位置。下面是两个抽象，它们使用 获取和设置存储的视频位置localStorage。

/**
 * Returns 0 or the position of the video.
 */
const getVideoPosition = () => {
  return Number(localStorage.getItem('video-position'));
}

/**
 * Saves the video in the current position.
 */
const setVideoPosition = value => {
  localStorage.setItem('video-position', value);
}

每次重新加载选择视频元素后，获取保存的位置并更新currentTime视频的属性以从该位置开始。

const position = getVideoPosition();
video.currentTime = position;

让您的视频监听timeupdate事件以不断保存最后一个位置和ended事件以重置保存的位置。

video.addEventListener('timeupdate', ({ target }) => {
  const { currentTime } = target;
  setVideoPosition(currentTime);
});

video.addEventListener('ended', ({ target }) => {
  setVideoPosition(0);
});