<figure class="wp-block-video aligncenter"><video autoplay loop muted src="https://xxxxxxxx/xxxxx/xxxxx.mov" playsinline></video></figure>

<a href="https://nagoyaaqua.jp/calendar/">名古屋港水族館のご案内</a>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="hls" preload="metadata" controls="" autoplay="" loop="" muted="" width="100%" playsinline="" poster="サムネのURL"></video>
<p id="currentCameraCaption"></p>

<script>
  var cameras = ['coralreef', 'coralreef', 'dolphin', 'kuroshio', 'livingcoral', 'beluga', 'umigame', 'penguin'];
  var video = document.getElementById("hls");
  var currentCameraCaption = document.getElementById("currentCameraCaption");
  video.volume = 0.5;
  var config = { maxBufferLength: 12, maxBufferSize: 10 * 1000 * 1000 };

  // 初期設定の日付
  var initialDate = new Date('2024-02-23T00:00:00+09:00');

  // 初回のカメラ設定
  setInitialCamera();

  // 初回のカメラ設定関数
  function setInitialCamera() {
    var currentDate = new Date();
    var timeDifference = currentDate - initialDate;

    // カメラを設定
    var initialCameraIndex = Math.floor(timeDifference / (24 * 60 * 60 * 1000)) % cameras.length;
    var initialCamera = cameras[initialCameraIndex];
    setCurrentCamera(initialCamera);
    updateCurrentCameraCaption(initialCamera);
  }

  // 毎日日本時間0時にカメラを切り替える
  function scheduleCameraSwitch() {
    var now = new Date();
    var tomorrow = new Date(now);
    tomorrow.setDate(now.getDate() + 1);
    tomorrow.setHours(0, 0, 0, 0);

    var timeUntilMidnight = tomorrow - now;
    setTimeout(function () {
      switchCamera();
      // 次の日の0時に再度スケジュール
      scheduleCameraSwitch();
    }, timeUntilMidnight);
  }

  // カメラ切り替え関数
  function switchCamera() {
    var currentCamera = getCurrentCamera();
    var currentCameraIndex = cameras.indexOf(currentCamera);
    var nextCameraIndex = (currentCameraIndex + 1) % cameras.length;
    var nextCamera = cameras[nextCameraIndex];
    setCurrentCamera(nextCamera);
    updateCurrentCameraCaption(nextCamera);
  }

// 現在のカメラを取得
function getCurrentCamera() {
  return localStorage.getItem('currentCamera') || cameras[0]; // 初期値をcameras配列の先頭に設定
}

  // カメラを設定
  function setCurrentCamera(camera) {
    localStorage.setItem('currentCamera', camera);
    var videoSrc = 'https://st1.ctc.co.jp/edge/' + camera + '/playlist.m3u8';

    if (Hls.isSupported()) {
      var hls = new Hls(config);
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
    }
  }

  // カメラのキャプションを更新
  function updateCurrentCameraCaption(camera) {
    currentCameraCaption.innerText = '現在のカメラ: ' + camera;
  }

  // 初回のスケジュールを設定
  scheduleCameraSwitch();
</script>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>