HTML <track> 태그 사용법, 비디오 콘텐츠에 자막과 설명 추가하기

HTML <track> 태그 사용법, 비디오 콘텐츠에 자막과 설명 추가하기

비디오 콘텐츠는 현대 웹사이트에서 중요한 요소 중 하나입니다. <track> 태그를 사용하면 비디오에 자막, 번역, 설명 등의 추가적인 정보를 쉽게 제공할 수 있습니다. 이 가이드는 <track> 태그의 사용법을 자세히 살펴보고, 이를 통해 사용자 경험을 향상시키는 방법을 제시합니다.

 

 

목차

1. <track> 태그 개요
2. <track> 태그의 속성
3. 자막 파일 준비하기
4. 비디오에 자막 추가하기
5. 다양한 트랙 유형 사용하기
6. 브라우저 지원 및 호환성
7. 실전 예제

 

<track> 태그 개요

<track> 태그는 HTML5에서 도입된 태그로, 비디오나 오디오 요소에 텍스트 트랙을 추가할 때 사용됩니다. 이 태그를 통해 사용자는 자막, 설명, 챕터 정보 등을 비디오와 함께 표시할 수 있습니다. 특히 접근성 측면에서 자막은 청각 장애가 있는 사용자에게 매우 중요한 기능입니다.

<track> 태그의 속성

<track> 태그는 다양한 속성을 가지고 있으며, 이 속성들은 트랙의 기능과 동작 방식을 정의합니다:

• kind: 트랙의 유형을 지정합니다. 값으로는 subtitles, captions, descriptions, chapters, metadata가 있습니다.
• src: 트랙 파일의 경로를 지정합니다. 자막 파일의 URL을 포함합니다.
• srclang: 자막 파일의 언어를 나타냅니다. 예를 들어, 한국어는 ko, 영어는 en으로 지정합니다.
• label: 사용자 인터페이스에서 사용될 트랙의 이름을 지정합니다.
• default: 기본 트랙으로 설정할지를 결정합니다. 이 속성이 있으면 해당 트랙이 기본으로 활성화됩니다.

 

 

자막 파일 준비하기

비디오에 자막을 추가하려면 먼저 자막 파일을 준비해야 합니다. 자막 파일은 일반적으로 WebVTT(Web Video Text Tracks) 형식을 사용합니다. WebVTT 파일은 .vtt 확장자를 가지며, 시간 코드와 자막 텍스트로 구성됩니다. 다음은 예시입니다:

WEBVTT

00:00:00.000 --> 00:00:05.000
이것은 첫 번째 자막입니다.

00:00:05.000 --> 00:00:10.000
이것은 두 번째 자막입니다.

 

 

비디오에 자막 추가하기

자막 파일을 준비한 후, 이를 비디오에 추가할 수 있습니다. <video> 태그 내부에 <track> 태그를 사용하여 자막을 삽입합니다:

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_ko.vtt" srclang="ko" label="Korean">
</video>

위의 예제는 한국어 자막을 가진 비디오를 보여줍니다. 사용자는 비디오 플레이어에서 자막을 선택할 수 있습니다.

 

 

 

 

다양한 트랙 유형 사용하기

<track> 태그는 자막 외에도 다양한 유형의 트랙을 지원합니다:

• captions: 청각 장애인을 위한 자막. 음성 외에도 음향 효과와 같은 정보를 포함합니다.
• descriptions: 비디오 내용에 대한 추가 설명을 제공합니다. 시각 장애인을 위한 오디오 설명을 포함할 수 있습니다.
• chapters: 비디오의 챕터 정보를 제공합니다. 사용자는 특정 챕터로 이동할 수 있습니다.
• metadata: 비디오 재생 시 동적으로 표시되는 메타데이터를 정의합니다. 화면에는 표시되지 않습니다.

 

 

브라우저 지원 및 호환성

<track> 태그는 대부분의 최신 브라우저에서 지원됩니다. 그러나 일부 구형 브라우저에서는 제한적인 지원을 제공할 수 있습니다. 따라서 브라우저 호환성을 고려해 추가적인 폴백(fallback) 옵션을 제공하는 것이 좋습니다.

 

 

실전 예제

다음은 <track> 태그를 사용하여 비디오에 자막과 설명을 추가하는 예제입니다:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
    <track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions">
    <track kind="descriptions" src="descriptions_en.vtt" srclang="en" label="English Descriptions">
</video>

이 예제는 영어 자막, 캡션, 그리고 설명 트랙을 포함한 비디오를 보여줍니다. 사용자는 비디오 플레이어에서 각각의 트랙을 선택할 수 있습니다.

이 가이드를 통해 <track> 태그를 효과적으로 활용하여 비디오 콘텐츠의 접근성과 유용성을 크게 향상시킬 수 있습니다.