以下のサービス・ライブラリを利用して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にアクセスして動画閲覧