3Play Media インタラクティブ トランスクリプトを動画に追加する
インタラクティブ トランスクリプトは、プレーヤーの横に表示され、動画内で話されている音声をテキストとして表示します。ユーザーが話し言葉を聞くと、トランスクリプト内の該当する単語が下線付きまたはハイライトされます。インタラクティブ トランスクリプトは、視聴体験を操作するためにも使用できます。たとえば、視聴者はトランスクリプト内を検索し、任意の単語をクリックして該当する箇所に移動できます。
Gallery In-Page (ページ内) エクスエリエンスを使用して動画を公開している場合は、3Play コンポーネントをエクスペリエンスに追加してトランスクリプトを表示することができます。詳細は、In-Page エクスペリエンスにコンポーネントを追加するを参照してください。
以下は、関連するトランスクリプト付きのサンプル動画です。
3Play Media では、プラグインを公開するために以下の2つの埋め込み方法を提供しています：
- iFrame（推奨）
- JavaScript
iFrame 埋め込みの使用
iFrame 埋め込み方式では、動画プレーヤーとその下に表示されるトランスクリプトを含む iFrame 埋め込みコードが提供されます。この方法は、コーディングの必要なくプレーヤーにトランスクリプトを追加できる簡単な方法です。
プレーヤーおよびトランスクリプト用の iFrame 埋め込みコードを生成するには、以下の手順に従ってください。
- 3Play アカウントにログインします。
- トランスクリプトを表示したい動画を見つけて、タイトルをクリックします。
- Publish > Publish Plugin をクリックします。
- Video Settings セクションを展開します。
- 対象の Brightcove プレーヤーの Player ID を入力します。Video ID および Account number には、選択された動画ID と Brightcove アカウント番号が自動で入力されます。
- Plugin Features セクションで Interactive Transcript を選択し、適切なオプションを設定します。
- Style Settings セクションを展開し、プラグインの Width（幅）と Height（高さ）を設定します。幅と高さには、動画の埋め込み部分とトランスクリプトの両方が含まれます。
- 埋め込みコードをコピーし、HTML ページに貼り付けます。
新しいテンプレートを保存 オプションがあります。3Play Media では、プラグイン テンプレートの保存が可能です。次回以降はテンプレートを選択するだけで設定を再利用でき、毎回設定を行う必要がありません。また、テンプレートに対する変更は、すべての公開済みプラグインに反映されるため、複数プラグインの外観を簡単に更新できます。プラグイン テンプレートの操作に関する詳細は、3Play のドキュメント「プラグイン テンプレートの作成と管理」 を参照してください。
JavaScript 埋め込みの使用
JavaScript 埋め込みオプションは、iFrame 埋め込み方式よりも高度なカスタマイズが可能です。この方法を利用するには、JavaScript および CSS の基本的な理解が必要です。JavaScript 埋め込みコードには Brightcove プレーヤーが含まれていないため、Video Cloud からのプレーヤー埋め込みコードを別途ページに追加する必要があります。動画の公開には Videoタグプレーヤー埋め込みコードを使用する必要があります。
トランスクリプト用の JavaScript 埋め込みコードを生成するには、以下の手順に従ってください。
- 3Play アカウントにログインします。
- トランスクリプトを表示したい動画を見つけて、タイトルをクリックします。
- Publish > Publish Plugin をクリックします。
- Video Settings セクションを展開します。
- Embed method にて、Custom (Javascript) を選択します。
- Video player type が brightcove であることを確認します。Video target の値はプレーヤー埋め込みコードに後で追加する必要があります。
- Plugin Features セクションにて、Interactive Transcript を選択し、適切なオプションを設定します。
- 埋め込みコードをコピーして、HTMLページに貼り付けます。
- Style Settings セクションで、id のテキストをクリップボードにコピーします。この値はプレーヤー埋め込みコードに追加します。
- HTML ページ（Media モジュールから取得した）内のプレーヤー埋め込みコードを編集し、
<video>タグに id パラメータを追加します。以下は埋め込みコードのサンプルです。
次に、CSS を使用してトランスクリプトのスタイルを調整できます。以下の CSS は、トランスクリプト ボックスの幅を設定し、現在の単語の色を変更し、トランスクリプト内のテキストとフォントのスタイルを変更する例です。
<style type="text/css">
.p3sdk-interactive-transcript{
width: 640px;
}
.p3sdk-current-word{
background:red !important;
}
.p3sdk-interactive-transcript-content p {
color: orange !important;
font-style: italic !important;
font-size: 20px !important;
}
</style>
以下はトランスクリプトのサンプルです。
CSS を使ってプラグインのスタイルを調整する詳細については、CSS でのプラグインのカスタマイズを参照してください。
以下に、JavaScript 埋め込み方式の使用に関する参考資料を紹介します。