Обновление страницы с фоновым видео

Question

На моем сайте, на фоне проигрывает видео.Как я могу сделать возобновление видео на той же точке, когда я иду на другую страницу?Обновление страниц с помощью AJAX.Я попытался решить это маленьким скриптом на главной странице:

<script>
var vid = document.getElementById("video");
vid.addEventListener("canplay", function(e) {
  var currTime = this.currentTime;
  this.play();
 }, false
);
</script>

Другой скрипт, на другой html-странице, где я хочу продолжить мое видео:

<script>
var vid = document.getElementById("myVideo");
    vid.addEventListener("canplay", function(e) {
    this.currentTime = currTime;
    this.play();
 }, false
 );
</script>

ЯПолучение следующей ошибки:

Uncaught ReferenceError: currTime is not defined
at HTMLVideoElement.<anonymous>

Прав ли я с этим решением?Будет ли это работать, если бы я мог исправить эту ошибку?Если ответ: да, как я могу глобализировать это "currTime"?Спасибо.

Обновлено: HTML-код для видео:

<video loop muted autoplay poster="../static/images/wallpaper.png" class="fullscreen-bg__video" id="video"> <source src="../static/videos/wallpaper.mp4" type="video/mp4"> <source src="../static/videos/wallpaper.webm" type="video/webm"> </video>

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin:0;
}

на странице, где я получаю приостановленное видео с тем же кодом, но с другимID.

Answer 1

<script>
var vid = document.getElementById("video");
vid.addEventListener("canplay", function(e) {

localStorage.setItem("videoTime", this.currentTime);
  this.play();
 }, false
);
</script> 

ПРИМЕЧАНИЕ: localStorage.setItem("videoTime", this.currentTime) выполняется только ONCE .Вы можете установить время с помощью setInterval() каждую секунду для нового значения.

setInterval(() => {localStorage.setItem("videoTime", this.currentTime);},1000);

После перезагрузки получить элемент с помощью:

        <script>
    var vid = document.getElementById("myVideo");
        vid.addEventListener("canplay", function(e) {
        if(localStorage.getItem("videoTime") !== null) {
           this.currentTime = localStorage.getItem("videoTime");
        }

        this.play();
     }, false
     );
    </script>

ОБНОВЛЕНИЕ:

Проверено на моей машине.Работает с любым .html файлом.Просто вставьте это как скрипт:

<script>
        window.onload = () => {
            var vid = document.getElementById("video");
            if(localStorage.getItem("videoTime") !== null && localStorage.getItem("videoTime") !== undefined) {
                vid.currentTime = localStorage.getItem("videoTime");   }                  

setInterval (() => {localStorage.setItem ("videoTime", vid.currentTime);}, 1000);}

        </script> 

1. выполнить скрипт после загрузки окна.
2. получить vid как HTMLElement
3. проверить, существует ли запись localStorage с ключом vidTime.
4. если да, установите время показа с помощью vid.currentTime = localStorage.getItem("videoTime");
5. обновлять каждую секунду новое видеоВремя: setInterval(() => {localStorage.setItem("videoTime", vid.currentTime);},1000);