プログラムによる動画へのキャプションの追加
概要
クローズドキャプションを動画に追加して、動画にアクセスしたい個人に追加または解釈的な情報を提供することができます。聴覚障害者や難聴者がビデオプレゼンテーションのオーディオ部分にアクセスできるようにするには、キャプションが必要です。Brightcove Player で動画のキャプションを表示するには、以下のタスクを実行する必要があります。
キャプションファイルを作成する
動画にキャプションを追加するには、まずキャプションファイルを作成する必要があります。Brightcove Player では、キャプションが Web 動画テキストトラック形式(WebVTT)である必要があります。(動的配信アカウントにキャプションを取り込む場合は、DFXP または SRT キャプションを追加できます。これらのキャプションは WebVTT キャプションに自動的に変換されます)。WebVTT ファイル形式は、プレーンテキスト形式で、時間テキストデータの後に目的のキャプションまたは字幕テキストが続きます。WebVTT ファイルの一部を以下に示します。
WEBVTT
00:00:00.000 --> 00:00:07.080 align:middle line:90%
00:00:07.080 --> 00:00:10.280 align:middle line:84%
Hi, I'm Bob Bailey, a Learning
Specialist with Brightcove.
00:00:10.280 --> 00:00:12.780 align:middle line:84%
In this video, you'll learn
about how Video Cloud Studio is
00:00:12.780 --> 00:00:14.940 align:middle line:84%
organized and get a
brief overview of what
00:00:14.940 --> 00:00:17.490 align:middle line:90%
you can accomplish using it.
WebVTT 形式の詳細については、このリンクを参照してください。サポートする必要がある言語ごとに、個別のキャプションファイルが必要です。キャプションファイルの作成に役立つサードパーティツールは数多くありますが、ブライトコーブには、文字起こし、キャプション、翻訳サービスを提供するパートナーがいくつかあります。ブライトコーブパートナーの完全なリストについては、次のWebサイトをご覧ください。パートナー当社のウェブサイトのセクション。
ダイナミック配信動画を使用している場合は、SRT または DFXP キャプションを取り込むこともできます。ブライトコーブは自動的に WebVTT に変換します。詳細については、WebVTT ファイルの取り込み (テキストトラック/キャプション) のドキュメントを参照してください。
動画にキャプションを追加する
Video Cloud では、WebVTT キャプションをホストするリモートアセットとして、または Video Cloud に取り込むことで、ビデオに WebVTT キャプションを追加できます。この操作を行うと、Brightcove Player がその動画を読み込むときにキャプションが自動的に追加され、プレーヤーコントロールに CC ボタンが表示されます。動画へのキャプションの追加の詳細については、「概要:動画にキャプションを追加する。
<track>タグを含む
WebVTT キャプションファイルを Brightcove Player に関連付けるには、ページ内埋め込みコードを変更して、<track>
キャプションファイルごとにタグを含める必要があります。例:
<track kind="captions" src="<location of caption file>" srclang="en" label="English">
<track>
タグは、字幕、キャプションファイル、またはメディアを再生しているときに表示されるべきテキストを含む他のファイルを指定するために使用されます。これを行う手順の概要を以下に示します。
- を生成します高度な(ページ内)プレーヤーのコードを埋め込みます。これは、メディアモジュール。
コードは次のようになります。<video-js id="myPlayerID" data-video-id="4230322585001" data-account="20318290001" data-player="default" data-embed="default" data-application-id class="video-js" controls width="640" height="360"> </video-js> <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
<video-js id="myPlayerID" data-account="20318290001" data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" data-embed="default" data-application-id class="video-js" controls width="640" height="360"> </video-js> <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
- 追加
<track>
内部のタグ<video-js>
すべてのキャプションファイルの場所を指すタグ。 Player Studio では、現在、パブリッシャーが WebVTT キャプションファイルをアップロードする方法を提供していません。 キャプションファイルの場所のURLは250文字未満である必要があります。
以下の例では、英語、日本語、フランス語のキャプションファイルが指定されています。言語コードの完全なリストについては、 HTML言語コードリファレンス。<video-js id="myPlayerID" data-video-id="4230322585001" data-account="20318290001" data-player="default" data-embed="default" data-application-id class="video-js" controls width="640" height="360"> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English"> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese"> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French"> </video-js> <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
<video-js id="myPlayerID" data-account="20318290001" data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" data-embed="default" data-application-id class="video-js" controls width="640" height="360"> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English"> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese"> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French"> </video-js> <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
- (オプション)ビデオの再生開始時にキャプションが自動的に表示されるようにするには、ページにいくつかの変更を加える必要があります。少量のコードを表示および設定および追加するには、
default
<track>
言語のタグに属性を追加する必要があります。default
属性は 1<track>
つのタグにのみ表示されることに注意してください。例えば、ビデオの再生開始時に英語のキャプションを表示するには、<track>
タグを次のように変更します。<track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English" default> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese"> <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">
指定されたキャプションを自動的に開始するために必要なコードは次のとおりです。
<script type="text/javascript"> videojs.getPlayer('myPlayerID').ready(function () { var myPlayer = this; myPlayer.one("play", function () { //If you want to start English as the caption automatically myPlayer.textTracks()[1].mode = "showing"; }); }); </script>
- プレーヤーでページを公開します。キャプションが関連付けられたプレーヤーが公開されると、CC ボタンがプレーヤークロムに表示されます。
- CC ボタンをクリックして、キャプション言語を選択し、キャプションを表示します。
キャプションのスタイルを設定する
このセクションでは、プログラムでキャプションのスタイルを設定する方法について説明します。WebVTT ファイルの変更によるキャプションのスタイル設定と、プレーヤーの UI については、「キャプションのスタイリング」ドキュメントを参照してください。
プログラムによるキャプションのスタイル設定には、次の 2 つのメソッドが重要です。
player.textTrackSettings.setValues()
:プレーヤーのキャプションにスタイルを動的に設定player.textTrackSettings.saveSettings()
:ブラウザーの localStorage に設定を保存します。
値を設定 (ObjectOfStyles)
キャプションには、変更できるスタイルは限られています。以下に詳しく説明します。これらのスタイルの使用例は、次のコードに示され、スクリーンショットに示すように、キャプションが表示されます。
videojs.getPlayer('myPlayerID').ready(function () {
var myPlayer = this;
myPlayer. textTrackSettings.setValues({
backgroundColor: "#FF0",
color: "#00F",
fontFamily: "monospaceSansSerif",
fontPercent: 1.5,
windowColor: "#0FF",
windowOpacity: "0.5"
}) ;
});
次の表に、変更できるキャプションスタイルと、それらのスタイルの有効な値を示します。
キー | 有効な値 |
---|---|
backgroundColor |
以下で定義されている有効な色 |
backgroundOpacity |
1 (opaque).5 (semi-transparent) |
color |
以下で定義されている有効な色 |
edgeStyle |
none |
fontFamily |
proportionalSansSerif |
fontPercent (オブジェクト内の引用符で囲まれていない) |
0.50 |
textOpacity |
1 (opaque).5 (semi-transparent) |
windowColor |
以下で定義されている有効な色 |
windowOpacity |
1 (opaque).5 (semi-transparent)0 (透明) |
色を使用する上記の値の場合、有効な色の値を次に示します。
有効な色 |
---|
#000 ( 黒) |
#00F ( 青) |
#0FF ( シアン) |
#0F0 ( 緑) |
#F0F ( マゼンタ) |
#F00 ( 赤) |
#FFF ( 白) |
#FF0 ( 黄色) |
saveSettings ()
キャプションのスタイリング時に役立つ別の方法は、ですplayer.textTrackSettings.saveSettings()
。この方法はブラウザに保存しますローカルストレージキャプションスタイルの現在の設定。Chromeの次のスクリーンショット応用タブには、プレーヤーにサービスを提供するページのローカルストレージと、キーの名前が表示されます。 vjs-text-track-settings、およびそれに関連する値。
この方法では、プレーヤーのUIを使用してキャプションスタイルを構成し、設定を保存して、使用する値をコピーすることができます。player.textTrackSettings.setValues()
、上記のように。
コードを使用して実装する
キャプションのテキストトラックをプログラムによって追加することができます。この機能の重要なメソッドは次のとおりですaddRemoteTextTrack()
。構文は次のとおりです。
playerObject.addRemoteTextTrack({
kind: string,
language: string,
label: string,
src: string
});
場所:
kind
-テキストトラックの種類、この使用のために「キャプション」language
-2文字の言語コード、例えば 'en'label
-キャプション UI に表示される言語ラベル (例: 「英語」src
-WebVTT 形式のキャプションファイルへのURL
関数呼び出しは、型のオブジェクトを返しますvjs.TextTrack
。
使用例:
var frTrack = myPlayer.addRemoteTextTrack({
kind: 'captions',
language: 'fr',
label: 'French',
src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
});
あなたは待つ必要がありますloadedmetadata
使用する前にディスパッチされるイベントaddRemoteTextTrack()
方法。次の例は、動画に英語とフランス語のキャプションを追加するためのスクリプトブロックを示しています。
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function () {
var myPlayer = this;
myPlayer.one("loadedmetadata", function () {
var enTrack = myPlayer.addRemoteTextTrack({
kind: 'captions',
language: 'en',
label: 'English',
src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos.vtt'
});
var frTrack = myPlayer.addRemoteTextTrack({
kind: 'captions',
language: 'fr',
label: 'French',
src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
});
});
});
</script>
textTracks()
補完的な方法では、プレーヤーに割り当てられたすべてのテキストトラックを取得できます。このメソッドは、型のオブジェクトを返しますvjs.TextTrackList
。
キャプション付きのライブストリーミング
ドキュメントのこの時点まで、キャプションは個別のファイルとして配信され、<track>要素を介してビデオに関連付けられていました。このタイプのキャプションは、 アウトオブバンド。別の方法としては、キャプションデータをビデオコンテンツに直接埋め込み、頻繁にライブビデオストリームを埋め込むことがあり、呼ばれることもある。 インバンド キャプション。
ブライトコーブライブは現在、608 キャプションをインバンドでサポートしています (h.264 ヘッダー内)。キャプションが h.264 入力信号(user_data パケットで正しくシグナル)内にある場合、キャプションは h.264 出力に渡されます。
ブロードキャストElemental ライブエンコーダーを使用している場合は、SDI (EIA-608/CEA-608) または他のソース (SCTE-20、SCC、文字放送、DVB-Sub、付属、ARB、TTML、SCTE-27、STL、SRT、SMI) からキャプションを取得して、送信した h.264 ストリームに入れることができます。他の放送グレードのエンコーダでも同じことができるかもしれませんが、正式にテストされていません。
WebVTT キャプションは、ライブストリームではサポートされていません。
Brightcove Player はインバンドキャプションをサポートしているため、HLS に組み込まれているキャプション付きでライブされるため、プラグインは必要ありません。Brightcove Player の実装は、ネイティブ HLS が使用されないあらゆる場所で機能します。ネイティブ HLS が使用されている場合、インバンドキャプションのサポートは OS とブラウザーによって異なります。例えば、iOSのネイティブ HLS は、インバンドキャプションを完全にサポートしています。
制限事項
キャプションは、次のデバイスタイプおよびオペレーティングシステムでサポートされています。
- iOS 9+
- アンドロイド 4+
- インターネットエクスプローラー 8+
- 最新のChrome、Safari、Firefoxデスクトップ用ブラウザー