From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/texttrack/cuechange_event/index.html | 108 ++++++++++++++++++++ files/ja/web/api/texttrack/index.html | 102 +++++++++++++++++++ files/ja/web/api/texttrack/mode/index.html | 110 +++++++++++++++++++++ 3 files changed, 320 insertions(+) create mode 100644 files/ja/web/api/texttrack/cuechange_event/index.html create mode 100644 files/ja/web/api/texttrack/index.html create mode 100644 files/ja/web/api/texttrack/mode/index.html (limited to 'files/ja/web/api/texttrack') diff --git a/files/ja/web/api/texttrack/cuechange_event/index.html b/files/ja/web/api/texttrack/cuechange_event/index.html new file mode 100644 index 0000000000..509f3a3f37 --- /dev/null +++ b/files/ja/web/api/texttrack/cuechange_event/index.html @@ -0,0 +1,108 @@ +--- +title: 'TextTrack: cuechange イベント' +slug: Web/API/TextTrack/cuechange_event +tags: + - API + - Event + - Reference + - TextTrack + - WebVTT + - cuechange + - oncuechange + - track + - イベント + - テキストトラック + - トラック +translation_of: Web/API/TextTrack/cuechange_event +--- +
{{APIRef}}
+ +

cuechange イベントは、 {{domxref("TextTrack")}} が現在表示しているキューが変更されたときに発生します。このイベントは、もし表示されているものがあれば、 TextTrack および {{domxref("HTMLTrackElement")}} の両方に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.oncuechange")}}
+ +

例

+ +

TextTrack 上で

+ +

cuechange イベントのリスナーを TextTrack に設定するには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用します。

+ +
track.addEventListener('cuechange', function () {
+  let cues = track.activeCues;  // 現在のキューの配列
+});
+
+ +

あるいは、 oncuechange イベントハンドラ－プロパティを設定しても構いません。

+ +
track.oncuechange = function () {
+  let cues = track.activeCues; // 現在のキューの配列
+}
+ +

track 要素上で

+ +

基本となる {{domxref("TextTrack")}} は、 {{domxref("HTMLTrackElement.track", "track")}} プロパティで識別されますが、現在表示されているキューが変更されるたびに {{domxref("TextTrack.cuechange_event", "cuechange")}} イベントを受け取ります。これは、トラックがメディア要素に結び付けられていなくても発生します。

+ +

トラックがメディア要素に結び付けられている場合、 {{HTMLElement("track")}} 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素の子として使用すると、 cuechange イベントは {{domxref("HTMLTrackElement")}} にも送信されます。

+ +
let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", (event) => {
+  let cues = event.target.track.activeCues;
+});
+
+ +

また、oncuechange イベントハンドラーを使用することもできます。

+ +
let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.oncuechange = (event) => {
+  let cues = event.target.track.activeCues;
+});
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.TextTrack.cuechange_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/texttrack/index.html b/files/ja/web/api/texttrack/index.html new file mode 100644 index 0000000000..a9084376be --- /dev/null +++ b/files/ja/web/api/texttrack/index.html @@ -0,0 +1,102 @@ +--- +title: TextTrack +slug: Web/API/TextTrack +tags: + - API + - Interface + - Media + - Reference + - TextTrack + - TopicStub + - Web + - WebVTT + - インターフェイス +translation_of: Web/API/TextTrack +--- +
{{APIRef("WebVTT")}}
+ +
+

TextTrack インターフェイスは — WebVTT (メディア表示上のテキストトラック) を扱う API の一部ですが — 特定の {{HTMLElement("track")}} 要素に関連付けられたテキストトラックを記述および制御します。

+
+ +

プロパティ

+ +

このインターフェイスは {{domxref("EventTarget")}} からプロパティを継承しています。

