[javascript] Plyr을 사용하여 동영상 플레이어에 타임라인 추가하기

27 Nov 2023

javascript

소개

Plyr은 HTML5 동영상 플레이어를 쉽게 만들 수 있는 JavaScript 라이브러리입니다. 이 블로그 포스트에서는 Plyr을 사용하여 동영상 플레이어에 타임라인을 추가하는 방법을 알아보겠습니다. 타임라인은 동영상의 재생 시간을 시각적으로 나타내며 사용자가 원하는 위치로 이동할 수 있게 해줍니다.

사용 방법

Plyr 라이브러리를 다운로드하고 동영상 플레이어를 HTML에 추가합니다.

<link rel="stylesheet" href="path/to/plyr.css" />
<video crossorigin playsinline controls>
    <source src="path/to/video.mp4" type="video/mp4" />
</video>
<script src="path/to/plyr.js"></script>

Plyr 라이브러리를 초기화하고 플레이어를 생성합니다.
```
const player = new Plyr('video');
```

타임라인 모듈을 Plyr에 추가합니다.

player.on('ready', () => {
    const timeline = player.elements.progress;
    timeline.innerHTML = '<div class="plyr__progress__played"></div><div class="plyr__progress__buffer"></div>';
});

타임라인에 이벤트를 추가하여 동영상의 재생 위치를 변경할 수 있도록 합니다.

player.on('timeupdate', () => {
    const progress = player.elements.progress;
    const played = progress.querySelector('.plyr__progress__played');
    const duration = player.duration;
    if (duration) {
        const currentTime = player.currentTime;
        const percentage = (currentTime / duration) * 100;
        played.style.width = `${percentage}%`;
    }
});

결과

위의 코드를 사용하여 Plyr을 초기화하고 타임라인을 추가한 후, 동영상을 재생하면 타임라인이 표시됩니다. 사용자는 타임라인을 클릭하여 원하는 위치로 이동할 수 있습니다.

결론

Plyr을 사용하여 동영상 플레이어에 타임라인을 추가하는 방법을 살펴보았습니다. 타임라인은 사용자에게 동영상의 재생 시간을 시각적으로 보여주고, 특정 위치로 이동할 수 있는 기능을 제공합니다. Plyr은 다양한 커스터마이징 옵션을 제공하므로 필요에 맞게 적용할 수 있습니다. 자세한 내용은 Plyr 공식 문서를 참조하시기 바랍니다.