WebVTTを使用したビデオアクセシビリティの改善

「ネットワークの力はその普遍性にあります。障害者であろうとなかろうと、誰にとってもアクセスできます。」 - ティムバーナーズリー

ウェブサイトの開発においてアクセシビリティが重要です。ビデオコンテンツがますます一般的になるにつれて、字幕コンテンツの需要も高まっています。 WebVTTは、サブタイトル形式として、既存のWeb 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」で、次に3行目の時間範囲（この場合は0〜3秒）が続きます。時間範囲が必要です。それ以外の場合、WebVTTファイルは単に機能せず、エラーを表示したりログにしたりすることさえしません。最後に、時間範囲の下の各線は、その範囲内に含まれる字幕を表します。

単一の時間範囲に複数の字幕を含めることができることに注意してください。ハイフンを使用してラインの始まりを示すことができますが、これは必要ではなく、スタイルの問題です。

時間範囲は、HH：MM：SS.TTまたはMM：SS.TTの2つの形式のいずれかになります。各セクションは特定のルールに従います。

• 時間（HH）：少なくとも2桁
• 議事録（mm）：00〜59（包括的）
• 秒：00〜59（包括的）
• Milliseconds（TT）：000〜999（包括的）

最初はこれは非常に気が遠くなるように思えました。誰がこれを手動で入力して調整できるのか疑問に思うかもしれません。幸いなことに、このプロセスを簡素化するツールがあります。たとえば、YouTubeは音声認識を使用してビデオ字幕を自動的に追加できます。また、字幕をVTTファイルとしてダウンロードできます。しかし、それだけではありません。 WebVTTは、YouTubeビデオにVTTファイルをアップロードすることにより、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には、少なくとも1つのスペースが必要です。
  • それを使用して、ファイルに説明を追加できます。
  • テキストタイトルでは、newlineまたはstring " - >"以外のものを使用できます。
• 空白は、2つの連続したNewline文字に相当します。
• ゼロ以上のプロンプトまたはコメント。
• ゼロ以上の空白線。

注： BOMは、テキストファイルのUnicodeエンコードを示すUnicode文字です。

大胆で、斜体で下線が引かれています - ああ、私の神！

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軸上の字幕の位置を制御します。 Verticalが指定されている場合（後で説明します）、代わりに、X軸に字幕が表示される場所を示します。

整数とパーセンテージは、行の値を指定するときに完全に許容可能な単位です。整数を使用する場合、各行の距離は最初の行の高さに等しくなります（水平方向の観点から）。したがって、たとえば、サブタイトルの最初の行の高さが50pxに等しく、指定された線の値が2、サブタイトルの方向が水平であると仮定します。これは、字幕が上部から100px（50px times 2）で配置され、ビデオ境界の最大の座標に等しくなることを意味します。負の整数を使用すると、値が減少するにつれて下から上昇します（または、垂直：LRが指定されている場合、右から左に移動し、逆も同様です）。字幕は画面外に配置され、さまざまなブラウザーで一貫性がないため、ここでは注意してください。能力が大きければ大きいほど、責任が大きくなります！

パーセンテージの場合、値は0-100％（包括的）の間でなければなりません（申し訳ありませんが、ここには200％の巨大な値はありません）。垂直：lrまたは垂直：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：位置

位置字軸に字幕が表示される位置を指定します。垂直が指定されている場合、位置は代わりに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の方向を覚えておくべき1つのトリックは、線がテキストストリームに垂直な位置を指定し、[テキストストリームに平行な位置を指定する]です。これが、垂直を指定すると、ラインが突然水平軸に沿って移動し、位置が垂直軸に沿って移動する理由です。

設定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：整列します

Alignは、テキストが水平方向に表示される場所を指定します。垂直が指定されている場合、代わりに垂直アライメントを制御します。

私たちが持っている値は、開始、中、端、左、右です。垂直が指定されていない場合、アライメントはまさにそれらのように聞こえるものです。垂直が指定されている場合、それらは実際には上、中央（垂直）、および下になります。左と右の代わりに開始と終了を使用することは、Unicode-Bidi CSS属性に基づいて平易なテキスト値を調整できるようにするためのより柔軟な方法です。

Alignは垂直の影響を受けないことに注意してください：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>

サブタイトルファイルを解析してレンダリングすると、上記の強調表示された行はユーザーの前に完全に隠されます。コメントもマルチラインにすることができます。

注目すべき3つの非常に重要なキャラクター/文字列があり、コメントには使用できません。別の方法として、エスケープキャラクターを使用できます。

他の興味深いWebVTT機能

字幕をカスタマイズおよび制御するための非常に賢い方法を簡単に確認しますが、少なくとも執筆時点では、これらの方法には一貫したブラウザのサポートがありません。

はい、字幕をスタイリングできます！

実際、WebVTT字幕はスタイリングできます。たとえば、サブタイトルの背景を赤に設定するには、:: cue pseudo-elementに背景プロパティを設定します。

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

WebVTTファイルでインラインHTML形式を使用できることを覚えていますか？まあ、私たちもそれらを選ぶことができます。たとえば、italic（ ）要素を選択します。

 <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>

ルビータグ

Rubyタグは、字幕の上に小さなコメント文字を表示する方法です。

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000</code>このサブタイトルには、その上にテキストが表示されます<rt>このテキストは、字幕の上に表示されます。</rt>

結論は

それはすべてWebVTTについてです！これは、特にビデオを使用している場合、ウェブサイトのアクセシビリティを大幅に改善する機会を提供する非常に便利なテクノロジーです。より良いアイデアを得るために、いくつかの字幕を自分で書いてみてください！

以上がWebVTTを使用したビデオアクセシビリティの改善の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。