Amazon Developer

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート
メインコンテンツへスキップ
この記事では、W3C準拠のテキストトラックAPIを使用して、Vegaアプリにクローズドキャプションと字幕を実装します。クローズドキャプションは音声の書き起こしを提供し、障がいを持つ視聴者や周囲に騒音がある場合に役立ちます。字幕は、会話をさまざまな言語に翻訳します。テキストトラックは、大きく次の2つのカテゴリーに分けられます。
  • 帯域内:メディアセグメント内で配信されるテキストトラック。たとえば、CEAキャプションやMP4テキストトラック(個別のトラックとしてのWebVTT/TTML)があります。
  • 帯域外(OOB):メディアストリームとは別のファイルとして配信されるテキストトラック。ABRストリーミングでは、これらのファイルはプレイリストまたはマニフェストファイルで参照されます。場合によっては、キャプションファイルがデータベースを通じてメディアコンテンツに関連付けられ、マニフェストファイルには記述されないこともあります。

前提条件

  • Vega開発環境がセットアップされていること
  • React NativeとTypeScriptに関する基本的な知識
  • @amazon-devices/react-native-w3cmediaパッケージバージョン2.1.14以降
  • Vega SDK v0.10以降

必要な権限の追加

アクセシビリティ権限を追加するために、manifest.tomlに以下を追加します。

VTTCueポリフィルのインストール

@amazon-devices/react-native-w3cmediaパッケージには、VTTCueのポリフィルが用意されています。これはTextTrackCueインターフェイスの実装です。 アプリの初期化中にポリフィルをインストールします。

KeplerCaptionsViewコンポーネントの追加

KeplerCaptionsViewコンポーネントは、クローズドキャプションと字幕を画面上にレンダリングします。このコンポーネントは、VideoPlayerコンポーネントやAudioPlayerコンポーネントを使用してプレバッファリングモードで動作している場合に使用します。 コンポーネントをレンダーツリーに追加します。
キャプションをレンダリングするには、showプロパティをtrueに設定する必要があります。

アプリで解析したキャプションのテキストトラックの追加

キャプションデータの取得と解析をアプリで直接処理する場合は、アプリのHTMLMediaElementの実装にテキストトラックを追加し、そのトラックにVTTCueオブジェクトを設定します。このアプローチは、ソースが帯域内か帯域外かにかかわらず、アプリで解析するすべてのテキストトラックに適用できます。Shaka PlayerなどのJavaScriptプレーヤーを使用する場合は、プレーヤーが内部でトラックの作成を管理するため、この手順に従う必要はありません。

テキストトラックへのキューの追加

キャプションデータを解析したら、VTTCueを使用してキューをテキストトラックに追加します。

ネイティブに解析されたテキストトラックのリッスン

プラットフォームは、CEA 608や708などの帯域内字幕を自動的に検出します。SourceBufferにメディアセグメントが追加されている場合、プラットフォームはこれらの字幕をネイティブレイヤーで解析します。これはJavaScriptベースの解析よりも効率的です。テキストトラックの検出時に通知を受け取るために、addtrackイベントに登録します。

キャプションファイルのURLを含むテキストトラックの追加

アプリに解析機能がなく、キャプションファイルのURLだけがある場合は、プラットフォームで既知の字幕形式の取得、解析、レンダリングを行うことができます。テキストトラックを追加するときに、キャプションファイルのURLとそのMIMEタイプを渡します。 このアプローチはW3Cに準拠せず、推奨される方法でもなく、廃止される予定となっています。可能な場合は、代わりにアプリ側で解析するか、JavaScriptプレーヤーベースの解析を使用してください。
contentUriとcontentMimeTypeの各パラメーターは、W3Cの標準パラメーターではありません。 次のMIMEタイプがサポートされます。
  • application/ttml+xml
  • text/vtt
  • application/x-subtitle
  • application/x-subtitle-sami
  • application/x-subtitle-tmplayer
  • application/x-subtitle-mpl2
  • application/x-subtitle-dks
  • application/x-subtitle-qttext
  • application/x-subtitle-lrc
  • application/x-subtitle-vtt

