1. mechamogera

    Posted

    mechamogera
Changes in title
+AWS+Video.jsでお手軽ストリーミング動画配信
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,122 @@
+以下のサービス・ライブラリを利用してHLSでお手軽ストリーミング配信できたので、やったことをメモしておく。
+
+* AWS S3:動画をHLS配信しVideo.jsで閲覧できるよに
+* Amazon Elastic Transcoder:動画のHLS変換
+* Video.js:safari以外のブラウザでHLSを再生できるように
+
+## S3準備
+
+* 以下のようなバケットポリシーのバケット作成
+
+```json
+{
+ "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](http://dev.classmethod.jp/references/amazon-elastic-transcoder-hls/)
+
+
+* Input Key:配置した動画ファイル
+* Output Key Prefix:hls_sample/
+* Preset:System Preset HLS 400K
+* Output Key:hls_400k_
+* 他はデフォルト値
+
+## video.js配置
+
+以下の記事を参照してvideo.jsを作成したバケットに配置
+
+[video.js で m3u8 形式の動画ファイルをブラウザで再生する - Hack Your Design!](http://blog.toshimaru.net/play-m3u8-video-in-browser/)
+[Video.js を使って HLS形式の動画をストリーミング再生する - akiyoko blog](http://akiyoko.hatenablog.jp/entry/2015/08/11/015852)
+
+以下の3つのライブラリをダウンロード
+
+* [videojs/video.js](https://github.com/videojs/video.js)
+* [videojs/videojs-contrib-media-sources](https://github.com/videojs/videojs-contrib-media-sources)
+* [videojs/videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls)
+
+バケットに以下のように配置(精査してないので不要なものがありそう)
+
+```bash
+├── [動画ファイル]
+├── hls_sample/
+│ ├── hls_400k_.m3u8
+│ ├── hls_400k_00000.ts
+│ ...
+├── index.html
+├── css
+│ ├── video-js.min.css
+│ └── font
+│ └── VideoJS.*
+└── js
+ ├── video-js.swf
+ ├── video.js
+ ├── videojs-contrib-hls.min.js
+ └── videojs-contrib-media-sources.min.js
+```
+
+index.htmlは以下のような内容にした(試行錯誤したので不要な設定ありそう)
+
+```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.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="https://[バケット名].s3.amazonaws.com/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にアクセスして動画閲覧
+