動画に透過オーバーレイを追加する

このトピックでは、動画に透過オーバーレイを追加する方法について学びます。

Interactivity モジュールは、動画にさまざまなタイプのインタラクティブ オーバーレイを追加する機能を提供します。テキストや画像のオーバーレイは、ビデオ再生中にビデオ上に表示することができます。例えば、動画上にテキストや会社のロゴを追加表示することができます。オーバーレイはクリック可能で、必要に応じて追加のウェブページを開くこともできます。

はじめる前に

プレーヤーにインタラクティブ機能を追加する前に、インタラクティブ機能が有効な Brightcove プレーヤーが必要であり、インタラクティブ プロジェクトが作成されていることを確認する必要があります。この方法については、動画インタラクティブ入門を参照して下さい。

透過オーバーレイの追加

透過オーバーレイは、動画の領域に「クリック可能なホットスポット」を追加するために使用できます。例えば、会社のロゴを下隅に焼き付けた動画があるとします。透明オーバーレイをロゴの上に追加して、クリックすると別の URL に移動します。次の例では、Brightcove のロゴがソース動画に焼き付けられています。オーバーレイをクリックすると、新しいブラウザ タブでリンクが開き、動画が一時停止します。


以下の手順に従って、プロジェクトに透過オーバーレイを追加してください:

  1. Video Cloud Studio にログインします。
  2. Interactivity モジュールを開きます。
  3. 新規プロジェクトをクリックします。
  4. プロジェクト タイトルを入力します。
  5. 使用する動画を選択します。
  6. 作成をクリックします。
  7. 透過オーバーレイを使用するポイントまでビデオを再生します。
  8. 下部のツールバーで、透過オーバーレイアイコンをクリックします。
  9. ダイレクト先のURL を入力します。
  10. BEHAVIOR (挙動)タブをクリックし、Pause on video click (ビデオクリック時に一時停止)に設定します。
  11. Save (保存)をクリックします。
  12. オーバーレイをドラッグして、"ホットスポット" にしたい場所にサイズを合わせます。この例では、オーバーレイはビデオに表示されるロゴ画像をカバーします。
  13. Start Time (開始時間)メニューをクリックします。
  14. Start time (開始時間)を秒単位、パーセンテージ、または時間形式で入力し、SAVE (保存)をクリックします。
  15. 時計のアイコンをクリックして、オーバーレイの時間を設定します。SUBMIT (送信)をクリックします。
  16. Done (完了)をクリックします。
  17. 埋め込むをクリックします。
  18. Preview (プレビュー)をクリックし、ビデオを再生し、オーバーレイをクリックすると指定したURLが開くことを確認します。