WebVTT의 비디오 접근성 향상

"네트워크의 힘은 보편성에 있습니다. 장애인이든 아니든 모든 사람이 접근 할 수 있습니다." -Tim Berners-Lee

웹 사이트 개발에서 접근성은 중요합니다. 비디오 컨텐츠가 점점 인기를 끌면서 자막 콘텐츠에 대한 수요도 증가하고 있습니다. WebVTT는 자막 형식으로 기존 웹 API에 쉽게 통합되어 자막 컨텐츠의 문제를 해결하는 기술입니다.

이 기사는 이것에 대해 논의 할 것입니다. 물론 WebVTT는 가장 기본적인 수준의 자막이지만 여러 가지 방법으로 구현할 수 있으므로 비디오 (및 자막 컨텐츠 자체)를 사용자에게 쉽게 액세스 할 수 있습니다.

WebVTT 형식 소개

첫째 : WebVTT는 텍스트 "webvtt"와 타임 스탬프가있는 자막 줄이 포함 된 파일 유형입니다. 예는 다음과 같습니다.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鸟鸣声] - 真美好的一天！ 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的确如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

조금 이상하지만 말이 맞습니까? 보시다시피, 첫 번째 줄은 "webvtt"이고, 세 번째 줄의 시간 범위 (이 경우 0 ~ 3 초)입니다. 시간 범위가 필요합니다. 그렇지 않으면 WebVTT 파일은 단순히 작동하지 않으며 정보를 표시하거나 로그 오류도 표시하지 않습니다. 마지막으로, 시간 범위 아래의 각 선은 해당 범위 내에 포함 된 자막을 나타냅니다.

단일 시간 범위에 여러 자막을 포함시킬 수 있습니다. 하이픈은 선의 시작을 나타내는 데 사용될 수 있지만, 이것은 필요하지 않으며 스타일 문제입니다.

시간 범위는 두 가지 형식 중 하나 일 수 있습니다. HH : MM : SS.TT 또는 MM : SS.TT. 각 섹션은 특정 규칙을 따릅니다.

• 시간 (HH) : 적어도 두 자리
• 분 (mm) : 00과 59 사이 (포함)
• 초 : 00과 59 사이 (포함)
• 밀리 초 (TT) : 000에서 999 사이 (포함)

처음에 이것은 꽤 어려워 보였다. 이 모든 것을 수동으로 입력하고 조정할 수있는 사람이 궁금 할 수도 있습니다. 다행히도이 프로세스를 단순화하는 도구가 있습니다. 예를 들어 YouTube는 음성 인식을 사용하여 비디오 자막을 자동으로 추가 할 수 있으며 VTT 파일로 자막을 다운로드 할 수 있습니다! 그러나 그게 전부는 아닙니다. WebVTT는 VTT 파일을 YouTube 비디오에 업로드하여 YouTube에서도 사용할 수도 있습니다.

이 파일이 생성되면 HTML5 비디오 요소에 포함시킬 수 있습니다.

<code><video autoplay="autoplay" controls="controls" height="150" width="300"><track default="" kind="captions" label="English" src="your_caption_file.vtt" srclang="en"></track></video></code>

태그는 비디오와 함께 "플레이"하는 스크립트와 비슷합니다. 동일한 비디오 요소에서 여러 트랙을 사용할 수 있습니다. 기본 속성은 트랙이 자동으로 활성화되어 있음을 나타냅니다.

그건 그렇고, 모든 속성을 살펴 보겠습니다.

• Srclang은 트랙의 언어를 나타냅니다.
• 종류는 트랙의 유형을 나타내며 5 가지 유형이 있습니다.
  • 자막은 일반적으로 비디오의 다른 부분에 대한 번역 및 설명입니다.
  • 시각 장애가있는 사용자가 비디오에서 무슨 일이 일어나고 있는지 이해하는 데 도움이됩니다.
  • 자막은 청각 장애가있는 사용자를위한 오디오 대안을 제공합니다.
  • 메타 데이터는 스크립트에서 사용하는 트랙이며 사용자는 볼 수 없습니다.
  • 챕터는 비디오 컨텐츠를 탐색하는 데 도움이됩니다.
• 레이블은 자막 트랙에 나타나는 텍스트 트랙의 제목입니다.
• SRC는 트랙의 소스 파일입니다. 크로스 코리 린이 명시되지 않으면 크로스 오리 진에서 나올 수 없습니다.

