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

Question

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

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

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

Answer 1

您可以使用 Web Storage API to store the position of the video in the browser. Here below are two abstractions that get and set the stored video position with 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);
}

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

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

让您的视频收听 timeupdate event to constantly save the last position and the ended 事件以重置保存的位置。

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

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

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

How do I transition a hero video between two pages using Swup.js without the video restarting on page change

javascript

html5-video

page-transition

swup