자바스크립트로 비디오 자막과 자막 토글 기능 추가하기
비디오 자막은 영상 내에 텍스트로 된 대본을 표시하는 기능이다. 자막은 영상을 보다 이해하기 쉽게 만들어주며, 언어 이해도가 낮은 사용자에게 도움을 줄 수 있다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 비디오 자막과 자막 토글 기능을 추가하는 방법을 알아보겠다.
비디오 자막 추가하기
비디오 자막을 추가하려면 다음 단계를 따라야 한다:
-
비디오 파일과 자막 파일 준비: 비디오 파일과 자막 파일이 필요하다. 대부분의 비디오 호스팅 서비스에서는 자막을 지원하므로 자막 파일을 업로드하고 연결할 수 있는 기능을 제공한다.
-
HTML 비디오 요소 생성: HTML 비디오 요소를 생성하여 웹 페이지에 비디오를 표시한다. 다음과 같은 예제 코드를 사용하여 비디오 요소를 생성할 수 있다:
<video id="myVideo" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="captions" srclang="en" label="English">
</video>
id속성은 자바스크립트에서 비디오 요소를 참조할 때 사용된다.width와height속성은 비디오의 가로와 세로 크기를 지정한다.controls속성은 비디오 컨트롤 패널을 표시한다.source요소는 비디오 파일의 경로와 유형을 지정한다.track요소는 자막 파일의 경로와 종류, 언어 라벨을 지정한다.
- 자바스크립트로 자막 토글 기능 추가: 자막 토글 버튼을 생성하고, 버튼을 클릭할 때마다 자막을 활성화/비활성화할 수 있도록 자바스크립트를 사용해야 한다. 다음 예제 코드를 사용하여 자막 토글 버튼을 추가하고 기능을 구현할 수 있다:
<button onclick="toggleSubtitles()">Toggle Subtitles</button>
<script>
function toggleSubtitles() {
var video = document.getElementById("myVideo");
video.textTracks[0].mode = video.textTracks[0].mode == "hidden" ? "showing" : "hidden";
}
</script>
위의 코드에서 toggleSubtitles 함수는 myVideo 아이디를 가진 비디오 요소를 찾고, 자막 트랙의 모드를 토글하는 역할을 한다. hidden 모드는 자막을 숨기고, showing 모드는 자막을 표시한다.
결론
이렇게 자바스크립트를 사용하여 비디오 자막과 자막 토글 기능을 추가할 수 있다. 비디오 자막은 영상 이용성을 높이고 사용자들에게 더 나은 경험을 제공할 수 있다. 웹 애플리케이션이나 온라인 교육 플랫폼 등에서 자막을 적용하여 사용성을 향상시킬 수 있다.
이 포스트에서는 자바스크립트로 비디오 자막을 추가하는 방법과 자막 토글 기능을 구현하는 방법을 알아보았다. 추가적인 자세한 설명과 예제를 확인하려면 관련 문서와 자료를 참고해보길 권장한다.