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

ウェブサイトの開(kāi)発においてアクセシビリティが重要です。ビデオコンテンツがますます一般的になるにつれて、字幕コンテンツの需要も高まっています。 WebVTTは、サブタイトル形式として、既存のWeb APIに簡(jiǎn)単に統(tǒng)合できるテクノロジーであり、サブタイトルコンテンツの問(wèn)題を解決します。

この記事ではこれについて説明します。もちろん、WebVTTは最も基本的なレベルで字幕ですが、さまざまな方法で実裝でき、ビデオ（およびサブタイトルコンテンツ自體）がユーザーへのアクセスを容易にします。

WebVTT形式の概要

最初：webvttは、テキスト「webvtt」を含むファイルタイプと、タイムスタンプを備えたサブタイトル行です。例は次のとおりです。

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥(niǎo)鳴聲] - 真美好的一天！ 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的確如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

少し奇妙ですが、それは理にかなっていますよね？ご覧のとおり、最初の行は「WebVTT」で、次に3行目の時(shí)間範(fàn)囲（この場(chǎng)合は0?3秒）が続きます。時(shí)間範(fàn)囲が必要です。それ以外の場(chǎng)合、WebVTTファイルは単に機(jī)能せず、エラーを表示したりログにしたりすることさえしません。最後に、時(shí)間範(fàn)囲の下の各線(xiàn)は、その範(fàn)囲內(nèi)に含まれる字幕を表します。

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

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

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

最初はこれは非常に気が遠(yuǎn)くなるように思えました。誰(shuí)がこれを手動(dòng)で入力して調(diào)整できるのか疑問(wèn)に思うかもしれません。幸いなことに、このプロセスを簡(jiǎn)素化するツールがあります。たとえば、YouTubeは音聲認(rèn)識(shí)を使用してビデオ字幕を自動(dòng)的に追加できます。また、字幕を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>

タグは、ビデオで「再生」するスクリプトのようなものです。同じビデオ要素で複數(shù)のトラックを使用できます。デフォルトのプロパティは、トラックが自動(dòng)的に有効になることを示します。

ちなみに、すべてのプロパティを見(jiàn)てみましょう。

• Srclangはトラックの言語(yǔ)を示します。
• 種類(lèi)はトラックのタイプを表し、5つのタイプがあります。
  • 字幕は通常、ビデオのさまざまな部分の翻訳と説明です。
  • 視覚障害のあるユーザーがビデオで何が起こっているのかを理解するのを支援することについて説明します。
  • 字幕は、聴覚障害のあるユーザー向けのオーディオの代替品を提供します。
  • メタデータはスクリプトで使用されるトラックであり、ユーザーが見(jiàn)ることができません。
  • 章はビデオコンテンツをナビゲートするのに役立ちます。
• ラベルは、サブタイトルトラックに表示されるテキストトラックのタイトルです
• SRCはトラックのソースファイルです。クロスリギンが指定されていない限り、クロスオリジンから來(lái)ることはできません。

WebVTTはビデオ用に設(shè)計(jì)されていますが、それらを配置することでオーディオファイルを配置できます<video></video>オーディオで要素で使用します。

WebVTTファイルの構(gòu)造を深く検討します

MDNは優(yōu)れたドキュメントを提供し、最大6つのコンポーネントを含むWebVTTファイルのボディ構(gòu)造の概要を説明します。これがMDNの內(nèi)訳です：

• オプションのバイトオーダーマーキング（bom）
• 文字列「webvtt」
• webvttの右側(cè)のオプションのテキストタイトル。
  • WebVTTには、少なくとも1つのスペースが必要です。
  • それを使用して、ファイルに説明を追加できます。
  • テキストタイトルでは、newlineまたはstring " - >"以外のものを使用できます。
• 空白は、2つの連続したNewline文字に相當(dāng)します。
• ゼロ以上のプロンプトまたはコメント。
• ゼロ以上の空白線(xiàn)。

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

大膽で、斜體で下線(xiàn)が引かれています - ああ、私の神！

WebVTTファイルでインラインHTML形式を間違いなく使用できます！これらはすべて誰(shuí)にでも馴染みがあります： 、そして。 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>下劃線(xiàn)文本</u></code>

プロンプト設(shè)定

プロンプト設(shè)定は、字幕の場(chǎng)所を制御するために使用されるオプションのテキスト文字列です。ビデオに字幕を配置できるなど、CSSの要素を配置するようなものです。

たとえば、字幕を迅速な時(shí)間の右側(cè)に配置し、字幕が水平に表示されるか垂直に表示されるかを制御し、字幕がどのように整列し、垂直に整列しているかを定義できます。

使用できる設(shè)定は次のとおりです。

設(shè)定1：行

ラインは、y軸上の字幕の位置を制御します。 Verticalが指定されている場(chǎng)合（後で説明します）、代わりに、X軸に字幕が表示される場(chǎng)所を示します。

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

パーセンテージの場(chǎng)合、値は0-100％（包括的）の間でなければなりません（申し訳ありませんが、ここには200％の巨大な値はありません）。垂直：lrまたは垂直：RLが指定されていない限り、より高い値は上から下に字幕を移動(dòng)します。その場(chǎng)合、字幕はそれに応じてX軸上に移動(dòng)します。

