게시일: 2020년 8월 20일
자막과 스크린 리더 설명은 많은 사용자가 동영상을 시청할 수 있는 유일한 방법이며, 일부 관할권에서는 법규 또는 규정에 따라 자막과 스크린 리더 설명이 필수입니다. WebVTT (웹 동영상 텍스트 트랙) 형식은 동영상의 접근성을 높이기 위해 자막과 같은 시간이 지정된 텍스트 데이터를 설명하는 데 사용됩니다.
<track> 태그 추가
웹 동영상에 자막이나 화면 리더 설명을 추가하려면 <video> 태그 내에 <track> 태그를 추가합니다. 자막 및 스크린 리더 설명 외에도 <track> 태그를 자막 및 챕터 제목에 사용할 수도 있습니다.
<track> 태그는 참조된 콘텐츠를 가리키는 src 속성이 있다는 점에서 <source> 요소와 유사합니다. <track> 태그의 경우 WebVTT 파일을 가리킵니다.
label 속성은 인터페이스에서 특정 트랙을 식별하는 방법을 지정합니다.
여러 언어로 트랙을 제공하려면 제공하는 각 WebVTT 파일에 별도의 <track> 태그를 추가하고 srclang 속성을 사용하여 언어를 나타냅니다.
<track> 태그가 두 개 있는 <video> 태그의 예를 살펴보세요.
<track> 요소를 <video> 요소의 하위 요소로 추가합니다.
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Glitch에서 확인할 수 있는 샘플도 있습니다.
WebVTT 파일 구조
다음은 데모용 가상 WebVTT 파일입니다. 일련의 신호를 포함하는 텍스트 파일입니다. 각 큐는 화면에 표시할 텍스트 블록과 표시되는 시간 범위입니다.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
트랙 파일 내의 각 항목은 큐입니다. 각 큐에는 시작 시간과 종료 시간이 있으며 화살표로 구분된 후 큐 텍스트가 표시됩니다. 큐에는 railroad 및 manuscript와 같은 ID가 있을 수도 있습니다. 큐는 빈 줄로 구분됩니다.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
큐 시간은 hours:minutes:seconds.milliseconds 형식입니다. 구문 분석은 엄격합니다.
즉, 필요한 경우 숫자를 0으로 채워야 합니다. 시간, 분, 초는 두 자리여야 하며(0 값의 경우 00) 밀리초는 세 자리여야 합니다(0 값의 경우 000). 실시간 WebVTT 검사기에는 시간 형식의 오류와 비순차적 시간 같은 문제를 확인하는 뛰어난 WebVTT 검사기가 있습니다.
VTT 파일을 직접 만들 수 있지만 자동으로 생성하는 다양한 서비스도 있습니다.
이전 예에서 볼 수 있듯이 WebVTT 형식은 매우 간단합니다. 타이밍과 함께 텍스트 데이터를 추가하기만 하면 됩니다.
하지만 왼쪽 또는 오른쪽 정렬로 자막이 다른 위치에 렌더링되도록 하려면 어떻게 해야 할까요? 자막을 현재 발언자 위치에 맞추거나 카메라 내 텍스트를 방해하지 않는 것이 좋습니다. WebVTT는 .vtt 파일 내에서 직접 이 작업을 실행하는 설정을 정의합니다. 시간 간격 정의 뒤에 설정을 추가하여 자막 위치가 정의되는 방식을 확인합니다.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
또 다른 편리한 기능은 CSS를 사용하여 큐의 스타일을 지정하는 기능입니다. 회색 선형 그라데이션을 배경으로 사용하고 모든 자막에 전경 색상 papayawhip을 사용하고 굵은 텍스트 색상은 peachpuff로 지정하는 것이 좋습니다.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
개별 신호의 스타일 지정 및 태그 지정에 대해 자세히 알아보려면 WebVTT 사양에서 고급 예시를 확인하세요.
텍스트 트랙의 종류
<track> 요소의 kind 속성을 확인했나요? 특정 텍스트 트랙과 동영상의 관계를 나타내는 데 사용됩니다. kind 속성에 사용할 수 있는 값은 다음과 같습니다.
captions: 스크립트의 자막 및 오디오 번역(해당하는 경우) 청각 장애가 있거나 동영상이 음소거된 상태로 재생되는 경우에 적합합니다.subtitles: 자막입니다. 즉, 동영상의 기본 언어와 다른 언어로 된 음성 및 텍스트를 번역한 것입니다.descriptions: 동영상 콘텐츠의 시각적 부분을 설명하는 데 사용합니다. 시각 장애가 있는 사용자에게 적합합니다.chapters: 사용자가 동영상 내에서 탐색할 때 표시되도록 설계되었습니다.metadata: 표시되지 않으며 스크립트에서 사용할 수 있습니다.
이제 웹페이지에서 동영상을 사용할 수 있도록 하는 기본사항을 이해했으므로 더 복잡한 사용 사례에 관해 궁금할 수 있습니다. 미디어 프레임워크에 대해 알아보고 고급 기능을 제공하면서 웹페이지에 동영상을 추가하는 데 어떻게 도움이 되는지 알아보세요.