Как сохранить значение volume при воспроизведение Video?

Question

Всем привет. В HTML5 Video используется input для управления громкостью. Значение уровня громкости, сохраняется в lacalStorege,при перезагрузке страницы значение в input берется из localStorage, но факически, уровень громкости у видео = 1. Иными словами, ползунок стоит на 0,3, по факту уровень громкости = 1. Где ошибка? https://jsfiddle.net/t9L67hn4/10/

let videoView = document.getElementById("my-video");
let volumeControl = document.getElementById('volume');

volumeControl.addEventListener('input', function () {
    videoView.volume = volumeControl.value;
});

if (localStorage.getItem("volume")) {
  volumeControl.value = localStorage.getItem("volume");
}
volumeControl.addEventListener("change", () => {
  localStorage.setItem("volume", volumeControl.value);
});

<video id="my-video" autoplay controls>
  <source src="https://andew.ru/content/uploads/userfiles/files/2015/08/196/html5-video-example.webm" type='video/mp4'>
</video>
<input type="range" step="0.1" min="0" max="1" id="volume" />

Answer 1

Код скрипта должен выполняться после загрузки DOM

function onReady(fn) {
  if (document.readyState === "complete" || document.readyState === "interactive") {
      setTimeout(fn, 1);
  } else {
      document.addEventListener("DOMContentLoaded", fn);
  }
}

onReady(function() {
  let videoView = document.getElementById("my-video");
  let volumeControl = document.getElementById('volume');

  volumeControl.addEventListener('input', function () {
      videoView.volume = volumeControl.value;
      localStorage.setItem('volume', volumeControl.value)
  }, false);

  volumeControl.value = localStorage.getItem('volume');
});

Вот рабочий вариант: https://jsfiddle.net/frozencoast/3fhc86sk/1/

Answer 2

Вам достаточно просто добавить:

if (localStorage.getItem("volume")) {
  volumeControl.value = localStorage.getItem("volume");
  videoView.volume = volumeControl.value;
}

БЛОГ НА HUSL

Как сохранить значение volume при воспроизведение Video?

Ответы (2 шт):