시간에 따라 사진, 음악, 영상이 바뀌는 코드

시간에 따라 사진, 음악, 영상이 바뀌는 코드 > 그누보드5 팁자료실

그누보드5 팁자료실

시간에 따라 사진, 음악, 영상이 바뀌는 코드 정보

시간에 따라 사진, 음악, 영상이 바뀌는 코드

본문

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

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

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

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

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

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

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

감사합니다.


<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>

https://ows.kr/