이 도움말에서는 WebVTT (Web Video Text Tracks) 형식, 자막과 같이 시간이 지정된 텍스트 데이터를 설명하는 데 사용됩니다. 해야 합니다.
접근성은 케이크 위에 장식하는 것과는 다릅니다. 컴퓨터에 어떤 장치를 올려두는 것은 나중에 소개할 수 있기를 바랍니다. 자막 및 스크린 리더 많은 사용자가 동영상을 경험할 수 있는 유일한 방법이며 법 또는 규정에 따라 요구되는 경우가 많습니다.
<track> 태그 추가
웹 동영상에 자막 또는 스크린 리더 설명을 추가하려면 <track>
태그를 <video> 태그 안에 넣습니다. 자막과 스크린 리더 외에도
설명, <track> 태그는 자막 및 챕터 제목으로도 사용할 수 있습니다.
<track> 태그는 검색엔진이 동영상의 내용을 이해하는 데도 도움이 됩니다.
하지만 이러한 기능은 이 도움말에서 다루지 않습니다.
<track> 태그는 둘 다 src가 있다는 점에서 <source> 요소와 유사합니다.
속성의 값을 포함합니다. <track> 태그의 경우
WebVTT 파일을 만듭니다. label 속성은 특정 트랙이 표시되는 방식을 지정합니다.
API에 액세스할 수 있습니다.
여러 언어로 트랙을 제공하려면 언어마다 별도의 <track> 태그를 추가하세요.
제공하는 WebVTT 파일을 만들고 srclang
속성의 값을 제공합니다.
두 개의 <track> 태그가 있는 <video> 태그의 예가 아래에 나와 있습니다. 또한
Glitch에서 볼 수 있는 샘플(출처)
<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>
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으로 패딩되어야 합니다.
2자리 숫자여야 하며 (값이 0인 경우 00) 밀리초는 3이어야 합니다.
숫자 (0의 경우 000)입니다. 이 전문 분야의
실시간 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를 사용하여 큐의 스타일을 지정하는 기능입니다. 다음 내용을 확인해 주세요.
을 입력합니다.
모든 자막 및 모든 굵은 텍스트 색상(peachpuff)이 papayawhip인 경우
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
개별 속성의 스타일 지정 및 태그 지정에 대해 자세히 알아보려면 WebVTT 사양에서 고급 예를 살펴보세요.
텍스트 트랙 종류
<track> 요소의 kind 속성을 발견했나요? Kubernetes는
특정 텍스트 트랙과 동영상의 관계를 나타냅니다. 이
kind 속성의 가능한 값은 다음과 같습니다.
captions: 스크립트의 자막 및 번역본의 경우 들을 수 있습니다. 청각 장애가 있거나 동영상이 음소거 상태로 재생됩니다.subtitles: 자막에는 동영상의 기본 언어와 다른 언어여야 합니다.descriptions: 동영상 콘텐츠의 시각적 부분에 대한 설명입니다. 시각 장애가 있는 사용자에게 적합합니다.chapters: 사용자가 있습니다.metadata: 표시되지 않으며 스크립트에서 사용할 수 있습니다.
이제 누구나 이용할 수 있는 동영상 제공과 관련된 기본사항을 이해하셨을 것입니다. 더 복잡한 사용 사례에 대해 궁금할 것입니다. 다음으로 미디어 프레임워크와 이를 통해 콘텐츠를 추가하는 방법을 알아보세요. 고급 기능을 제공하는 동시에 웹 페이지에 동영상을 게시할 수 있습니다.