WebVTT는 비디오 용으로 설계되었지만 오디오 파일을 배치하여 오디오 파일을 배치 할 수 있습니다.<video></video> 오디오와 함께 요소에 사용하십시오.

WebVTT 파일의 구조를 깊이 탐색하십시오

MDN은 우수한 문서를 제공하고 최대 6 개의 구성 요소를 포함하는 WebVTT 파일의 신체 구조를 간략하게 설명합니다. 다음은 MDN의 고장입니다.

• 선택적 바이트 주문 마킹 (BOM)
• 문자열 "webvtt"
• webvtt의 오른쪽에 대한 선택적 텍스트 제목.
  • WebVTT는 그 후에 최소한 하나의 공간이 있어야합니다.
  • 파일에 설명을 추가하는 데 사용할 수 있습니다.
  • 텍스트 제목에서 Newline 또는 String 이외의 다른 것을 사용할 수 있습니다.
• 빈 줄은 두 개의 연속 Newline 문자와 같습니다.
• 제로 또는 더 이상의 프롬프트 또는 의견.
• 0 이상 빈 줄.

참고 : BOM은 텍스트 파일의 유니 코드 인코딩을 나타내는 유니 코드 문자입니다.

대담하고 이탤릭체이며 밑줄이 그어져 있습니다 - 오 마이 갓!

WebVTT 파일에서 인라인 HTML 형식을 확실히 사용할 수 있습니다! 이것들은 모두 모두에게 친숙합니다 . 당신은 당신이 HTML에있는 것과 같은 방식으로 정확히 사용합니다.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start这是<b>粗体文本</b>00:00:03.000 --> 00:00:06.000 align:middle这是<i>斜体文本</i>00:00:06.000 --> 00:00:09.000 vertical:rl align:middle这是<u>下划线文本</u></code>

프롬프트 설정

프롬프트 설정은 자막 위치를 제어하는 ​​데 사용되는 텍스트 문자열입니다. 비디오에 자막을 배치 할 수있는 것과 같은 CSS의 포지셔닝 요소와 비슷합니다.

예를 들어, 자막을 프롬프트 시간의 오른쪽에 배치하고, 자막이 수평 또는 수직으로 표시되는지 여부를 제어하고 자막이 어떻게 정렬되고 수직으로 정의되는지 정의 할 수 있습니다.

다음은 사용할 수있는 설정입니다.

설정 1 : 행

라인은 Y 축에서 자막 위치를 제어합니다. 수직이 지정되면 (나중에 논의 할 것임), 선은 대신 x 축에 자막이 표시되는 위치를 나타냅니다.

정수 및 백분율은 선 값을 지정할 때 완전히 허용 가능한 단위입니다. 정수를 사용하는 경우 각 행의 거리는 첫 번째 행의 높이와 같습니다 (수평 관점에서). 예를 들어, 자막의 첫 번째 줄의 높이가 50px와 같고 지정된 선 값은 2이고 자막의 방향은 수평이라고 가정합니다. 이는 자막이 상단에서 100px (50px 시간 2)로 배치되어 비디오 경계의 좌표와 동일합니다. 음의 정수를 사용하면 값이 감소함에 따라 바닥에서 위로 올라갑니다 (또는 수직 : LR이 지정되면 오른쪽에서 왼쪽으로 이동하고 그 반대도 마찬가지입니다). 자막이 화면에서 오프 스크린을 배치하고 다른 브라우저에서 일치하지 않으므로 여기에서주의하십시오. 능력이 클수록 책임이 커집니다!

백분율의 경우 값은 0-100% (포함) 사이 여야합니다 (죄송합니다. 여기에는 200%의 거대 가치가 없습니다). 수직 : LR : RL : RL이 지정되지 않는 한 더 높은 값은 자막을 위에서 아래로 이동합니다.이 경우 자막은 그에 따라 x 축으로 이동합니다.

값이 증가함에 따라 자막이 비디오 경계 아래에 나타납니다. 값이 감소함에 따라 (음수 값 포함) 자막이 위에 나타납니다.

