자바스크립트 Local Storage를 이용한 유튜브 플레이어 구현

15 Sep 2023

javascript

소개

이번 포스트에서는 자바스크립트의 Local Storage를 활용하여 간단한 유튜브 플레이어를 구현하는 방법을 알아보겠습니다. Local Storage는 웹 브라우저에 데이터를 저장하는 기능으로, 이를 이용하여 유튜브 동영상의 재생 상태를 저장하고 복원할 수 있습니다.

구현 단계

HTML 구조 설정
자바스크립트 코드 작성

HTML 구조 설정

아래의 HTML 코드를 사용하여 간단한 유튜브 플레이어를 만들어보겠습니다.

<div>
  <div id="player"></div>
  <button id="playButton">재생</button>
  <button id="pauseButton">일시정지</button>
</div>

자바스크립트 코드 작성

먼저, 플레이어 객체를 생성하고 동영상을 로드하는 코드를 작성합니다.

const player = new YoutubePlayer('#player');

function loadVideo(videoId) {
  player.loadVideoById(videoId);
}

위의 코드에서 YoutubePlayer는 외부 라이브러리로 가정하고, loadVideoById는 해당 라이브러리의 메서드로 동영상을 로드합니다.

다음으로, 플레이어의 상태를 Local Storage에 저장하고 복원하는 함수를 작성합니다.

function savePlayerState() {
  const state = {
    currentTime: player.getCurrentTime(),
    isPlaying: player.isPlaying()
  };
  localStorage.setItem('playerState', JSON.stringify(state));
}

function restorePlayerState() {
  const state = JSON.parse(localStorage.getItem('playerState'));
  if (state) {
    player.seekTo(state.currentTime);
    if (state.isPlaying) {
      player.playVideo();
    } else {
      player.pauseVideo();
    }
  }
}

위의 코드에서는 savePlayerState 함수가 플레이어의 현재 시간과 재생 여부를 객체로 만들어 Local Storage에 저장합니다. restorePlayerState 함수는 Local Storage에서 해당 정보를 가져와 플레이어를 복원합니다.

마지막으로, 버튼 클릭 이벤트를 설정하여 플레이어의 상태 저장과 복원을 호출합니다.

document.getElementById('playButton').addEventListener('click', () => {
  player.playVideo();
  savePlayerState();
});

document.getElementById('pauseButton').addEventListener('click', () => {
  player.pauseVideo();
  savePlayerState();
});

window.addEventListener('load', () => {
  restorePlayerState();
});

결론

위의 코드를 사용하면 유튜브 플레이어의 상태를 자동으로 저장하고 복원할 수 있습니다. 이를 통해 사용자가 유튜브 동영상을 재생하고 돌아왔을 때, 이전 상태로 플레이어를 복원할 수 있습니다.

#javascript #localstorage #유튜브 #플레이어