メニュー
Amazon CloudFront
開発者ガイド (API Version 2016-09-29)

CloudFront および Adobe Flash Player を使用したオンデマンドビデオストリーミング

CloudFront を使用してメディアファイルのストリーミングを行う場合、メディアファイルを提供するとともに、そのメディアファイルをエンドユーザーが再生するためのメディアプレーヤーを提供します。Adobe Flash Player を使用して、CloudFront でメディアファイルのストリーミングを行うには、以下の各トピックの手順を実行します。

  1. Amazon S3 バケットを作成する

  2. CloudFront のウェブディストリビューションと RTMP ディストリビューションの作成

  3. Adobe Flash Builder を使用して Flash プロジェクトを作成する

  4. メディアファイルと Flash Builder ファイルを Amazon S3 バケットにアップロードする

  5. メディアファイルを再生する

このチュートリアルでは、Adobe Flash Player を使用してビデオのストリーミングを行うのに必要なファイルを、Adobe Flash Builder バージョン 4.6 を使用して生成します。Flash Builder の詳細については、Adobe ウェブサイトの「Flash Builder」ページを参照してください。Adobe Flash Builder の無料トライアル版のダウンロードについては、ダウンロードセンター/Adobe Flash Builder 4.6 のページを参照してください。

Flash Player でサポートされるコーデックのリストについては、Adobe ウェブサイトの「サポートされるコーデック | Flash Player」ページを参照してください。

CloudFront を使用してメディアをストリーミングする方法については、「RTMP ディストリビューションの使用」を参照してください。

Amazon S3 バケットを作成する

メディアファイルとメディアプレーヤーファイルは、同じ Amazon S3 バケットまたは別々のバケットにアップロードできます。このチュートリアルでは、メディアファイルと Flash Player メディアプレーヤーファイルの両方に対して 1 つのバケットを作成します。これらのファイルは、このプロセスの後半で Adobe Flash Player ファイルを作成した後にアップロードされます。

Amazon S3 バケットを作成するには

  1. AWS マネジメントコンソール にサインインし、Amazon S3 コンソール (https://console.aws.amazon.com/s3/) を開きます。

  2. Amazon S3 コンソールで、[Create Bucket] を選択します。

  3. [Create Bucket] ダイアログに、バケット名を入力します。

    重要

    バケットが CloudFront で正常に機能するには、その名前が DNS 命名要件に沿ったものでなければなりません。詳細については、「Amazon Simple Storage Service 開発者ガイド」の「バケットの制約と制限」を参照してください。

  4. バケットのリージョンを選択します。デフォルトでは、Amazon S3 は米国スタンダードリージョンにバケットを作成します。レイテンシーを最適化するため、コストを最小化するため、また規制要件に対応するために、最寄りのリージョンを選択してください。

  5. [Create] を選択します。

CloudFront のウェブディストリビューションと RTMP ディストリビューションの作成

メディアファイルのストリーミングを行うように CloudFront を構成するには、CloudFront RTMP ディストリビューションが必要です。このチュートリアルでは、Adobe Flash Builder で作成される .html ファイルにアクセスするための CloudFront ウェブディストリビューションも作成します。以下の 2 つの手順を実行します。

CloudFront ウェブディストリビューションを作成するには

  1. https://console.aws.amazon.com/cloudfront/ にある、CloudFront コンソールを開きます。

  2. [Create Distribution] を選択します。

  3. [Create Distribution Wizard] の最初のページで、[Web] セクションの [Get Started] を選択します。

     ディストリビューションの種類として、[Web] を選択します。
  4. ウィザードの 2 番目のページで、[Origin Domain Name] フィールドを選択し、「Amazon S3 バケットを作成するには」の手順で作成した Amazon S3 バケットを選択します。Amazon S3 バケットが多数ある場合は、バケット名の最初の数文字を入力することでリストをフィルタ処理できます。

  5. 残りのフィールドについては、デフォルト値を受け入れて、[Create Distribution] を選択します。

  6. CloudFront がディストリビューションを作成すると、ディストリビューションの [Status] 列の値が、[InProgress] から [Deployed] に変わります。この所要時間は 15 分以内となります。

    CloudFront によってディストリビューションに割り当てられたドメイン名がディストリビューションの一覧に表示されます。 (ドメイン名は、選択されたディストリビューションの [General] タブにも表示されます)。

CloudFront RTMP ディストリビューションを作成するには

  1. CloudFront コンソールで [ Create Distribution] を選択します。

  2. [Create Distribution Wizard] の [RTMP] セクションで、[Get Started] を選択します。

  3. ウィザードの 2 番目のページで、[Origin Domain Name] フィールドを選択し、「Amazon S3 バケットを作成するには」の手順で作成した Amazon S3 バケットを選択します。Amazon S3 バケットが多数ある場合は、バケット名の最初の数文字を入力することでリストをフィルタ処理できます。

  4. [Create Distribution] ページの残りのフィールドについては、デフォルト値を受け入れて、[Create Distribution] を選択します。

  5. CloudFront がディストリビューションを作成すると、ディストリビューションの [Status] 列の値が、[InProgress] から [Deployed] に変わります。この所要時間は 15 分以内となります。

    CloudFront によってディストリビューションに割り当てられたドメイン名がディストリビューションの一覧に表示されます。ドメイン名は、選択されたディストリビューションの [General] タブにも表示されます。

Adobe Flash Builder を使用して Flash プロジェクトを作成する

Adobe Flash Builder を使用して Flash プロジェクトを自動的に作成できます。このプロジェクトには、Adobe Flash を使用してメディアファイルを再生するのに必要なすべてのファイルが含まれます。

Adobe Flash Builder を使用して Flash プロジェクトを作成するには

  1. Adobe Flash Builder を開始します。

  2. Flash Builder の [File] メニューで、[New > Flex Project] を選択します。

  3. 以下の値を入力します。

    • Project name: プロジェクトの名前を入力します (例: [CloudFrontStreaming])。

    • Folder: このプロジェクトのファイルの保存場所を指定します。デフォルトの場所を使用しない場合は、[Use default location] チェックボックスのチェックを外して、別の場所を選択します。

      場所を書き留めておきます。この場所をプロセスの後半で使用します。

    • Application type: デフォルト値の [Web] を受け入れます。

    • Flex SDK version: デフォルト値の [Use default SDK] を受け入れます。

  4. プロジェクトを作成するには、[Finish] を選択します。

    Flash Builder がプロジェクトを作成すると、そのプロジェクトの名前の新しいタブが Flash Builder のユーザーインターフェイスに表示されます。[<project-name>] タブの [Source] ボタンを選択すると、[Source] ページに数行の XML コードが表示されます。

  5. [Source] ページでデフォルトの XML コードを削除します。

  6. 以下の XML コードをコピーして、Adobe Flash Builder の空白の [Source] ページに貼り付けます。

    Copy
    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements here, for example, services and value objects --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import org.osmf.net.StreamingURLResource; import org.osmf.net.FMSURL; protected function vp_preinitializeHandler(event:FlexEvent): void { var myURL:StreamingURLResource = new StreamingURLResource("rtmp://RTMP-DISTRIBUTION-DOMAIN-NAME/cfx/st/mp4:VIDEO-FILE-NAME-WITHOUT-EXTENSION"); myURL.urlIncludesFMSApplicationInstance = true; myVideoPlayer.source = myURL; } ]]> </fx:Script> <s:VideoPlayer id="myVideoPlayer" autoPlay="true" preinitialize="vp_preinitializeHandler(event)" x="32" y="52"/> </s:Application>
  7. [Source] ページに貼り付けた XML コードで、以下の値を置き換えます。

    • RTMP-DISTRIBUTION-DOMAIN-NAME を RTMP ディストリビューションの CloudFront ドメイン名で置き換えます (例: s5c39gqb8ow64r.cloudfront.net)。

    • VIDEO-FILE-NAME-WITHOUT-EXTENSION をビデオファイルの名前で置き換えます。ただし、ファイル名拡張子は除外します。たとえば、ビデオの名前が my-vacation.mp4 の場合、「my-vacation」とだけ入力します。

  8. 変更を保存します。

  9. Flash Builder の [Project] メニューで、[Export Release Build] を選択します。

  10. [Export Release Build] ダイアログボックスで、すべてのデフォルト値を受け入れて、[Finish] を選択します。

    Flash Builder は、プロジェクトのファイルを作成し、ステップ 3 で指定された場所にファイルを保存します。

メディアファイルと Flash Builder ファイルを Amazon S3 バケットにアップロードする

Adobe Flash Builder を使用して、メディアファイルのストリーミングを行うためのファイルを生成する場合、メディアファイルと Flash Builder ファイルを同じ Amazon S3 バケットにアップロードします。

メディアファイルと Flash Builder ファイルを Amazon S3 バケットにアップロードするには

  1. AWS マネジメントコンソール にサインインし、Amazon S3 コンソール (https://console.aws.amazon.com/s3/) を開きます。

  2. [Buckets] ペインでバケットを選択し、[Upload] を選択します。

  3. [Upload – Select Files] ページで、[Add Files] を選択し、以下のファイルを追加します。

     ファイルを Amazon S3 バケットにアップロードします。
  4. 前のステップで追加したファイルにパブリックの読み取り許可を付与します。

    1. [Set Details] を選択します。

    2. [Set Details] ページで、[Set Permissions] を選択します。

    3. [Set Permissions] ページで、[Make everything public] を選択します。

  5. [Start Upload] を選択します。

メディアファイルを再生する

メディアファイルを再生するには、Flash Builder でプロジェクト用に作成され、Amazon S3 バケットにアップロードされた HTML ファイルを表示します。

メディアファイルを再生するには

  1. 以下の各値を連結することで、Flash Builder でプロジェクト用に作成された HTML ファイルの CloudFront URL を入力します。

    http://domain-name-for-your-CloudFront-distribution/HTML-file-name

    (例:

    http://d111111abcdef8.cloudfront.net/CloudFrontStreaming.html

  2. ビデオプレーヤーで、矢印ボタンを選択します。

    ビデオの再生が開始されます。