자바스크립트로 HTML5 비디오 로딩 중 표시되는 로딩 스피너 제어하기

10 Nov 2023

javascript

HTML5의 비디오 요소를 사용하여 웹 페이지에 동영상을 표시할 때, 비디오가 로딩 중인 동안 사용자에게 로딩 상태를 알려주는 로딩 스피너를 표시하는 것은 좋은 사용자 경험을 제공하는데 도움이 됩니다. 이 글에서는 자바스크립트를 사용하여 HTML5 비디오 로딩 스피너를 제어하는 방법을 알아보겠습니다.

HTML5 비디오 요소 및 로딩 스피너

HTML5의 video 요소는 웹 페이지에 동영상을 삽입하는 데 사용됩니다. 비디오 요소에는 로딩되는 동안 사용자에게 로딩 상태를 나타내는 로딩 스피너를 표시하는 기본 기능이 있습니다. 이 로딩 스피너는 비디오가 로딩되고 재생 준비가 완료될 때 자동으로 사라집니다.

하지만 때로는 비디오가 로딩되는 동안 로딩 스피너의 동작을 제어하고 싶을 수 있습니다. 예를 들어, 비디오가 로딩되지 않거나 로딩이 끝나지 않은 상태에서 로딩 스피너를 계속해서 표시하기 원할 수 있습니다.

자바스크립트로 로딩 스피너 제어하기

자바스크립트를 사용하여 HTML5 비디오 로딩 스피너를 제어할 수 있습니다. 먼저, 비디오 요소를 JavaScript로 선택해야 합니다. 그런 다음 로딩 스피너를 나타내거나 숨기는 함수를 작성하는 것이 좋습니다.

// 비디오 요소 선택
const video = document.getElementById('my-video');

// 로딩 스피너 제어 함수
function showLoader() {
    // 로딩 스피너 요소 표시
    const loader = document.getElementById('loader');
    loader.style.display = 'block';
}

function hideLoader() {
    // 로딩 스피너 요소 숨김
    const loader = document.getElementById('loader');
    loader.style.display = 'none';
}

위의 예제에서는 showLoader 함수와 hideLoader 함수를 작성하여 각각 로딩 스피너를 표시하고 숨김 처리하고 있습니다. 이 함수들을 사용하여 필요한 때에 로딩 스피너를 제어할 수 있습니다.

이벤트 리스너와의 연결

비디오 로딩 상태에 따라 로딩 스피너를 표시하고 숨기기 위해 이벤트 리스너를 사용할 수도 있습니다. 비디오의 로딩 중인 상태를 나타내는 loadeddata 이벤트 및 canplaythrough 이벤트를 활용하여 로딩 스피너를 제어할 수 있습니다.

// 비디오 요소 선택
const video = document.getElementById('my-video');

// 로딩 스피너 제어 함수
function showLoader() {
    // 로딩 스피너 요소 표시
    const loader = document.getElementById('loader');
    loader.style.display = 'block';
}

function hideLoader() {
    // 로딩 스피너 요소 숨김
    const loader = document.getElementById('loader');
    loader.style.display = 'none';
}

// loadeddata 이벤트 리스너
video.addEventListener('loadeddata', hideLoader);

// canplaythrough 이벤트 리스너
video.addEventListener('canplaythrough', hideLoader);

위의 예제에서는 loadeddata 이벤트와 canplaythrough 이벤트를 사용하여 비디오 로딩 중일 때 로딩 스피너를 표시하고, 로딩이 완료되었을 때는 로딩 스피너를 숨김 처리하고 있습니다.

마무리

자바스크립트를 사용하여 HTML5 비디오 로딩 스피너를 제어하는 방법을 알아보았습니다. 비디오 로딩 상태에 따라 로딩 스피너를 표시하고 숨기는 함수를 작성하거나 이벤트 리스너와 함께 사용하여 원하는 기능을 구현할 수 있습니다. 이를 통해 사용자에게 보다 나은 비디오 재생 경험을 제공할 수 있습니다.

참고 자료

#JavaScript #HTML5