テキストトラックの選択と表示

テキストトラックを画面上にレンダリングするには、そのモードをshowingに設定します。
デフォルトでは、テキストトラックはモードがhiddenに設定された状態で追加されます。

ShakaPlayerを使用したキャプションの自動解析

ShakaPlayerは、マニフェストファイルとメディアセグメントからキャプションを自動的に解析してレンダリングできます。ShakaPlayerを使用する場合は、プレーヤーが内部でテキストトラックの作成とキューの管理を処理するため、開発者が手動でaddTextTrack()やaddCue()を呼び出す必要はありません。 ShakaPlayerを構成して、テキストトラックのレンダリングを有効にします。
コンテンツを読み込んだ後、テキストトラックの表示状態をtrueに設定してキャプションを表示します。
Vega SDK v0.21以降と、shaka-rel-v4.6.18-r2.5.tar.gz以降のShakaPlayerパッチを使用していることを確認してください。

実装のテスト

アプリをビルドし、Fire TVデバイスまたはエミュレーターで実行します。
  1. ビデオ再生の画面に移動します。
  2. キャプションを含むメディアの再生を開始します。
  3. 画面にキャプションが表示されることを確認します。
  4. 複数のキャプショントラックがある場合は、異なるトラック間の切り替えをテストします。

既知の制限事項

  • 縦向きの字幕のレンダリングはサポートされません。
  • カスタムサイズのキューウィンドウはサポートされません。キャプションウィンドウのサイズは自動だけです。
  • VTTCueに位置が指定されていない場合、字幕とキャプションは画面の下部に重ならないように配置されます。
  • 同じプロセス内で複数のKeplerCaptionsViewインスタンスを使用することはサポートされません。
  • CEA 708ネイティブトラックは最大で1つしかサポートされません。
  • ネイティブキャプションのロールアップモードはサポートされません。詳細については、Rollup Captions(英語のみ)を参照してください。
  • ネイティブのキャプショントラックには言語メタデータは含まれていません。言語パラメーターには、CC1、CC2、CC3、CC4のようなチャネル識別子が含まれています。
  • VTTRegionはサポートされません。
  • 字幕とキャプションのCSSスタイルはサポートされません。

よくある質問(FAQ)

理想的には、CEA 608/708のネイティブ解析を有効にし、JavaScriptベースの解析は避けることをお勧めします。アプリでキャプションを解析する必要があるのは、ネイティブ解析が機能しない場合か、アプリでキャプションテキストにアクセスする必要がある場合だけです。
次のように、トラックの管理戦略を組み合わせて使用します。
  • subtitleトラックにはJavaScriptプレーヤーAPI(ShakaPlayerなど)使用します。
  • captionトラックにはW3C Media APIのVideoPlayer(MediaElement)を使用します。
次の例では、このアプローチを使用して、使用可能なすべてのテキストトラックを照会します。
上記と同じように、トラックの管理戦略を組み合わせて使用します。次の例は、テキストトラックを選択する方法を示しています。
ネイティブのキャプション解析を使用する場合は、テキストトラックの重複を防ぐために、JavaScriptプレーヤーの帯域内キャプションパーサーを無効にしてください。ShakaPlayerによる帯域内キャプションの解析を無効にするには、メディアセグメントのキャプションパーサーの登録を解除します。
代わりにJavaScriptで帯域内解析を行う場合は、JavaScriptプレーヤーAPIを使用してテキストトラックを管理します。
  • 利用可能なテキストトラックを取得するには、getTextTracks()を使用します。
  • テキストトラックを有効または無効にするには、setTextTrackVisibility(isVisible)を使用します。
あり。次のスタイルタグがサポートされます。
  • クラススパン:テキストの色とテキストの背景色
  • 斜体スパン
  • 太字スパン
  • 下線スパン
詳細については、WebVTT仕様(英語のみ)を参照してください。
VTTRegionはサポートされません。
字幕とキャプションのCSSスタイルはサポートされません。

関連コンテンツ


最終更新日 2026年10月26日