Как с помощью Swup.js перенести главное видео между двумя страницами без перезапуска видео при смене страницы

Question

У меня возникли проблемы с переходом главного видео между двумя страницами с помощью Swup.js.

В настоящее время я могу выполнить переход элемента видео с помощью настраиваемого класса под названием "transition-wipe", который изменяет ширину видео с 50% до 100% при смене страницы, что отлично работает, однако видео перезапускается при загрузке следующей страницы.

Есть ли способ приостановить видео при переходе и воспроизвести следующее видео с того места, где остановилось предыдущее? Я намерен сделать так, чтобы видео отображалось динамически между страницами и воспроизводилось непрерывно без перезапуска. Я не могу найти никаких решений для этого, поэтому любые предложения будут очень признательны!:)

Answer 1

Вы можете использовать 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);
});