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

问题描述

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

目前，我可以使用名为“ transition-wipe”的自定义类转换视频元素，该类可将视频宽度在页面更改时从50％更改为100％，这种方法可以正常工作，但是当加载下一页时视频会重新启动

是否可以在过渡时暂停视频并从上一个停止播放的位置播放下一个视频？我的目的是使视频在页面之间显得动态，并连续播放而无需重新启动。我似乎找不到任何解决方案，因此任何建议将不胜感激！ ：）

解决方法

您可以使用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);
}

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

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

让您的视频收听timeupdate事件以不断保存上一个位置，并ended事件来重置保存的位置。

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

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