[HTML5] Amazon Elastic Transcoder で変換した HLS（HTTPライブストリーミング）形式の動画を video タグで再生する

#HTML5

yamato

2013.11.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

例えば、企業でストリーミングを導入したいと思った時、ストリーミングサーバの導入や構築に敷居の高さを感じる場合が多いかと思います。

特別なサーバソフトを使用しない動画ストリーミング

HTTP Live Streaming（HLS） は、Apple によって開発された、動画をストリーミング配信するための規格です。

trasnsport_stream

未だ対応しているのは Safari だけですが、標準化（RFC）を目指して仕様も公開されていますし、もちろん Apple 謹製なので iOS でも使えます。

今回作成するアーキテクチャ

前述の通り、HLS は単純に Webサーバーに置けばストリーミング出来るのですが、それだと味気がないので、動画変換サービス Amazon Elastic Transcoder を使って、HLS変換を行い、それを CloudFront 経由で、 HTML5 の video タグで再生出来るようにしてみたいと思います。

S3 の設定

今回は Elastic Transcoder を使うので、最初にエンコード元ファイルの保存先と出力先である S3 の設定を行います。

入力用バケットの作成

エンコードの元ファイルの保存先である入力用のバケットを作成します。

131118-0006

出力用バケットの作成

次に、出力用のバケットを作成します。

131118-0008

メディアファイルのアップロード

バケットの作成が終わったら、メディアファイルのアップロードと、変換先ディレクトリを作成しておきます。

入力用バケットにメディアファイルをアップロード。

131118-0015

出力先バケットに変換先ディレクトリを作成。

131118-0014

Amazon Elastic Transcoder の設定

Elastic Transcoder って何？って方は以下を御覧ください。自分も詳しくありませんがw

https://dev.classmethod.jp/cloud/amazon-elastic-transcoder-start/

パイプラインの作成

最初にパイプラインを作成します。
マネージメントコンソールから Create a new Pipeline をクリックします。

131118-0012

Input Bucket に作成したメディアの入力元のバケットを指定します。

131119-0001

トランスコードされたファイルの保存先である Bucket には、出力先のバケットを指定します。

131119-0003

デフォルトだと Elastic Transcoder で、トランスコードされたデータは、private 扱いになるので、上記のように Amazon S3 Group の All Users に open/download の権限を割り当てます。

Job の作成

次に実際にトランスコードする Job を作成します。

131118-0013

Output Key Prefix には、出力先バケットのディレクトリを指定します。

131118-0016

Playlist として Output で指定したファイルを指定し、Create New Job をクリックします。

131118-0017

Prossesing中...

131118-0018

Complete になりました！

131118-0019

S3のディレクトリを確認してみる

S3の出力先ディレクトリを確認しましょう。

131118-0020

.m3u8 ファイル（これをURLに指定します）と .ts ファイル（メディアセグメントファイル）が出来上がっています。

CloudFront ディストリビューションの作成

今回は CloudFront 経由で配信するので、CloudFront のコンソールを開き、出力先 S3 バケットをオリジンとするディストリビューションを作成します。

131118-0021

HTML5 の video タグに指定する

以下のように video タグでhttp形式で指定できます。

<html>
<body>
  <video width="320" height="240" preload="none" controls
     src="http://d18672pjq89e1s.cloudfront.net/hlsdemo/index.m3u8">
  </video>
</body>
</html>

Safari から見てみましょう。ちゃんと表示されますね。