Nullish Coalescing을 활용하는 자바스크립트 동영상 재생 컨트롤 방법

29 Sep 2023

javascript

자바스크립트에서 Nullish Coalescing 연산자는 변수가 null 또는 undefined인 경우 기본값을 설정하는 데 유용합니다. 이 기능을 활용하여 동영상 재생 컨트롤 코드를 작성하는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정하기

가장 먼저 HTML 구조를 설정해야 합니다. 재생 버튼과 일시 정지 버튼, 동영상 요소를 포함하는 간단한 구조를 작성해 보겠습니다.

<div>
  <button id="playButton">Play</button>
  <button id="pauseButton">Pause</button>
  <video id="videoElement" src="video.mp4"></video>
</div>

2. 자바스크립트 코드 작성하기

위의 HTML 구조를 통해 동영상 요소 및 버튼 요소를 선택하고, 이벤트 리스너를 추가하여 동영상 재생 및 일시 정지 기능을 처리할 수 있습니다. 이때 Nullish Coalescing 연산자를 활용하여 기본값을 설정합니다.

const videoElement = document.getElementById("videoElement");
const playButton = document.getElementById("playButton");
const pauseButton = document.getElementById("pauseButton");

playButton.addEventListener("click", () => {
  videoElement.play();
});

pauseButton.addEventListener("click", () => {
  videoElement.pause();
});

3. 사용자 정의 기본값 설정하기

만약 동영상 요소가 로드되지 않은 경우, Nullish Coalescing 연산자를 활용하여 사용자 정의 기본값을 설정할 수 있습니다. 이를 통해 동영상 파일이 로드되지 않은 상태에서도 동영상 재생 컨트롤이 가능합니다.

const videoElement = document.getElementById("videoElement");
const playButton = document.getElementById("playButton");
const pauseButton = document.getElementById("pauseButton");
const defaultVideoSrc = "default-video.mp4";

playButton.addEventListener("click", () => {
  videoElement.src = videoElement.src ?? defaultVideoSrc;
  videoElement.play();
});

pauseButton.addEventListener("click", () => {
  videoElement.src = videoElement.src ?? defaultVideoSrc;
  videoElement.pause();
});

위의 코드에서 ?? 연산자는 동영상 요소의 src 속성이 null 또는 undefined인 경우 defaultVideoSrc 값을 할당합니다. 이를 통해 동영상 파일이 로드되지 않은 상태에서도 기본값을 제공할 수 있습니다.

이렇게 Nullish Coalescing 연산자를 활용하여 자바스크립트에서 동영상 재생 컨트롤을 구현하는 방법을 알아보았습니다. 이를 통해 유저 경험을 개선하고, 코드의 안정성을 높일 수 있습니다.

#javascript #동영상재생 #NullishCoalescing