예제 없이는 이것을 상상하기가 어렵습니다. 다음은 코드로 변환되는 방법입니다.

 <code>00:00:00.000 --> 00:00:03.000 line:50%此字幕应水平放置在屏幕的大致中心。</code>

 <code>00:00:03.000 --> 00:00:06.000 vertical:lr line:50%此字幕应垂直放置在屏幕的大致中心。</code>

 <code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1此字幕应垂直放置在视频的左侧。</code>

 <code>00:00:09.000 --> 00:00:12.000 line:0字幕应水平放置在屏幕顶部。</code>

설정 2 : 수직

수직은 자막이 수직으로 표시되고 선 설정에 의해 지정된 방향으로 이동 함을 나타냅니다. 일부 언어는 왼쪽에서 오른쪽으로 표시되지 않지만 위에서 아래로 표시해야합니다.

<code> 00:00:00.000 --> 00:00:03.000 vertical:rl此字幕应垂直显示。</code>

 <code>00:00:00.000 --> 00:00:03.000 vertical:lr此字幕应垂直显示。</code>

설정 3 : 위치

위치 위치 자막이 x 축에 표시되는 위치를 지정합니다. 수직이 지정되면 위치는 대신 y 축에 자막이 표시되는 위치를 지정합니다. 0%와 100% (포함) 사이의 정수 여야합니다.

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl position:100%此字幕将垂直显示并在底部。 00:00:03.000 --> 00:00:06.000 vertical:rl position:0%此字幕将垂直显示并在顶部。</code>

이 시점에서 라인과 위치는 CSS Flexbox 속성 정렬 및 정당화와 유사하지만 수직은 플렉스 방향과 매우 유사하다는 것을 알 수 있습니다. WebVTT 방향을 기억하는 한 가지 트릭은 선이 텍스트 스트림에 수직 인 위치를 지정하고 위치는 텍스트 스트림과 평행 한 위치를 지정한다는 것입니다. 그렇기 때문에 수직을 지정하면 선이 갑자기 수평 축을 따라 움직이고 위치가 세로 축을 따라 이동합니다.

설정 4 : 크기

크기는 자막의 너비를 지정합니다. 수직이 지정되면 대신 자막 높이를 설정합니다. 다른 설정과 마찬가지로, 그것은 0%에서 100% 사이의 정수 여야합니다 (포함).

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl size:50%此字幕将垂直填充屏幕的一半。</code>

 <code>00:00:03.000 --> 00:00:06.000 position:0%此字幕将水平填充整个屏幕。</code>

설정 5 : 정렬

정렬 텍스트가 수평 방향으로 나타날 위치를 지정합니다. 세로가 지정되면 대신 수직 정렬을 제어합니다.

우리가 가진 가치는 : 시작, 중간, 끝, 왼쪽 및 오른쪽입니다. 수직이 지정되지 않으면 정렬이 정확히 들리는 것입니다. 수직이 지정되면 실제로 상단, 중간 (수직) 및 하단이됩니다. 왼쪽과 오른쪽 대신 시작 및 종료를 사용하는 것은 유니 코드 바이디 CSS 속성을 기반으로 일반 텍스트 값을 정렬 할 수있는보다 유연한 방법입니다.

정렬은 수직 : LR 또는 수직 : RL의 영향을받지 않습니다.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start此字幕将出现在屏幕左侧。 00:00:03.000 --> 00:00:06.000 align:middle此字幕将水平位于屏幕中央。 00:00:06.000 --> 00:00:09.000 vertical:rl align:middle此字幕将垂直位于屏幕中央。 00:00:09.000 --> 00:00:12.000 vertical:rl align:end此字幕将垂直位于屏幕的右下角，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 vertical:lr align:end此字幕将垂直位于屏幕底部，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 align:left此字幕将出现在屏幕左侧。 00:00:12.000 --> 00:00:15.000 align:right此字幕将出现在屏幕右侧。</code>

webvtt 댓글

WebVTT 주석은 HTML, CSS, JavaScript 및 기타 언어에서 우리가 생각하는 주석과 마찬가지로 파일 소스 텍스트를 읽을 때만 볼 수있는 텍스트 문자열입니다. 주석에는 라인 브레이크가 포함될 수 있지만 빈 줄 (본질적으로 2 라인 신형)은 포함되지 않습니다 .

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鸟鸣声] - 真美好的一天！ NOTE 这是一个注释。观看字幕的任何人都不会看到它。 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的确如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

자막 파일을 구문 분석하고 렌더링하면 위의 강조 표시된 줄은 사용자 앞에 완전히 숨겨집니다. 댓글은 멀티 라인 일 수도 있습니다.