値が増加すると、字幕はビデオ境界の下に表示されます。値が減少すると（負(fù)の値を含む）、字幕が上に表示されます。

模範(fàn)を示さずにこれを想像するのは難しいですよね？これがコードに変換される方法は次のとおりです。

 <code>00:00:00.000 --> 00:00:03.000 line:50%此字幕應(yīng)水平放置在屏幕的大致中心。</code>

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

 <code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1此字幕應(yīng)垂直放置在視頻的左側(cè)。</code>

 <code>00:00:09.000 --> 00:00:12.000 line:0字幕應(yīng)水平放置在屏幕頂部。</code>

設(shè)定2：垂直

垂直は、字幕が垂直に表示され、行の設(shè)定で指定された方向に移動(dòng)することを示します。一部の言語(yǔ)は左から右に表示されませんが、上から下に表示する必要があります。

<code> 00:00:00.000 --> 00:00:03.000 vertical:rl此字幕應(yīng)垂直顯示。</code>

 <code>00:00:00.000 --> 00:00:03.000 vertical:lr此字幕應(yīng)垂直顯示。</code>

設(shè)定3：位置

位置字軸に字幕が表示される位置を指定します。垂直が指定されている場(chǎng)合、位置は代わりにy軸に字幕が表示される位置を指定します。 0％から100％（包括的）の間の整數(shù)でなければなりません。

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

この時(shí)點(diǎn)で、ラインと位置はCSS Flexboxプロパティの整列と正當(dāng)なコンテンツに似ていることに気付くかもしれませんが、垂直はフレックス方向に非常に似ています。 WebVTTの方向を覚えておくべき1つのトリックは、線(xiàn)がテキストストリームに垂直な位置を指定し、[テキストストリームに平行な位置を指定する]です。これが、垂直を指定すると、ラインが突然水平軸に沿って移動(dòng)し、位置が垂直軸に沿って移動(dòng)する理由です。

設(shè)定4：サイズ

サイズサブタイトルの幅を指定します。垂直が指定されている場(chǎng)合、代わりに字幕の高さを設(shè)定します。他の設(shè)定と同様に、0％から100％（包括的）の整數(shù)でなければなりません。

 <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%此字幕將水平填充整個(gè)屏幕。</code>

設(shè)定5：整列します

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

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

Alignは垂直の影響を受けないことに注意してください：LRまたは垂直：RL。

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start此字幕將出現(xiàn)在屏幕左側(cè)。 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此字幕將出現(xiàn)在屏幕左側(cè)。 00:00:12.000 --> 00:00:15.000 align:right此字幕將出現(xiàn)在屏幕右側(cè)。</code>

webvttコメント

WebVTTのコメントは、HTML、CSS、JavaScript、およびその他の言語(yǔ)で考えているコメントと同様に、ファイルソーステキストを読むときにのみ表示されるテキスト文字列です。コメントにはラインブレークを含めることができますが、空の行（本質(zhì)的に2行のニューライン）は含まれません。

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥(niǎo)鳴聲] - 真美好的一天！ NOTE 這是一個(gè)注釋。觀(guān)看字幕的任何人都不會(huì)看到它。 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的確如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

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

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

他の興味深いWebVTT機(jī)能

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

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

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

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

要素は、プロンプト識(shí)別子からアクセスすることもできます。プロンプト識(shí)別子は、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此提示標(biāo)識(shí)符將帶有下劃線(xiàn)！ cue identifier 3 00:00:04.000 --> 00:00:06.000這個(gè)不會(huì)受到影響，就像第一個(gè)一樣！</code>

さまざまなタイプのタグ

多くのタグを使用して、字幕をフォーマットできます。警告があります。これらのタグは、親切な屬性の章を持つ要素では使用できません。使用できるいくつかのフォーマットされたタグを次に示します。

クラスタグ

クラスタグを使用してWebVTTタグのクラスを定義でき、CSSを使用してこれらのクラスを選択できます。テキストを黃色に変えるクラスがかったクラスがあるとします。このタグを字幕で使用できます。フォント、フォントの色、背景色など、このように多くのスタイルを制御できます。

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

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000此文本應(yīng)為黃色。此文本將為默認(rèn)顏色。 00:00:03.000 --> 00:00:06.000此文本應(yīng)為紅色。此文本將為默認(rèn)顏色。</code>

タイムスタンプタグ

特定の時(shí)間に字幕を表示したい場(chǎng)合は、タイムスタンプタグを使用する必要があります。それらは、正確な時(shí)點(diǎn)への微調(diào)整された字幕のようなものです。タグの時(shí)間は、字幕の特定の時(shí)間範(fàn)囲內(nèi)でなければならず、各タイムスタンプタグは前の時(shí)間より遅い必要があります。

 <code>WEBVTT 00:00:00.000 --> 00:00:07.000此文本將顯示超過(guò)6 秒。</code>

音聲タグ

音聲タグは、誰(shuí)が話(huà)しているのかを特定するのに役立つため、簡(jiǎn)潔です。

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000鮑勃，你今天過(guò)得怎么樣？ 00:00:03.000 --> 00:00:06.000很好，你呢？</code>

ルビータグ

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

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

結(jié)論は

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

以上がWebVTTを使用したビデオアクセシビリティの改善の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。