[javascript] Plyr을 사용하여 동영상 플레이어의 텍스트 캡션 색상 변경하기
개요
Plyr은 사용하기 쉬운 오픈 소스 동영상 플레이어 라이브러리입니다. 이 플레이어를 사용하면 웹 사이트나 앱에서 동영상을 쉽게 재생할 수 있습니다. Plyr에는 텍스트 캡션을 표시하는 기능이 내장되어 있습니다. 이 기능을 사용하여 동영상 플레이어의 텍스트 캡션 색상을 변경하는 방법에 대해 알아보겠습니다.
단계별 안내
1. Plyr 라이브러리 추가하기
먼저 Plyr 라이브러리를 웹 페이지에 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 Plyr 라이브러리를 가져옵니다.
<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
2. 동영상 플레이어 생성하기
Plyr를 사용하여 동영상 플레이어를 생성합니다. HTML에는 Plyr 클래스로 표시된 동영상 요소가 있어야 합니다. 예를 들면 다음과 같습니다.
<video class="plyr">
<source src="video.mp4" type="video/mp4" />
</video>
3. 텍스트 캡션 색상 변경하기
동영상 플레이어의 텍스트 캡션 색상을 변경하려면 JavaScript를 사용해야 합니다. Plyr은 captions 프로퍼티를 사용하여 텍스트 캡션을 제어합니다. 다음 코드는 텍스트 캡션의 색상을 빨간색으로 변경하는 예시입니다.
document.addEventListener("DOMContentLoaded", function() {
const player = new Plyr(".plyr");
player.on("ready", function() {
const captions = player.elements.captions;
captions.style.color = "red";
});
});
위 코드는 페이지 로드 시 Plyr 플레이어가 준비되면 실행되며, captions 요소의 색상을 빨간색으로 변경합니다.
결론
이제 Plyr을 사용하여 동영상 플레이어의 텍스트 캡션 색상을 변경하는 방법을 알게 되었습니다. Plyr은 웹 개발에 유용한 많은 기능을 제공하므로 다양한 방식으로 사용할 수 있습니다. Plyr 공식 문서를 참조하여 더 많은 기능을 알아보세요.