Colin's Blog
[javascript] Plyr을 사용하여 동영상 플레이어에 자동 반복 기능 추가하기

Plyr은 자바스크립트 기반의 유연하고 사용하기 쉬운 동영상 플레이어입니다. 이 플레이어를 사용하면 웹 애플리케이션에 간단하게 동영상을 삽입할 수 있습니다.

이번 포스트에서는 Plyr을 사용하여 동영상 플레이어에 자동 반복 기능을 추가하는 방법에 대해 알아보겠습니다.

1. Plyr 설정

먼저 Plyr을 가져와야 합니다. Plyr은 CDN을 통해 사용할 수 있으며, 아래 스크립트 태그를 통해 가져올 수 있습니다.

<html>
<head>
    ...
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
</head>
<body>
    ...
    <script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
</body>
</html>

2. 동영상 플레이어 생성

Plyr을 사용하여 동영상 플레이어를 생성하기 위해서는 HTML 요소에 plyr-video 클래스를 추가해야 합니다. 또한, 반복 기능을 추가하기 위해 data-plyr-config 속성을 사용해야 합니다.

<video class="plyr-video" controls data-plyr-config='{ "loop": { "active": true } }'>
    <source src="video.mp4" type="video/mp4">
</video>

위의 예시에서 data-plyr-config 속성의 loop 객체에 active 속성을 true로 설정하여 반복 기능을 활성화했습니다.

3. 플레이어 초기화

플레이어를 사용하기 위해 자바스크립트로 Plyr을 초기화해야 합니다. Plyr 초기화는 DOM이 로드된 후에 수행되어야 하므로, DOMContentLoaded 이벤트를 사용하여 초기화 코드를 실행해야 합니다.

document.addEventListener('DOMContentLoaded', function() {
    const videoPlayer = new Plyr('.plyr-video');
});

위의 코드에서 Plyr('.plyr-video')는 plyr-video 클래스를 가진 모든 HTML 요소에 대해 Plyr 객체를 생성합니다.

4. 테스트하기

이제 웹 페이지에서 동영상을 플레이하면 자동으로 반복되는 것을 확인할 수 있습니다. 동영상이 종료되면 자동으로 처음부터 재생되게 됩니다.

참고 자료

다음과 같이 Plyr을 사용하여 동영상 플레이어에 자동 반복 기능을 추가할 수 있습니다. Plyr을 사용하면 동영상 재생 관련 기능을 쉽게 커스터마이징할 수 있으므로, 웹 애플리케이션에서 동영상을 다룰 때 유용하게 사용할 수 있습니다.

© 2018 Colin. All rights reserved.