홈페이지 메인에 삽입하여 시간이 변함에따라 사진, 오디오, 비디오 파일이 바뀌어 재싱되게하는 것입니다.

첨부한 예제는 6시간단위로 지정해둔 파일이 바뀝니다. 

그누보드와 관계없이 작동합니다.

서버에 올리고 경로만 잘 맞추면 잘 되리라 봅니다.

기상청의 날씨정보를 api로 가지고와서 날씨에 맞게 사진, 음악, 영상이 자동으로 바뀌게 만들면 좋을것 같습니다.

AI가 된다고 하니까 나중에 한번 시도해보려고 합니다.

핵심인 자바스크립트함수는 AI의 도움을 받았습니다.

감사합니다.

[code]

<style>
.effect-div { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background-size: cover; background-position: center; } /* padding-top, background-size, background-position 추가 //%%% */
.effect-div video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.audio-control-btn { position: absolute; bottom: 1rem; right: 1rem; background: rgba(0,0,0,0.6); color: #fff; border: none; padding: 0.6rem 1rem; font-size: 1rem; border-radius: 0.3rem; cursor: pointer; z-index: 1; }
.audio-control-btn:hover { background: rgba(0,0,0,0.8); }
</style>

<div class="effect-div" id="effectDiv">
  <video id="bgVideo" autoplay loop muted playsinline></video>
  <audio id="bgAudio"></audio>
  <button class="audio-control-btn" id="audioBtn">▶</button>
</div>

<script>
(function() {
  const mediaSchedule = [
    { from:  0, to:  6, bg: 'https://ows.kr/uploads/images/bg.jpg',     vid: 'https://ows.kr/uploads/videos/1.mp4',     aud: 'https://ows.kr/uploads/audios/gyoga.mp3'     },
    { from:  6, to: 12, bg: 'https://ows.kr/uploads/images/bg3.gif',   vid: 'https://ows.kr/uploads/videos/2.mp4',   aud: 'https://ows.kr/uploads/audios/sit_street.mp3'   },
    { from: 12, to: 18, bg: 'https://ows.kr/uploads/images/bg2.png', vid: 'https://ows.kr/uploads/videos/1.mp4', aud: 'https://ows.kr/uploads/audios/leejunghee.mp3' },
    { from: 18, to: 24, bg: 'https://ows.kr/uploads/images/bg4.jpg',   vid: 'https://ows.kr/uploads/videos/3.mp4',   aud: 'https://ows.kr/uploads/audios/so_does.mp3'   }
  ];

  const D = document;
  const effectDiv = D.getElementById('effectDiv');
  const bgVideo   = D.getElementById('bgVideo');
  const bgAudio   = D.getElementById('bgAudio');
  const audioBtn  = D.getElementById('audioBtn');

  function getMediaForHour(h) {
    return mediaSchedule.find(m => h >= m.from && h < m.to) || mediaSchedule[0];
  }

  function updateMedia() {
    const h = new Date().getHours();
    const { bg, vid, aud } = getMediaForHour(h);

    if (effectDiv.style.backgroundImage !== `url('${bg}')`) {
      effectDiv.style.backgroundImage = `url('${bg}')`;
    }

    if (bgVideo.src !== vid) {
      bgVideo.src = vid;
      bgVideo.load();
      bgVideo.play().catch(()=>{});
    }

    const playing = !bgAudio.paused;
    if (bgAudio.src !== aud) {
      bgAudio.src = aud;
      bgAudio.load();
      if (playing) bgAudio.play().catch(()=>{});
    }

    audioBtn.textContent = bgAudio.paused ? '▶' : '❚❚';
  }

  function toggleAudio(e) {
    bgAudio.paused ? bgAudio.play().then(()=> audioBtn.textContent = '❚❚') : (bgAudio.pause(), audioBtn.textContent = '▶');
    if (e) e.stopPropagation();
  }

  audioBtn.addEventListener('click', toggleAudio);
  effectDiv.addEventListener('click', toggleAudio);

  updateMedia();
  setInterval(updateMedia, 60 * 60 * 1000);
})();
</script>
 

[/code]

https://ows.kr/