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

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

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

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

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

  3. ウェブページにビデオを埋め込む

  4. HTML ファイルをアップロードしてビデオを再生する

このチュートリアルは JW Player バージョン 7.3 の無料エディションに基づきます。JW Player の詳細については、JW Player のウェブサイトを参照してください。

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

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

メディアファイルとメディアプレーヤーファイルは、同じ Amazon S3 バケットまたは別々のバケットにアップロードできます。このチュートリアルでは、.mp4 または .flv メディアファイルと、JW Player メディアプレーヤーファイルを同じバケットにアップロードします。

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

  1. JW Player メディアプレーヤーのファイルがまだない場合は、JW Player ウェブサイトの [Downloads] ページからプレーヤー (JW Player 7) をダウンロードします。次に、.zip ファイルの内容を展開します。

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

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

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

    重要

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

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

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

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

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

    • jwplayer.flash.swf

    • jwplayer.js

    • .mp4 または .flv メディアファイル

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

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

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

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

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

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

メディアファイルのストリーミングを行うように CloudFront を構成するには、JW Player ファイルおよび HTML ファイル用の CloudFront ウェブディストリビューションと、メディアファイル用の RTMP ディストリビューションが必要です。以下の 2 つの手順を実行し、ウェブディストリビューションと RTMP ディストリビューションを作成します。

JW Player ファイル用の 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] フィールドを選択し、「メディアファイルと JW Player ファイルを Amazon S3 バケットにアップロードするには」の手順で作成した Amazon S3 バケットを選択します。Amazon S3 バケットが多数ある場合は、バケット名の最初の数文字を入力することでリストをフィルタ処理できます。

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

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

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

メディアファイル用の CloudFront RTMP ディストリビューションを作成するには

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

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

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

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

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

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

ウェブページにビデオを埋め込む

次の例は、「CloudFront のウェブディストリビューションと RTMP ディストリビューションの作成」で作成したウェブディストリビューションと RTMP ディストリビューションを使用して、ウェブページにビデオを埋め込む方法を示しています。

以下のステップを実行します。

  1. JW Player のウェブサイトにサインインします。JW Player アカウントがない場合は、アカウントを作成します。

  2. [Downloads] ページで、このチュートリアルですでにダウンロードしたプレーヤーのライセンスキーを取得します。

  3. 以下の HTML コードをコピーして、テキストエディタに貼り付けます。

  4. HTML ファイル内のコメントを確認し、以下のプレースホルダーを適用可能な値で置き換えます。

    • WEB-DISTRIBUTION-DOMAIN-NAME

    • RTMP-DISTRIBUTION-DOMAIN-NAME

    • VIDEO-FILE-NAME

    • LICENSE-KEY

  5. .html ファイル名拡張子を付けてファイルを保存します (例: jwplayer-example.html)。

Copy
<HTML> <HEAD> <TITLE>Amazon CloudFront Streaming with JW Player 7</TITLE> <!-- Call the JW Player JavaScript file, jwplayer.js. Replace WEB-DISTRIBUTION-DOMAIN-NAME with the domain name of your CloudFront web distribution, for example, d1234.cloudfront.net (begins with "d"). This causes a browser to download the JW Player file before streaming begins. Replace LICENSE-KEY with your personal license key from JW Player. --> <script type='text/javascript' src='WEB-DISTRIBUTION-NAME/jwplayer.js'></script> <script type='text/javascript' src='WEB-DISTRIBUTION-NAME/jwplayer.flash.swf'></script> <script>jwplayer.key="LICENSE-KEY";</script> </HEAD> <BODY> <H1>This video is streamed by CloudFront and played by JW Player 7.</H1> <!-- Replace RTMP-DISTRIBUTION-DOMAIN-NAME with the domain name of your RTMP distribution, for example, s5678.cloudfront.net (begins with "s"). Replace VIDEO-FILE-NAME with the name of your .mp4 or .flv video file, including the .mp4 or .flv filename extension. For example, if you uploaded my-vacation.mp4, enter my-vacation.mp4. You might need to prepend "mp4:" to the name of your video file, for example, mp4:my-vacation.mp4. If the file is in a subdirectory, include the subdirectory name just before the file name, for example: "rtmp://RTMP-DISTRIBUTION-DOMAIN-NAME/cfx/st/sample-directory/VIDEO-FILE-NAME" --> <div id="my-video"></div> <script type="text/javascript"> jwplayer("my-video").setup({ 'file': 'rtmp://RTMP-DISTRIBUTION-DOMAIN-NAME/cfx/st/VIDEO-FILE-NAME', 'width': '720', 'height': '480', 'primary': 'flash', 'autostart': 'true' }); </script> </BODY> </HTML>

HTML ファイルをアップロードしてビデオを再生する

ウェブページにビデオを埋め込む」で作成した HTML ファイルを使用してビデオを再生するには、ファイルを Amazon S3 バケットにアップロードし、CloudFront ディストリビューションの URL を使用します。

HTML ファイルをアップロードしてビデオを再生するには

  1. https://console.aws.amazon.com/s3/ にある Amazon S3 コンソールを開きます。

  2. バケットを選択し、[Upload] を選択します。

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

  4. 前のステップで追加した HTML ファイルにパブリックの読み取り許可を付与します。

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

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

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

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

  6. ビデオを再生するには、ウェブブラウザで次の URL を入力します。

    http://domain name of your CloudFront web distribution/your HTML file name