[javascript] Plyr을 사용하여 동영상 플레이어의 효과음 추가하기

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어를 사용하기 쉽게 만들어 주는 JavaScript 라이브러리입니다. 이러한 플레이어에 효과음을 추가하고자 할 때, Plyr은 유용한 도구입니다. 이번 블로그 포스트에서는 Plyr을 사용하여 동영상 플레이어에 효과음을 추가하는 방법을 다룰 것입니다.

Plyr 라이브러리 설치

먼저, Plyr 라이브러리를 다운로드하고 HTML 문서에 추가해야 합니다. 다음의 링크에서 Plyr을 다운로드할 수 있습니다: Plyr 다운로드 페이지

Plyr을 다운로드한 후, 다음과 같이 HTML 문서에 추가합니다:

<!DOCTYPE html>
<html>
<head>
    <title>Plyr 동영상 플레이어</title>
    <link rel="stylesheet" href="plyr.css" />
</head>
<body>
    <video id="player" playsinline controls>
        <source src="video.mp4" type="video/mp4" />
    </video>

    <script src="plyr.js"></script>
    <script>
        const player = new Plyr('#player');
    </script>
</body>
</html>

Plyr CSS 파일과 JavaScript 파일을 <head> 태그 내에 추가해줍니다. 그리고 Plyr 플레이어를 생성하기 위해 <video> 요소를 추가한 후, JavaScript 부분에서 Plyr을 초기화합니다.

효과음 추가하기

이제 Plyr 플레이어에 효과음을 추가해보겠습니다. Plyr은 plyr__controls 클래스를 가진 모든 요소에 대해 이벤트를 처리할 수 있는 on 메서드를 제공합니다. 이를 활용하여 재생 및 일시 정지 시 효과음을 추가할 수 있습니다.

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

player.on('play', () => {
    // 재생 시 효과음 추가
    playSound();
});

player.on('pause', () => {
    // 일시 정지 시 효과음 추가
    pauseSound();
});

function playSound() {
    // 재생 효과음 재생
}

function pauseSound() {
    // 일시 정지 효과음 재생
}

위의 예시에서는 play 이벤트와 pause 이벤트를 감지하여 각각 playSound와 pauseSound 함수를 호출하고 있습니다. 이 함수들은 각각 재생 효과음과 일시 정지 효과음을 재생하도록 작성하면 됩니다.

마무리

이제 Plyr을 사용하여 동영상 플레이어에 효과음을 추가하는 방법을 알아보았습니다. Plyr은 사용하기 쉽고 강력한 플레이어 라이브러리이며, 효과음을 통해 동영상 재생을 더욱 흥미로운 경험으로 만들어 줄 수 있습니다. Plyr의 공식 문서를 참조하여 더 많은 기능을 살펴보세요!

참고 자료:

Plyr 공식 사이트