動画インタラクティブの始め方

このトピックでは、動画にインタラクティブ性を追加する方法について学びます。

Brightcove Player 用のインタラクティブ プラグインを使用すると、Brightcove Interactivity の機能を活用することができます。インタラクティブ プロジェクトにアノテーション(注釈)を追加すると、それらは対応する動画上に自動的に表示されます。

始める前に

動画インタラクティブ機能を利用するには、Interactivity プラグインを設定した Brightcove Player が必要です。このプラグインを追加すると、動画再生中にアノテーションをプレーヤー内に表示できます。また、Interactivity プラグインは他のプレーヤー プラグインと共存可能です。Interactivity 対応の Brightcove Player を作成する手順については、Brightcove PlayerにInteractivity プラグインを設定するをご参照ください。

インタラクティブ プロジェクトの作成

以下の手順に従ってプロジェクトを作成してください。

  1. Video Cloud Studio にログインします。
  2. Interactivity モジュールを開きます。
  3. 新規プロジェクト をクリックします。
  4. プロジェクトのタイトル を入力します。
  5. プロジェクトで使用する動画を選択します。
  6. 作成をクリックします。作成したプロジェクトはプロジェクト一覧に表示されます。

テキスト オーバーレイの追加

このセクションでは、Brightcove Player 内でインタラクティブ機能が正常に表示されることを確認するために、テキスト オーバーレイを追加します。

  1. プロジェクトの タイトル をクリックして開きます。
  2. 下部ツールバーでテキスト オーバーレイ アイコンをクリックします。
  3. メニューの Editor リンクをクリックします。
  4. オーバーレイ用のサンプルテキストを入力し、SUBMIT をクリックします。
  5. DONE をクリックします。

動画にテキストや画像のオーバーレイ アノテーションを追加する方法については、以下のリンクを参照してください。

動画のプレビューと埋め込みコードの生成

プロジェクトにアノテーションを追加した後、インタラクティブ機能が正常に動作するか確認するために動画をプレビューします。Interactivity モジュール内でプレビューと埋め込みコードを生成する際、プロジェクトはアカウントのデフォルト設定で構成された Interactivity 対応のプレーヤーを使用します。

以下の手順でプロジェクトのプレビューと埋め込みコードの生成を行います。

  1. プロジェクトのタイトルをクリックして開きます。
  2. 埋め込みをクリックします。
  3. プレーヤーを選択します。ドロップダウンリストには、Interactivity プラグイン がインストールされているすべてのプレーヤーが表示されます。
  4. プレビューをクリックすると、別のブラウザタブでプロジェクトをプレビューできます。
  5. インタラクティブ要素が適切に表示されることを確認します。
  6. 埋め込みコードをコピーし、ウェブページに貼り付けてください。