주목할만한 세 가지 매우 중요한 문자/문자열이 있으며 의견에 사용할 수 없습니다. 대안으로 탈출 문자를 사용할 수 있습니다.

다른 흥미로운 WebVTT 기능

자막을 사용자 정의하고 제어하는 ​​몇 가지 영리한 방법을 간단히 살펴볼 것입니다. 그러나 적어도 글을 쓰는 시점에는 이러한 방법으로 일관된 브라우저 지원이 부족합니다.

예, 우리는 자막을 스타일링 할 수 있습니다!

실제로 WebVTT 자막은 스타일을 지정할 수 있습니다. 예를 들어, 자막의 배경을 빨간색으로 설정하려면 :: Cue Pseudo Element에 배경 속성을 설정하십시오.

 <code>video::cue { background: red; }</code>

WebVTT 파일에서 인라인 HTML 형식을 사용할 수 있습니까? 글쎄, 우리도 그들을 선택할 수 있습니다. 예를 들어, 이탤릭체 ( ) 요소를 선택하십시오.

 <code>video::cue(i) { color: yellow; }</code>

WebVTT 파일은 HTML 파일과 매우 유사한 스타일 블록을 지원합니다.

 <code>WEBVTT STYLE ::cue { color: blue; font-family: "Source Sans Pro", sans-serif; }</code>

프롬프트 식별자를 통해 요소에 액세스 할 수도 있습니다. 프롬프트 식별자는 HTML과 동일한 탈출 메커니즘을 사용합니다.

 <code>WEBVTT STYLE ::cue(#middle\ cue\ identifier) { text-decoration: underline; } ::cue(#cue\ identifier\ \33) { font-weight: bold; color: red; } first cue identifier 00:00:00.000 --> 00:00:02.000你好，世界！ middle cue identifier 00:00:02.000 --> 00:00:04.000此提示标识符将带有下划线！ cue identifier 3 00:00:04.000 --> 00:00:06.000这个不会受到影响，就像第一个一样！</code>

다른 유형의 태그

많은 태그를 사용하여 자막을 포맷 할 수 있습니다. 경고가 있습니다. 이 태그는 친절한 속성 장을 가진 요소에서 사용할 수 없습니다. 다음은 사용할 수있는 몇 가지 형식의 태그입니다.

클래스 태그

클래스 태그를 사용하여 WebVTT 태그에서 클래스를 정의 할 수 있으며 CSS를 사용하여 이러한 클래스를 선택할 수 있습니다. 텍스트를 노란색으로 바꾸는 클래스. 자막 에서이 태그를 사용할 수 있습니다. 글꼴, 글꼴 색상 및 배경색과 같은 이러한 방식으로 많은 스타일을 제어 할 수 있습니다.

 <code>/* 我们的CSS 文件*/ .yellowish { color: yellow; } .redcolor { color: red; }</code>

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000此文本应为黄色。此文本将为默认颜色。 00:00:03.000 --> 00:00:06.000此文本应为红色。此文本将为默认颜色。</code>

타임 스탬프 태그

특정 시간에 자막을 표시하려면 타임 스탬프 태그를 사용해야합니다. 그것들은 정확한 시점에 미세 조정 자막과 같습니다. 태그의 시간은 자막의 주어진 시간 범위 내에 있어야하며 각 타임 스탬프 태그는 이전의 태그보다 늦어야합니다.

 <code>WEBVTT 00:00:00.000 --> 00:00:07.000此文本将显示超过6 秒。</code>

음성 태그

음성 태그는 말하는 사람을 식별하는 데 도움이되기 때문에 간결합니다.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000鲍勃，你今天过得怎么样？ 00:00:03.000 --> 00:00:06.000很好，你呢？</code>

루비 태그

루비 태그는 자막 위에 작은 주석 문자를 표시하는 방법입니다.

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000</code> 이 자막에는 그 위에 텍스트가 표시됩니다<rt> 이 텍스트는 자막 위에 표시됩니다.</rt>

결론적으로

그것은 WebVTT에 관한 모든 것입니다! 이것은 특히 비디오를 사용하는 경우 웹 사이트의 접근성을 크게 향상시킬 수있는 매우 유용한 기술입니다. 더 나은 아이디어를 얻으려면 자막을 직접 작성하십시오!

위 내용은 WebVTT의 비디오 접근성 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!