- 帯域内:メディアセグメント内で配信されるテキストトラック。たとえば、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+xmltext/vttapplication/x-subtitleapplication/x-subtitle-samiapplication/x-subtitle-tmplayerapplication/x-subtitle-mpl2application/x-subtitle-dksapplication/x-subtitle-qttextapplication/x-subtitle-lrcapplication/x-subtitle-vtt
テキストトラックの選択と表示
テキストトラックを画面上にレンダリングするには、そのモードをshowingに設定します。
hiddenに設定された状態で追加されます。
ShakaPlayerを使用したキャプションの自動解析
ShakaPlayerは、マニフェストファイルとメディアセグメントからキャプションを自動的に解析してレンダリングできます。ShakaPlayerを使用する場合は、プレーヤーが内部でテキストトラックの作成とキューの管理を処理するため、開発者が手動でaddTextTrack()やaddCue()を呼び出す必要はありません。
ShakaPlayerを構成して、テキストトラックのレンダリングを有効にします。
trueに設定してキャプションを表示します。
shaka-rel-v4.6.18-r2.5.tar.gz以降のShakaPlayerパッチを使用していることを確認してください。
実装のテスト
アプリをビルドし、Fire TVデバイスまたはエミュレーターで実行します。- ビデオ再生の画面に移動します。
- キャプションを含むメディアの再生を開始します。
- 画面にキャプションが表示されることを確認します。
- 複数のキャプショントラックがある場合は、異なるトラック間の切り替えをテストします。
既知の制限事項
-
縦向きの字幕のレンダリングはサポートされません。
-
カスタムサイズのキューウィンドウはサポートされません。キャプションウィンドウのサイズは自動だけです。
- VTTCueに位置が指定されていない場合、字幕とキャプションは画面の下部に重ならないように配置されます。
-
同じプロセス内で複数の
KeplerCaptionsViewインスタンスを使用することはサポートされません。 - CEA 708ネイティブトラックは最大で1つしかサポートされません。
- ネイティブキャプションのロールアップモードはサポートされません。詳細については、Rollup Captions(英語のみ)を参照してください。
- ネイティブのキャプショントラックには言語メタデータは含まれていません。言語パラメーターには、CC1、CC2、CC3、CC4のようなチャネル識別子が含まれています。
- VTTRegionはサポートされません。
- 字幕とキャプションのCSSスタイルはサポートされません。
よくある質問(FAQ)
プラットフォームがCEA 608/708のネイティブ解析をサポートしている場合、アプリで帯域内キャプションを解析する必要はありますか?
プラットフォームがCEA 608/708のネイティブ解析をサポートしている場合、アプリで帯域内キャプションを解析する必要はありますか?
ShakaPlayer APIで、ネイティブに解析されたキャプショントラックが報告されません。これらをアプリで検出するにはどうすればよいですか?
ShakaPlayer APIで、ネイティブに解析されたキャプショントラックが報告されません。これらをアプリで検出するにはどうすればよいですか?
subtitleトラックにはJavaScriptプレーヤーAPI(ShakaPlayerなど)使用します。captionトラックにはW3C Media APIのVideoPlayer(MediaElement)を使用します。
JavaScriptプレーヤーによるキャプション解析を有効にすると、重複するテキストトラックが報告されます。どうすればこれを回避できますか?
JavaScriptプレーヤーによるキャプション解析を有効にすると、重複するテキストトラックが報告されます。どうすればこれを回避できますか?
- 利用可能なテキストトラックを取得するには、
getTextTracks()を使用します。 - テキストトラックを有効または無効にするには、
setTextTrackVisibility(isVisible)を使用します。
字幕とキャプションのスタイル設定はサポートされていますか?
字幕とキャプションのスタイル設定はサポートされていますか?
VTTRegionはサポートされていますか?
VTTRegionはサポートされていますか?
字幕とキャプションのCSSスタイルはサポートされていますか?
字幕とキャプションのCSSスタイルはサポートされていますか?
関連コンテンツ
- W3Cメディアプレーヤーのドキュメント
- W3C TextTrack仕様(英語のみ)
- WebVTT仕様(英語のみ)

