HTML5 Track 태그 사용법

1. Track 태그란?

Track 태그는 미디어 요소(audio, video)에 대한 텍스트 트랙을 지정하는 데 사용됩니다. 자막, 캡션, 설명 등의 텍스트 트랙을 제공하여 미디어의 접근성과 사용성을 향상시킵니다.

2. 기본 구조

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="한국어">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    브라우저가 비디오를 지원하지 않습니다.
</video>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 자막 예제 -->
<div class="subtitles-example">
    <h3>자막 예제</h3>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="한국어">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        브라우저가 비디오를 지원하지 않습니다.
    </video>
</div>

<!-- 캡션 예제 -->
<div class="captions-example">
    <h3>캡션 예제</h3>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <track src="captions_ko.vtt" kind="captions" srclang="ko" label="한국어">
        <track src="captions_en.vtt" kind="captions" srclang="en" label="English">
        브라우저가 비디오를 지원하지 않습니다.
    </video>
</div>

<!-- 설명 예제 -->
<div class="descriptions-example">
    <h3>설명 예제</h3>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <track src="descriptions_ko.vtt" kind="descriptions" srclang="ko" label="한국어">
        <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English">
        브라우저가 비디오를 지원하지 않습니다.
    </video>
</div>

<style>
    /* 자막 예제 스타일 */
    .subtitles-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 캡션 예제 스타일 */
    .captions-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 설명 예제 스타일 */
    .descriptions-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .subtitles-example,
        .captions-example,
        .descriptions-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 비디오 스타일 */
    video {
        width: 100%;
        max-width: 800px;
        height: auto;
    }

    /* 자막 스타일 */
    ::cue {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 16px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        video {
            max-width: 100%;
        }

        ::cue {
            font-size: 14px;
        }
    }
</style>

6. 성능 최적화 팁

• 적절한 트랙 형식을 선택합니다.
• 트랙 파일을 최적화합니다.
• 필요한 트랙만 제공합니다.
• 트랙 파일의 크기를 최소화합니다.

7. 검증 및 테스트

track 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 다양한 트랙 형식 테스트
• 트랙 로딩 테스트
• 접근성 검사 도구 사용