Edited at

AWS+Video.jsでお手軽ストリーミング動画配信

以下のサービス・ライブラリを利用してHLSでお手軽ストリーミング配信できたので、やったことをメモしておく。


  • AWS S3:動画をHLS配信しVideo.jsで閲覧できるように

  • Amazon Elastic Transcoder:動画のHLS変換

  • Video.js:safari以外のブラウザでHLSを再生できるように


S3準備


  • 以下のようなバケットポリシーのバケット作成

{

"Version": "2012-10-17",
"Statement": [
{
"Sid": "",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": [
"arn:aws:s3:::[バケット名]/*",
"arn:aws:s3:::[バケット名]/js/*",
"arn:aws:s3:::[バケット名]/css/*",
"arn:aws:s3:::[バケット名]/css/font/*"
],
"Condition": {
"IpAddress": {
"aws:SourceIp": "[アクセス許可するCIDR]"
}
}
}
]


  • 動画ファイルをバケットに配置


Amazon Elastic TranscoderでHLS変換

以下の記事を参照し、入出力先は作成したバケットを指定して以下のようなジョブを実行。

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


  • Input Key:配置した動画ファイル

  • Output Key Prefix:hls_sample/

  • Preset:System Preset HLS 400K

  • Segment Duration: 10

  • Output Key:hls_400k_

  • 他はデフォルト値


video.js配置

以下の記事を参照してvideo.jsを作成したバケットに配置

video.js で m3u8 形式の動画ファイルをブラウザで再生する - Hack Your Design!

Video.js を使って HLS形式の動画をストリーミング再生する - akiyoko blog

以下の3つのライブラリをダウンロード

バケットに以下のように配置(精査してないので不要なものがありそう)

.

├── [動画ファイル]
├── hls_sample/
│ ├── hls_400k_.m3u8
│ ├── hls_400k_00000.ts
│ ...
├── index.html
├── css
│ ├── video-js.min.css
│ └── font
│ └── VideoJS.*
└── js
├── video.min.js
├── videojs-contrib-hls.min.js
└── videojs-contrib-media-sources.min.js

index.htmlは以下のような内容にした(試行錯誤したので不要な設定ありそう)

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<link href="css/video-js.min.css" rel="stylesheet">
<script src="js/video,min.js"></script>
<script src="js/videojs-contrib-media-sources.min.js"></script>
<script src="js/videojs-contrib-hls.min.js"></script>
</head>
<body>
<video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360" data-setup="{}">
<source src="hls_sample/hls_400k_.m3u8" type="application/x-mpegURL">
</video>
<script type="text/javascript">

var player = videojs("test", {html5: {
hls: {
withCredentials: true
}
},
flash: {
hls: {
withCredentials: true
}
}});
player.play();

</script>
</body>
</html>


動画閲覧

https://[バケット名].s3.amazonaws.com/index.htmlにアクセスして動画閲覧