+ +
+
{{domxref("TextTrack.activeCues")}} {{readonlyInline}}
+
現在アクティブなテキストトラックキューのセットをリストする {{domxref("TextTrackCueList")}} オブジェクト。メディアの現在の再生位置がキューの開始時間と終了時間の間にある場合、トラックキューはアクティブです。つまり、キャプションや字幕のような表示されるキューでは、アクティブキューが現在表示されているものです。
+
{{domxref("TextTrack.cues")}} {{readonlyInline}}
+
トラックのすべてのキューを含む {{domxref("TextTrackCueList")}}。
+
{{domxref("TextTrack.id")}} {{readonlyInline}}
+
トラックがある場合は、それを識別する {{domxref("DOMString")}}。 ID がない場合、この値は空の文字列 ("") です。 TextTrack が {{HTMLElement("track")}} 要素に関連付けられている場合、トラックの ID は要素の ID と一致します。
+
{{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}
+
トラックのインバンドメタデータトラックディスパッチタイプ（in-band metadata track dispatch type）を示す {{domxref("DOMString")}} を返します。 詳細が必要
+
{{domxref("TextTrack.kind")}} {{readonlyInline}}
+
TextTrack が記述するテキストトラックの kind を示す {{domxref("DOMString")}} を返します。 値は TextTrackKind 列挙型のいずれかでなければなりません。
+
{{domxref("TextTrack.label")}} {{readonlyInline}}
+
テキストトラックのラベルがあれば、それを含む人間が読める {{domxref("DOMString")}}。 それ以外の場合、これは空の文字列（""）になります。 空の文字列の場合、トラックのラベルをユーザーに公開する必要がある場合は、トラックの他の属性を使用してコードでカスタムラベルを生成する必要があります。
+
{{domxref("TextTrack.language")}} {{readonlyInline}}
+
テキストトラックの内容が書かれているテキスト言語を指定する {{domxref("DOMString")}}。 値は、HTML の lang 属性と同じように、IETF の言語を識別するためのタグ（BCP 47）文書で指定されている形式に準拠する必要があります。 例えば、米国英語の場合は "en-US"、ブラジルポルトガル語の場合は "pt-BR" になります。
+
{{domxref("TextTrack.mode")}}
+
トラックの現在のモードを指定する {{domxref("DOMString")}}。 このプロパティの値を変更すると、トラックの現在のモードが一致するように変更されます。 許容値はテキストトラックモード定数にリストされています。既定値は disabled ですが、 {{HTMLElement("track")}} 要素の {{htmlattrxref("default", "track")}} 論理属性が指定されていた場合は、既定のモードは started になります。
+
+ +

イベント

+ +
+
{{domxref("TextTrack.cuechange_event","cuechange")}}
+
キューが出入りしたときに発生します。 特定のテキストキューは、キューに入ると表示され、キューから出ると消えます。
+ {{domxref("TextTrack.oncuechange","oncuechange")}} プロパティからも利用できます。
+
+ +

メソッド

+ +

このインターフェイスは {{domxref("EventTarget")}} からもメソッドを継承しています。

+ +
+
{{domxref("TextTrack.addCue()")}}
+
({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューをトラックのキューのリストに追加します。
+
{{domxref("TextTrack.removeCue()")}}
+
トラックのキューのリストから ({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューを取り除きます。
+
+ +
+
+ +

例

+ +

作成中

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }}{{ Spec2('HTML WHATWG') }}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.TextTrack")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/texttrack/mode/index.html b/files/ja/web/api/texttrack/mode/index.html new file mode 100644 index 0000000000..d9a1b2e87a --- /dev/null +++ b/files/ja/web/api/texttrack/mode/index.html @@ -0,0 +1,110 @@ +--- +title: TextTrack.mode +slug: Web/API/TextTrack/mode +tags: + - Accessibility + - NeedsExample + - Property + - TextTrack + - Web + - WebVTT + - mode +translation_of: Web/API/TextTrack/mode +--- +
{{APIRef("WebVTT")}}
+ +

{{domxref("TextTrack")}} インターフェイスの mode プロパティは、テキストトラックのモードを指定して制御する disabled, hidden, showing のいずれかの文字列です。この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。

+ +

さらに、 Safari でサブタイトルのキューを表示するには、独自のビデオプレーヤーコントロールを実装する際に、 default 論理値属性を true に設定する必要があります。

+ +

構文

+ +
var mode = textTrack.mode;
+
+textTrack.mode = "disabled" | "hidden" | "showing";
+ +

値

+ +

トラックの現在のモードを示す {{domxref("DOMString")}}。 テキストトラックモードは、{{anch("Text track mode constants","テキストトラックモード定数")}}にリストされている値の1つです。

+ +

テキストトラックモード定数

+ +

テキストトラックモードは IDL 列挙型 TextTrackMode を使用して識別されることもあり、次のいずれかの値にする必要があります。

+ +
+
disabled
+
テキストトラックは現在無効になっています。トラックの存在は DOM で公開されていますが、ユーザーエージェントはそれ以外の場合は無視しています。キューはアクティブではなく、イベントは発行されておらず、ユーザーエージェントはトラックのキューを取得しようとしません。テキストトラックが {{htmlattrxref("default", "track")}} 論理値属性を持っている場合の既定値は showing です。
+
hidden
+
テキストトラックは現在アクティブですが、キューを表示しません。 ユーザーエージェントがまだトラックのキューを取得しようとしていない場合は、すぐに取得します（それにより、トラックの {{domxref("TextTrack.cues")}} プロパティが設定されます）。 テキストが表示されていなくても、ユーザーエージェントはアクティブなキューのリストを（トラックの {{domxref("TextTrack.activeCues", "activeCues")}} プロパティに）保持しており、イベントは対応する時間に発生します。
+
showing
+
テキストトラックは現在有効になっており、表示しています。トラックのキューリストをまだ取得していない場合は、すぐに取得します。 {{domxref("TextTrack.activeCues", "activeCues")}} リストは維持されており、イベントは適切なタイミングで発生します。 トラックのテキストも、スタイリングとトラックの {{domxref("TextTrack.kind", "kind")}} に基づいて適切に描画します。
+
+ +

使用上の注意

+ +

mode の既定値は、 {{htmlattrxref("default", "track")}} 論理値属性が指定されていない場合は disabled で、指定されている場合の mode の既定値は showing です。テキストトラックが disabled の状態で読み込まれると、対応する WebVTT ファイルは、状態が showing または hidden のいずれかに変わるまで読み込まれません。このようにして、キューが実際に必要とされない限り、リソースの取得とメモリの使用は回避されます。

+ +

しかし、これは、例えば、ページ読み込み時にキューのいくつかの側面を処理するために {{event("load")}} イベントを処理している間にトラックのキューに関係するアクションを実行したい場合、トラックモードが最初に disabled になっていた場合、キューの読み込みを起動するために mode を hidden または showing のいずれかに変更しなければならないことを意味しています。

+ +

モードが showing の場合、テキストトラックはその {{domxref("TextTrack.kind", "kind")}} によって異なる方法で実行されます。 一般に次のとおりです。

+ + + +

例

+ +

この例では、キューが終了するたびに動画が自動的に再生を一時停止するように、テキストトラックのキューを設定します。これは、各キューの {{domxref("TextTrackCue.pauseonExit", "pauseOnExit")}} プロパティを true に設定することで実現します。ただし、トラックのキューを確実に利用できるようにするために、まず mode を showingに設定します。

+ +
window.addEventListener("load", event => {
+  let trackElem = document.querySelector("track");
+  let track = trackElem.track;
+
+  track.mode = "showing";
+
+  for (let index=0; index < track.cues.length; index++) {
+    let cue = track.cues[index];
+    cue.pauseOnExit = true;
+  };
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#dom-texttrack-mode', 'mode') }}{{ Spec2('HTML WHATWG') }}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.TextTrack.mode")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf