Web サイトやモバイルサイトへのビデオの配信

Webサイト、モバイルサイト、デスクトップアプリケーションは、URL文字列または埋め込みコードを使用して、ビデオなどのDynamic Mediaクラシックサーバーコンテンツにアクセスします。 Dynamic Mediaクラシックは、公開処理中にこれらのURL文字列をアクティブにします。 Webページ、モバイルページおよびデスクトップアプリケーションにビデオのURL文字列または埋め込みコードを設定するには、Dynamic MediaクラシックからURL文字列または埋め込みコードをコピーします。

メモ

URL または埋め込みコードは、アセットを公開するまでアクティブになりません。

ビデオの公開

ビデオを公開すると、Dynamic MediaクラシックサーバーはビデオをWebサイト、モバイルサイトまたはアプリケーションに配信できます。

ビデオの公開に使用できる方法は次の 2 つあります。

  • アップロード時にビデオを自動的に即時公開する

    ビデオのアップロード処理の一環として、Dynamic Mediaクラシックは、ビデオがアップロードされエンコードされたときに自動的に公開できます。 この即時公開機能があることで、アップロードとエンコード後にビデオを個別に公開する必要がありません。

  • アップロード後にビデオを手動で公開する

    ビデオをすぐに公開したくない場合は、いつでもビデオを手動で公開できます。

ビデオを公開すると、HTMLページやアプリケーションコードのURL文字列がアクティブになります。

ビデオを公開するには

  1. 次のいずれかの操作を行います。

    • ビデオをアップロード時に自動的に即時公開するには、アップロード画面で、「アップロード後に公開」をクリックします。完了後は、それ以上の手順は必要ありません。
    • アップロード後にビデオを手動で公開するには、参照パネルでビデオを選択し、グローバルナビゲーションバーで「公開」をクリックします。

ビデオ URL のモバイルサイトまたは Web サイトへのリンク

ビデオの公開後、そのビデオの URL を取得して Web サイト、モバイルサイトまたはデスクトップアプリケーションで使用できます。このビデオ URL は、Web ページの上のポップアップウィンドウかモーダルウィンドウでビデオを再生する場合に使用します。

顧客がリンクをクリックすると、デバイス、帯域幅および画面サイズが自動的に検出されます。デスクトップの場合は、定義済みビューアでの再生に適したビデオが表示され、スマートフォンおよびタブレットの場合は、携帯端末のネイティブビデオプレーヤーでの再生に適したビデオが表示されます。

Web ページへのビデオビューアの埋め込みも参照してください。

ビデオ URL をモバイルサイトまたは Web サイトにリンクするには

  1. アセットの参照パネルの「表示」ドロップダウンリストで「ビデオ」または「アダプティブビデオセット」をクリックします。

  2. 左側のアセットライブラリパネルで、リンクするビデオまたはアダプティブビデオセットを含むアセットフォルダーに移動します。

  3. アセットの参照パネルの上のツールバーの右側で、次のいずれかの操作を行います。

    • 「グリッドビュー」​または​「リストビュー」​をクリックします。アセットの参照パネルで、単一アセットのビデオサムネールをダブルクリックして、詳細ビューで開きます。右側の URL と埋め込みコードパネルの「HTTP ストリーミング」で、目的のビューアの右側の「URL をコピー」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられたURLをコピーします。

    • 「グリッドビュー」​をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の下にある​プレビュー／ビューアリスト​をクリックします。

      ビューアリストページの表の「アクション」列にある「URL をコピー」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられたURLをコピーします。

    • 「リストビュー」​をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の右側にある​プレビュー／ビューアリスト​をクリックします。

      ビューアリストページの表の「アクション」列にある「URL をコピー」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられたURLをコピーします。

    • 「グリッドビュー」、「リストビュー」、または​「詳細ビュー」​をクリックします。同じツールバーにある​プレビュー／ビューアリスト​をクリックします。

      ビューアリストページの表の「アクション」列にある「URL をコピー」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられたURLをコピーします。

  4. HTML5 ビデオ URL のリンクを Web サイトおよびモバイルサイトに貼り付けます。

Web ページへのビデオビューアの埋め込み

Web ページにビデオを埋め込んで再生したい場合は、「埋め込みコード」機能を使用します。埋め込みコードをクリップボードにコピーして、Web ページに貼り付けることができます。埋め込みコードダイアログボックスでは、コードの編集はできません。

ビデオ URL のモバイルサイトまたは Web サイトへのリンクも参照してください。

Web ページにビデオビューアを埋め込むには

  1. アセットの参照パネルの「表示」ドロップダウンリストで「ビデオ」または「アダプティブビデオセット」をクリックします。

  2. 左側のアセットライブラリパネルで、埋め込みコードをコピーしたいビデオまたはアダプティブビデオセットを含むアセットフォルダーに移動します。

  3. アセットの参照パネルの上のツールバーの右側で、次のいずれかの操作を行います。

    • 「グリッドビュー」​または​「リストビュー」​をクリックします。アセットの参照パネルで、単一アセットのビデオサムネールをダブルクリックして、詳細ビューで開きます。右側の URL と埋め込みコードパネルの「HTTP ストリーミング」で、目的のビューアの右側の「埋め込みコード」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられている「埋め込みコード​」をクリックします。

    • 「グリッドビュー」をクリックします。アセットの参照パネルで 1 つのアセットを選択して、ビデオサムネール画像の下にある​プレビュー／ビューアリスト​をクリックします。

      ビューアリストページの表の「アクション」列にある「埋め込みコード」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられている「埋め込みコード​」をクリックします。

    • 「リストビュー」​をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の右側にある​プレビュー／ビューアリスト​をクリックします。

      ビューアリストページの表の「アクション」列にある「埋め込みコード」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられている「埋め込みコード​」をクリックします。

    • 「グリッドビュー」、「リストビュー」、または​「詳細ビュー」​をクリックします。同じツールバーにある​プレビュー／ビューアリスト​をクリックします。

      ビューアリストページの表の「アクション」列にある「埋め込みコード」をクリックします。ベストプラクティスとして、Universal_HTML5_Videoビューアに関連付けられている「埋め込みコード​」をクリックします。

  4. 埋め込みコードダイアログボックスで、「クリップボードにコピー」​をクリックします。

    埋め込みコードダイアログボックスでは、コードを編集することはできません。

  5. 「閉じる」をクリックします。

  6. 埋め込みコードを Web ページに貼り付けます。

MP4ビデオアセットを含むHTML5ビデオを使用するための埋め込みコードの実装

Dynamic MediaクラシックHTML5ビデオプレーヤーを使用せず、代わりにネイティブのHTML5 <video>タグをMP4ビデオアセットと共に使用する場合は、次の埋め込みコード例を使用できます。

<video poster="S7 video thumbnail URL" controls> 
        <source src="S7 OGG video asset URL (no player)" type='video/ogg; codecs="theora, vorbis"'/> 
        <source src="S7 MP4 mobile progressive video asset URL (no player)" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/> 
        <p>This is fallback content</p> 
</video>

サードパーティのビデオプレーヤーを使用したビデオの配信

Dynamic Mediaクラシックビデオビューアの代わりに、サードパーティのビデオプレーヤーまたはカスタムに組み込まれたビデオプレーヤーを使用する場合、HLSマルチビットレートビデオストリーミングまたはプログレッシブダウンロードで機能するダイレクトビデオURLを取得できます。

サードパーティのビデオプレーヤーを使用してビデオを配信するには

  1. Dynamic Mediaクラシックのグローバルナビゲーションバーで、設定/アプリケーション設定/全般設定​をクリックします。
  2. 使用する URL のタイプに応じて、次のいずれかの操作を行います。

  • HLSストリーミングビデオのダイレクトURL（マルチビットレート）を生成するには

    アプリケーションの全般設定​ページの​サーバー​グループの​発行済みサーバー名​テキストフィールドで、次の構文を使用してダイレクトURLを作成します。server/is/content/company/folder/filename.m3u8
    例えば、公開済みサーバー名がhttps://s7d9.scene7.com/.であるとします。手順2の構文を使用すると、ダイレクトURLは次のようになります。
    https://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.m3u8

  • HLSストリーミングビデオのダイレクトURL（シングルビットレート）を生成するには

    アプリケーションの全般設定​ページの​サーバー​グループの​HLSストリーミングサーバー名​テキストフィールドで、次の構文を使用してダイレクトURLを作成します。
    server/company/folder/filename.ext.m3u8
    例えば、HLSストリーミングサーバー名が次のと https://s7mbrstream.scene7.com/hls-vod/します。手順 2 の構文を使用して、次のようなダイレクト URL を作成できます。
    https://s7mbrstream.scene7.com/hls-vod/GeoRetail/MBR/ToyStory3\_Teaser1\_High\_iPad\_768x432\_1296K.mp4.m3u8

  • プログレッシブビデオのダイレクト URL を生成するには

    アプリケーションの全般設定​ページの「サーバー」グループの「プログレッシブビデオサーバー名」テキストフィールドで、次の構文を使用して eVideo のダイレクト URL を作成します。 server/company/folder/filename
    例えば、プログレッシブビデオサーバー名がであると https://s7d9.scene7.com/is/content/します。手順 2 の構文を使用して、次のようなダイレクト URL を作成できます。
    https://s7d9.scene7.com/e2/GeoRetail/SourceVideo/outdoors.mp4

ビデオサムネールの操作

Dynamic Mediaクラシックでは、エンコードされたビデオとあらかじめエンコードされたビデオのサムネールが生成されます。 ビデオサムネールは、画像アセットと同じように使用できます。また、Dynamic MediaClassicが生成するビデオサムネールのURLを取得し、これらのURLをDynamic MediaClassicの外部にデプロイすることもできます。 例えば、Web サイト上の検索結果、関連するビデオリスト、ビデオ再生リストにサムネールを配信できます。

ビデオの最初の不均一のフレーム（真っ黒でないフレーム、真っ白でないフレームなど）に基づきサムネールが生成されます。

ビデオサムネールの URL の取得

Dynamic Mediaクラシックでは、アップロード処理中にビデオサムネールが自動的に生成されます。 サムネールは、リストビューとグリッドビューの参照パネルに表示されます。

ビデオサムネールの URL を生成するには、公開操作を実行します。

詳しくは、ビデオの公開を参照してください。

公開後、URL および埋め込みコードパネルの詳細ビューでビデオサムネールの URL を取得できます。ビデオサムネールの右側の​「URL をコピー」​をクリックすると、URL をコピーできます。

ビデオビューアでのポスターフレームの変更

ポスターフレーム​は、ビデオの再生開始前にビデオビューアに表示される最初のフレームです。Dynamic Mediaクラシックでは、ビデオサムネールをポスターフレームとして使用します。

ポスターフレームに画像修飾子を適用できます。例えば、ポスターフレームを切り抜いたり、透明にしたりすることができます。ポスターフレームを変更するには、ビデオビューアの設定画面を開いて、「ポスター画像修飾子」セクションに修飾子を入力します。

詳しくは、ビデオビューアプリセットの追加または編集を参照してください。

www.adobe.com/go/learn_s7_image_server_guide_enを参照してください。

また、ビデオサムネールの URL に修飾子を追加して、ビデオサムネールを変更することもできます。

関連記事

このページ