[javascript] Plyr을 사용하여 동영상 재생률을 변경하는 방법
Plyr은 JavaScript로 작성된 최신 HTML5 미디어 플레이어 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에 동영상을 쉽게 재생할 수 있습니다. Plyr에는 동영상의 재생률을 조절하는 기능도 제공됩니다. 이제 Plyr을 사용하여 동영상 재생률을 변경하는 방법에 대해 알아보겠습니다.
1. Plyr 설치
우선 Plyr을 설치해야 합니다. Plyr은 CDN을 통해 라이브러리를 가져올 수 있습니다. 아래의 코드를 HTML 파일의 <head> 태그 내에 추가하세요.
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
2. 동영상 플레이어 만들기
Plyr은 <video> 요소에 대한 컨트롤러를 제공합니다. HTML 파일에 동영상 요소를 추가하고 Plyr 클래스를 적용하여 동영상을 플레이어로 변환합니다.
<video id="my-video" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
const player = new Plyr('#my-video');
</script>
위의 예제에서 video.mp4는 재생할 동영상 파일의 경로를 나타냅니다. Plyr은 동영상을 자동으로 로드하고 컨트롤러를 연결합니다.
3. 재생률 변경하기
Plyr은 동영상의 재생률을 변경하는 기능을 제공합니다. 이 기능을 사용하기 위해서는 Plyr 라이브러리의 speed 옵션을 설정해야 합니다. speed 옵션은 동영상의 재생 속도를 나타냅니다. 예를 들어, 1은 정상 속도, 0.5는 절반 속도, 2는 두 배 속도를 의미합니다.
<video id="my-video" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
const player = new Plyr('#my-video', {
speed: {
selected: 1, // 기본 재생 속도
options: [0.5, 1, 1.5, 2] // 재생 속도 옵션
}
});
</script>
위의 예제에서 selected 옵션은 기본 재생 속도를 설정하고, options 옵션은 사용 가능한 재생 속도 옵션을 나타냅니다. 이제 사용자는 Plyr 플레이어의 UI를 통해 동영상의 재생 속도를 변경할 수 있습니다.