Amazon Elastic Transcoderを使いHLS Adaptive Streamingコンテンツを作成する手順です。
- 元素材
- S3準備
- ファイル置き場として適当な入力および出力Bucketを作成する
- 例:nowhere-in、nowhere-out
- 出力用Bucketについては以下のディレクトリを作成する
- 400K、1M、2M、2K、4K
- 前記元素材を入力Bucketにコピー
- aws s3 cp tearsofsteel_4k.mov s3://nowhere-in
- ファイル置き場として適当な入力および出力Bucketを作成する
- Elastic Transcoder設定
- パイプライン作成
- パイプライン概要
- 入出力の定義
- 変更点
- Create New Pipeline
- Pipeline Name:hls test
- 適当な名前(hls test)
- Input Bucket:nowhere-in
- 作成したS3 Bucket名(入力用)
- Pipeline Name:hls test
- Configuration for Amazon S3 Bucket for Transcoded Files and Playlists
- Bucket:nowhere-out
- 作成したS3 Bucket名(出力用)
- Bucket:nowhere-out
- Configuration for Amazon S3 Bucket for Thumbnails
- Bucket:nowhere-out
- 作成したS3 Bucket名(出力用)
- Bucket:nowhere-out
- Create New Pipeline
- パイプライン概要
- プリセット作成
- プリセット概要
- 実際のトランスコード定義
- 400K(bps)、1M(bps)、2M(bps)用についてはシステムにプリセットされているものを使用
- System preset: HLS 400K (400*288)
- System preset: HLS 1M (640*432)
- System preset: HLS 2M (1024*768)
- 2Kおよび4KについてはHLS 2Mをベースに新規作成
- HLS 4K
- 変更点(解像度を元素材に合わせる)
- Bitrate:Auto
- Max Width: 3840
- Max Height: 1714
- 変更点(解像度を元素材に合わせる)
- HLS 2K
- 変更点(解像度を元素材の1/4とする)
- Bitrate:Auto
- Max Width: 1920
- Max Height: 858
- 変更点(解像度を元素材の1/4とする)
- HLS 4K
- プリセット概要
- パイプライン作成
- Transcode実行
- ジョブ生成(2Mのサンプル、他のビットレートも同様に行う)
- 入力項目
- Create a New Transcoding Job
- Pipeline: hls test(作成したpipeline名)
- Output Key Prefix:2M (出力用Bucketに作成したディレクトリ)
- Input Details (1 of 1)
- Input Key:tearsofsteel_4k.mov (入力用Bucketに置いた元ファイル)
- Output Details (1 of 1)
- Preset:System Preset: HLS 2M (選択する)
- Segment Duration:2 (Adaptiveサンプルのため短め設定)
- Output Key:Tears (TSファイルのファイル名)
- Watermarks(Watermarkを設定する場合)
- Preset Watermark ID: TopLeft
- Input key for Preset Watermark Id TopLeft: 2M.png (watermark用のイメージ)
- Create a New Transcoding Job
- 入力項目
- ジョブ生成(2Mのサンプル、他のビットレートも同様に行う)
- S3からHTTPサーバにファイル転送
- aws s3 cp –recursive s3://nowhere-out .
- adaptive Streaming用のm3u8作成
- all-tears.m3u8
- #EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=400000
/media/ToS/400K/Tears.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1000000
/media/ToS/1M/Tears.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2000000
/media/ToS/2M/Tears.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4000000
/media/ToS/2K/Tears.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=16000000
/media/ToS/4K/Tears.m3u8
- #EXTM3U
- all-tears.m3u8
- サンプルページ
- adaptive再生
- 4K
- 2K
- 2M
- 1M
- 400k
- CDNキャッシュサーバ設定
- テスト(再生毎にネットワークからメディアファイルを取得させる)のため、以下のようなキャッシュ動作を/media/以下に設定する:
- CDNサーバ:キャッシュさせる
- ブラウザ:キャッシュさせない
- 設定(CDNextの場合)
- オリジンサーバ:メディアファイルに対して”cache-control: no-store”を付ける
- これでブラウザはキャッシュしない
- CDN設定:cache-controlを無視してキャッシュする設定を入れる(TTL:604800)
- オリジンサーバ:メディアファイルに対して”cache-control: no-store”を付ける
- テスト(再生毎にネットワークからメディアファイルを取得させる)のため、以下のようなキャッシュ動作を/media/以下に設定する:
- 動作テスト
- Windows上ではNetLimiter(https://www.netlimiter.com/)等によりアプリケーションの上限帯域を設定可能
- 今回のプレイヤー実装では表示Windowsサイズは最初に開いた大きさから変化せず、表示コンテンツのみが変化する
- ビットレートの確認
- 各ビットレートを示すWatermark
- Chrome Developer Tool等で読み込んでいるTSファイルのディレクトリを確認