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

【问题标题】：How do I transition a hero video between two pages using Swup.js without the video restarting on page change如何使用 Swup.js 在两个页面之间转换英雄视频，而无需在页面更改时重新启动视频
【发布时间】：2020-12-20 14:53:38
【问题描述】：

我在使用 Swup.js 在两个页面之间转换英雄视频时遇到问题。

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

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

【问题讨论】：

标签： javascript html5-video swup page-transition

【解决方案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);
});

【讨论】：