如何使用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);
});