[Video.js]プレイヤーの音量を保存したい

状況
対応手順
1. サンプルコード

状況

Video.jsのプレイヤーで、画面遷移したりブラウザを閉じて再度開いたときに、音量が初期状態に戻ってしまいます。

対応手順

サンプルコード

// Video.js プレーヤーの初期化
const player = videojs('my-player');

// プレーヤーの準備ができたときの処理
player.ready(() => {
  // ローカルストレージから音量を取得
  const savedPlayerVolume = localStorage.getItem('videoPlayerVolume');
  // ローカルストレージからミュート状態を取得
  const savedPlayerVolumeMute = localStorage.getItem('videoPlayerVolumeMute');
  
  // 保存された音量があれば設定
  if (savedPlayerVolume !== null) {
    player.volume(parseFloat(savedVolume));
  }
  // 保存されたミュート状態があれば設定
  if (savedPlayerVolumeMute !== null) {
    player.muted(savedPlayerVolumeMute === 'true');
  }
  
  // 音量変更イベントの監視
  player.on('volumechange', () => {
    // 現在の音量をローカルストレージに保存
    localStorage.setItem('videoPlayerVolume', player.volume());
    // 現在のミュート状態をローカルストレージに保存
    localStorage.setItem('videoPlayerVolumeMute', player.muted());
  });
});

音量とミュート状態の保存
- イベントリスナー volumechange イベントでプレイヤーの音量の変化を監視します。
- player.volume()で現在の音量を取得します。取得した音量は0〜1の範囲で小数値として返されます。
- localStorage.setItem(key, value)でlocalStorageに現在の音量を保存します。
- player.muted()で現在のミュート状態を取得します。
- localStorage.setItem(key, value)でlocalStorageに現在のミュート状態を保存します。
音量とミュート状態の復元
- プレーヤーが初期化される際に、localStorage.getItem(key)でlocalStorageから
  - 音量を取得し、player.volume()でプレーヤーに適用します。
  - ミュート状態を取得し、player.muted()でプレーヤーに適用します。