8.1 <source> 요소
<source>와 <track> 요소는 HTML5에서 다양한 미디어 형식을 지원하고 콘텐츠의 접근성을 향상시켜 중요한 역할을 해. 한번 자세히 살펴보자.
<source> 요소는 <audio>, <video>, <picture> 요소 내에서 다양한 미디어 콘텐츠 소스를 지정하기 위해 사용돼. 이걸로 인해 브라우저들이 재생에 가장 적합한 포맷을 선택할 수 있게 돼서, 크로스 브라우저 호환성과 다양한 기기 지원이 가능해.
문법
<source src="URL" type="MIME-type">
속성
src: 미디어 파일의 경로를 지정해type: 파일의 형식과 MIME 타입을 지정해. 이걸로 브라우저가 해당 포맷을 지원하는지 판단할 수 있어
사용 예제:
예제 1: <video> 요소 내에서
이 예에서는 브라우저가 지원하는 첫 번째 포맷을 재생하려고 시도할 거야.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
브라우저가 비디오 재생을 지원하지 않아요.
</video>
예제 2: <audio> 요소 내에서
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
브라우저가 오디오 재생을 지원하지 않아요.
</audio>
예제 3: <picture> 요소 내에서
<picture>
<source srcset="image-320w.jpg" media="(max-width: 320px)">
<source srcset="image-640w.jpg" media="(max-width: 640px)">
<source srcset="image-1280w.jpg" media="(max-width: 1280px)">
<img src="image-1280w.jpg" alt="이미지 예제">
<picture>
<source> 사용의 장점
- 크로스 브라우저 호환성: 여러 형식을 지정해주면 다양한 브라우저에서 재생이 보장돼
- 기기별 최적화: 다양한 기기와 조건에 맞게 다른 파일을 지정할 수 있어
8.2 <track> 요소
<track> 요소는 자막, 청각 장애인용 자막, 설명, 챕터, 메타데이터 등 멀티미디어 콘텐츠에 텍스트 트랙을 추가하는 데 사용돼. <audio>나 <video> 요소 내에 위치해.
문법
<track src="URL" kind="type" srclang="language" label="label">
속성
src: 텍스트 트랙 파일의 경로를 지정해.-
kind: 텍스트 트랙의 유형을 지정해. 가능한 값들은:subtitles: 대화 번역을 위한 자막captions: 청각 장애인용 자막으로 소리 설명 포함descriptions: 시각장애인을 위한 오디오 설명chapters: 멀티미디어 콘텐츠 탐색을 위한 챕터metadata: JavaScript에서 사용할 수 있는 메타데이터
srclang: 텍스트 트랙의 언어를 지정 (예: en은 영어, es는 스페인어).label: 트랙 선택 메뉴에 표시될 텍스트 트랙의 설명적 이름.default: 해당 트랙을 기본적으로 활성화함을 나타내
사용 예제:
예제 1: 비디오 자막
이 예제에서는 비디오에 영어 및 스페인어 자막 트랙이 있어. 사용자는 메뉴에서 원하는 트랙을 선택할 수 있어.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
브라우저가 비디오 재생을 지원하지 않아요.
</video>
예제 2: 청각 장애인용 자막
이 구성에서는 영어로 된 청각 장애인용 자막 트랙을 추가해.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
브라우저가 비디오 재생을 지원하지 않아요.
</video>
<track> 사용의 장점
- 접근성 향상: 자막과 설명은 청각 장애인, 난청자 및 시각장애인 사용자에게 콘텐츠를 더 쉽게 접근할 수 있게 해줘
- 다국어 지원: 다양한 언어의 자막 추가 가능
- 추가 정보: 챕터와 메타데이터를 통해 멀티미디어 콘텐츠를 구성하고 구조화 가능
8.3 텍스트 트랙 파일의 형식
텍스트 트랙은 주로 WebVTT (Web Video Text Tracks) 형식으로 저장돼. 이 형식은 대부분의 최신 브라우저에서 지원되며 기계와 인간 모두 쉽게 읽을 수 있어.
WebVTT 파일 예제 (subtitles_en.vtt)
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Welcome to our video presentation.
2
00:00:05.000 --> 00:00:10.000
We hope you find this informative and enjoyable.
<source>와 <track> 요소의 복합 사용 예제들
<html lang="en">
<head>
<meta charset="UTF-8">
<title>여러 소스와 텍스트 트랙이 있는 비디오</title>
</head>
<body>
<h1>여러 소스와 텍스트 트랙이 있는 비디오 예제</h1>
<video controls width="600" poster="posterimage.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
<track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
Your browser does not support the video element.
</video>
</body>
</html>
GO TO FULL VERSION