[javascript] Plyr을 사용하여 동영상 플레이어에 사용자 정의 로딩 스피너 추가하기

27 Nov 2023

javascript

소개

Plyr은 HTML5 동영상 플레이어를 구축하기 위한 강력한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에 동영상을 쉽게 삽입하고 다양한 컨트롤 및 기능을 추가할 수 있습니다. 이번에는 Plyr을 사용하여 동영상 플레이어에 사용자 정의 로딩 스피너를 추가하는 방법에 대해 알아보겠습니다.

필요한 준비물

Plyr 라이브러리: Plyr 공식 웹사이트에서 다운로드하거나 CDN을 통해 가져올 수 있습니다.
사용자 정의 로딩 스피너 이미지: 로딩 중에 플레이어에 표시할 이미지입니다.

코드 예시

<head>
    <!-- Plyr 라이브러리 추가 -->
    <link rel="stylesheet" href="path/to/plyr.css" />
    <script src="path/to/plyr.js"></script>
    <!-- 스타일시트 추가 -->
    <style>
        .plyr__loading {
            /* 로딩 스피너의 스타일 설정 */
            background-image: url('path/to/custom-spinner.gif');
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <!-- 동영상 플레이어 추가 -->
    <video poster="poster.jpg" controls>
        <!-- 동영상 소스 추가 -->
        <source src="video.mp4" type="video/mp4" />
    </video>

    <script>
        // Plyr 생성
        const player = new Plyr('video');

        // 로딩 스피너 표시
        player.on('statechange', event => {
            if (event.detail.code === 3) {
                player.elements.container.classList.add('plyr__loading');
            } else {
                player.elements.container.classList.remove('plyr__loading');
            }
        });
    </script>
</body>

설명

HTML <head> 태그에 Plyr 라이브러리와 스타일시트를 추가합니다.
Plyr 라이브러리를 다운로드하여 <head> 태그에 연결합니다. CSS 파일과 JavaScript 파일을 포함해야 합니다.
사용자 정의 로딩 스피너의 스타일을 CSS로 설정합니다.
<body> 태그에 동영상 플레이어를 추가합니다. <video> 요소에 controls 속성을 사용하여 컨트롤러를 표시할 수 있습니다. <source> 요소에 동영상 파일을 추가합니다.
JavaScript 코드를 사용하여 Plyr 객체를 생성합니다.
statechange 이벤트를 사용하여 동영상 플레이어의 상태 변화를 감지합니다. 로딩 중인 경우 plyr__loading 클래스를 컨테이너에 추가하고, 로딩이 완료되면 해당 클래스를 제거합니다.

이제 웹 페이지를 열어 동영상을 재생하면 로딩 중에 사용자 정의 로딩 스피너가 표시될 것입니다.

마무리

이번 포스트에서는 Plyr을 사용하여 동영상 플레이어에 사용자 정의 로딩 스피너를 추가하는 방법을 알아보았습니다. Plyr은 사용하기 쉬운 인터페이스와 다양한 기능을 제공하여 HTML5 동영상을 관리할 때 강력한 도구가 될 수 있습니다. 추가적인 커스터마이징을 통해 웹 페이지에 더욱 독특한 동영상 플레이어를 구축해보세요.