From d112517208c94d4ba61830ab878720faa8e5a9f6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 17 Sep 2024 11:46:34 +0900 Subject: [PATCH] =?UTF-8?q?2024/08/09=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#23528)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/08/09 時点の英語版に基づき更新 * Update files/ja/web/api/webvtt_api/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ja/web/api/webvtt_api/index.md | 739 ++++++++++----------------- 1 file changed, 259 insertions(+), 480 deletions(-) diff --git a/files/ja/web/api/webvtt_api/index.md b/files/ja/web/api/webvtt_api/index.md index d6bdf1b9d40aed..d27e070e3ec19d 100644 --- a/files/ja/web/api/webvtt_api/index.md +++ b/files/ja/web/api/webvtt_api/index.md @@ -1,589 +1,376 @@ --- -title: ウェブビデオテキストトラック形式 (WebVTT) +title: WebVTT API slug: Web/API/WebVTT_API l10n: - sourceCommit: c6dbc4ff96451887b908b46c8e70bcfec1c2c48c + sourceCommit: c99afd3cafe73c93831bd73ad1dac285c3c713b1 --- {{DefaultAPISidebar("WebVTT")}} -**ウェブビデオテキストトラック形式 (WebVTT)** は、{{HTMLElement("track")}} 要素を使用して時間指定のテキストトラック（字幕やキャプションなど）を表示するための形式です。 WebVTT ファイルの主な目的は、テキストオーバーレイを {{HTMLElement("video")}} に追加することです。WebVTT はテキストベースの形式であり、{{Glossary("UTF-8")}} を使用してエンコードする必要があります。スペースを使用できる場所では、タブも使用できます。これらのトラックと、正しい時刻にテキストの再生を実行するために必要なデータを表現および管理するために使用できる小さな API もあります。 +**ウェブ動画テキストトラック** (**WebVTT**) 動画や音声トラックなどの他のメディアと時間軸を合わせて配置された特定のテキスト「キュー」を提供するテキストトラックです。**WebVTT API** は、これらのテキストトラックを定義し、操作するための機能を提供します。 +WebVTT API は主に、動画コンテンツに重ねて表示される字幕やキャプションの表示に使用されますが、他にも、ナビゲーションを容易にするためのチャプター情報の提供や、音声や動画コンテンツと時間軸を合わせて配置する必要がある一般的なメタデータの提供など、他にも用途があります。 -## WebVTT ファイル +## 概念と使用方法 -WebVTT の MIME タイプは `text/vtt` です。 +テキストトラックとは、時間軸に沿って配置されたテキストデータを格納するコンテナーで、映像や音声トラックと並行して再生することで、コンテンツの翻訳、文字起こし、概要を提供することができます。 +動画や音声のメディア要素は、異なる種類や言語のトラックを定義することができ、ユーザーは好みやニーズに応じて適切なトラックを表示することができます。 -WebVTT ファイル（`.vtt`）にはキューが含まれています。キューは、次のように単一行または複数行になります。 +指定できるテキストデータの種類は以下の一覧に掲載されています。 +ブラウザーがテキストトラックのすべてに対応しているとは限らないことに注意してください。 -```plain -WEBVTT - -00:01.000 --> 00:04.000 -- 液体窒素を絶対に飲まないでください。 +- `subtitles` は、音声のダイアログにテキスト翻訳を提供します。 + これは既定のテキストトラックの型であり、使用する場合はソース言語を指定する必要があります。 +- `captions` は、話されたテキストの文字起こしを提供し、音楽や背景の音など、の音声に関する情報を記載することができます。 + これらは聴覚障害のあるユーザーのためのものです。 +- `chapters` は、高レベルなナビゲーション情報を提供し、ユーザーが関連するコンテンツに簡単に切り替えられるようにします。 +- `metadata` は、他にもあらゆる時系列情報に用いられます。 -00:05.000 --> 00:09.000 -- それはあなたの胃に穴をあけます。 -- あなたは死ぬ可能性があります。 -``` - -## WebVTT の本体 +トラック内の時間軸に沿って配置された個々のテキストデータの単位は「キュー」と呼ばれます。 +各キューには開始時刻、終了時刻、テキスト本文が含まれます。 +また、表示領域、位置指定、配置、サイズに影響を与える「キュー設定」を持つこともできます。 +最後に、キューにはラベルを付けることができ、CSS スタイル指定のためにキューを選択する際に使用することができます。 -WebVTT の構造は、以下のコンポーネントで構成されています。一部のコンポーネントはオプションです。 +テキストトラックとキューは、[WebVTT ファイル形式](/ja/docs/Web/API/WebVTT_API/Web_Video_Text_Tracks_Format)を使用してファイル内で定義し、その後、特定の {{HTMLElement("video")}} 要素に {{HTMLElement("track")}} 要素を使用して関連付けられます。 -- オプションのバイトオーダーマーク (BOM)。 -- 文字列 "`WEBVTT`"。 -- `WEBVTT` の右側にあるオプションのテキストヘッダー。 +あるいは、{{domxref("TextTrack")}} を JavaScript で [`HTMLMediaElement.addTextTrack()`](/ja/docs/Web/API/HTMLMediaElement/addTextTrack) を使用してメディア要素にテキストトラックを追加し、個々の {{domxref("VTTCue")}} オブジェクトを {{domxref("TextTrack.addCue()")}} によってトラックに追加することができます。 - - `WEBVTT` の後には少なくとも 1 つのスペースが必要です。 - - これを使用してファイルに説明を追加できます。 - - 改行または文字列 "`-->`" を除いて、テキストヘッダーには何でも使用できます。 +{{cssxref("::cue")}} は [CSS](/ja/docs/Web/CSS) [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、HTML と WebVTT ファイルのどちらでも使用することができ、特定の要素、キュー内の特定のタグ、VTT クラス、または特定のラベルを持つキューのスタイルを設定することができます。 +`::cue-region` 擬似要素は、特定の領域のキューをスタイル設定するためのものですが、どのブラウザーも対応していません。 -- 空白行。2 つの連続した改行に相当します。 -- ゼロ個以上のキューまたはコメント。（訳注：これらのブロックは 1 つ以上の空白行で互いに区切られています。） -- ゼロ行以上の空白行。（訳注：ファイルの終りも空白行という扱いです。） +WebVTTの最も重要な機能は、ファイル形式またはウェブ API を使用してアクセスすることができます。 -### 例 +## インターフェイス -- 最も単純な WebVTT ファイル +- {{domxref("VTTCue")}} + - : メディア要素に関連付けられたテキストトラックの特定の時間枠に表示されるテキスト、つまりキューを表します。 +- {{domxref("VTTRegion")}} + - : 動画要素の一部を表し、{{domxref("VTTCue")}} がレンダリングされることがあります。 +- {{domxref("TextTrack")}} + - : テキストトラックを表し、再生中にさまざまなポイントで関連するメディア要素とともに表示するキューのリストを保持します。 +- {{domxref("TextTrackCue")}} + - : {{domxref("VTTCue")}} などのさまざまなキュー型用の抽象ベースクラスです。 +- {{domxref("TextTrackCueList")}} + - : 配列風オブジェクトで、{{domxref("TextTrackCue")}} オブジェクトの動的に更新されるリストを表します。 + この型のインスタンスは {{domxref('TextTrack.cues')}} から、{{domxref("TextTrack")}} オブジェクト内のすべてのキューを取得するために取得します。 +- {{domxref("TextTrackList")}} + - : メディア要素に対して定義されたテキストトラックの一覧を表し、各トラックは、一覧に別個の {{domxref("TextTrack")}} インスタンスとして表されます。 - ```plain - WEBVTT - ``` +### 関連するインターフェイス -- テキストヘッダーを持つ非常に単純な WebVTT ファイル +- {{domxref("TrackEvent")}} + - : HTML DOM API の一部で、{{domxref("TextTrackList")}} にトラックが追加されたり削除されたりしたとき（より一般的には、HTML のメディア要素にトラックが追加されたり削除されたりしたとき）に発生する `addtrack` イベントと `removetrack` イベントのインターフェイスです。 - ```plain - WEBVTT - このファイルにはキューがありません。 - ``` +### 関連する CSS の拡張 -- ヘッダーとキューを使用した一般的な WebVTT の例 +これらの [CSS](/ja/docs/Web/CSS) [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は、VTT トラックを持つメディアのキューをスタイルするために使用されます。 - ```plain - WEBVTT - このファイルにはキューがあります。 +- {{CSSxRef("::cue")}} + - : メディアの中で選択された要素内のキューを VTT トラックと照合します。 - 14 - 00:01:14.815 --> 00:01:18.114 - - What? - - Where are we now? +> [!NOTE] +> この仕様では、もう一つの擬似要素である `::cue-region` を定義していますが、これはどのブラウザーも対応していません。 - 15 - 00:01:18.171 --> 00:01:20.991 - - This is big bat country. +## 例 - 16 - 00:01:21.058 --> 00:01:23.868 - - [ Bats Screeching ] - - They won't get in your hair. They're after the bugs. - ``` +### WebVTT API を使用してキャプションを追加 -### WebVTT ファイルの内部構造 +#### HTML -前の例の 1 つを再検討し、キューの構造をもう少し詳しく見てみましょう。 +次の例では、新しい {{domxref("TextTrack")}} を動画に追加し、{{domxref("TextTrack.addCue()")}} メソッドを使用して、作成した `VTTCue` オブジェクトを引数としてキューを追加しています。 -```plain -WEBVTT - -00:01.000 --> 00:04.000 -- 液体窒素を絶対に飲まないでください。 - -00:05.000 --> 00:09.000 -- それはあなたの胃に穴をあけます。 -- あなたは死ぬ可能性があります。 +```html + ``` -各キューは、 - -- 最初の行は時刻で始まります。これは、下にあるテキストを表示するための開始時刻です。 -- 同じ行に、`-->` という文字列があります。 -- 最初の行を 2 つ目の時刻で終了します。これは、関連するテキストを表示するための終了時刻です。 -- ハイフン (-) で始まる 1 行以上の行を表示できます。各行には表示するテキストトラックの一部が含まれています。 - -ファイルの一部に関する重要な情報を思い出すのに役立つように、`.vtt` ファイルにコメントを入れることもできます。これらは、文字列 `NOTE` で始まる別々の行にあるべきです。以下のセクションでこれらについての詳細を見つけるでしょう。 - -タイミング行とキュー本体の間など、キュー内で「余分な」空白行を使用しないことが重要です。WebVTT は行ベースで、空白行がキューを閉じます。 - -## WebVTT のコメント - -コメントは、WebVTT ファイルに情報を追加するために使用できるオプションのコンポーネントです。コメントはファイルを読む人のためのものであり、ユーザーには見えません。コメントには改行を含めることができますが、空白行を含めることはできません。これは、連続する 2 行の改行と同じです。空白行はコメントの終わりを表します。 - -コメントには、文字列 "`-->`"、アンパサンド文字 (`&`)、小なり記号 (`<`) を含めることはできません。このような文字を使用したい場合は、アンパサンドには `&`、小なりには `<` を使用してエスケープする必要があります。タグとの混同を避けるために、大なり記号（`>`）の代わりに大なりエスケープシーケンス (`>`) を使用することをお勧めします。 - -コメントは次の 3 つの部分で構成されています。 - -- 文字列 `NOTE`。 -- スペースまたは改行。 -- 上記以外のゼロ個以上の文字。 - -### 例 - -- 一般的な WebVTT の例 - - ```plain - NOTE これはコメントです - ``` +#### CSS -- 複数行のコメント +```css +video { + width: 420px; + height: 300px; +} +``` - ```plain - NOTE - 複数行に - またがる別のコメント。 +#### JavaScript + +```js +let video = document.querySelector("video"); +let track = video.addTextTrack("captions", "Captions", "en"); +track.mode = "showing"; +track.addCue(new VTTCue(0, 0.9, "Hildy!")); +track.addCue(new VTTCue(1, 1.4, "How are you?")); +track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?")); +track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor")); +track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels")); +console.log(track.cues); +``` - NOTE このように複数行にまたがって - コメントすることもできます。 - ``` +#### 結果 -- 一般的なコメントの使い方 +{{EmbedLiveSample('Using the WebVTT API to add captions','400','330')}} - ```plain - WEBVTT - 好きな映画の翻訳 +### ファイルで定義された VTT コンテンツの表示 - NOTE - 何人かの友人が両親と一緒に見ることができるように、 - Kyle が翻訳しました。 +この例では、上記の [WebVTT API を使用してキャプションを追加](#webvtt_api_を使用してキャプションを追加)の例で見たのと同じテロップを、動画に設定する方法を示します。ただし今回は、{{htmlelement("track")}} 要素を使用して宣言的に行います。 - 1 - 00:02:15.000 --> 00:02:20.000 - - Ta en kopp varmt te. - - Det är inte varmt. +まず、"captions.vtt" ファイルでキャプションを定義します。 - 2 - 00:02:20.000 --> 00:02:25.000 - - Har en kopp te. - - Det smakar som te. +```plain +WEBVTT - NOTE この最後の行はうまく翻訳されていないかもしれません。 +00:00.000 --> 00:00.900 +Hildy! - 3 - 00:02:25.000 --> 00:02:30.000 - - Ta en kopp - ``` +00:01.000 --> 00:01.400 +How are you? -## WebTT キューのスタイル設定 +00:01.500 --> 00:02.900 +Tell me, is the lord of the universe in? -{{cssxref("::cue")}} 擬似要素に一致する要素を探すことで WebTT キューをスタイル設定することができます。 +00:03.000 --> 00:04.200 +Yes, he's in - in a bad humor -### サイトの CSS の中 +00:04.300 --> 00:06.000 +Somebody must've stolen the crown jewels +``` -```css -video::cue { - background-image: linear-gradient(to 下端, dimgray, lightgray); - color: papayawhip; -} +これを {{HTMLElement("video")}} 要素に {{HTMLElement("track")}} 要素を用いて追加することができます。 +次の HTML は前回と同じテキストトラックになります。 -video::cue(b) { - color: peachpuff; -} +```html + ``` -ここでは、すべての動画要素は背景として灰色の線形グラデーションを使用するようにスタイル設定しており、前景色は `"papayawhip"` です。また、{{HTMLElement("b")}} 要素を使用して太字になっているテキストは、`"peachpuff"` で色づけしています。 - -以下の HTML スニペットは実際にメディア自体の表示を処理します。 +複数の {{HTMLElement("track")}} 要素を追加して、`kind` 属性と `srclang` 属性を用いると、複数の言語で異なる種類のトラックを指定することができます。`kind` を指定する場合は、`srclang` も設定しなければならないことに注意してください。 +`default` 属性は 1 つの `` だけに追加することができます。これはユーザーの環境設定で具体的な言語や種類を指定しない場合に再生されるものです。 ```html -