Help us understand the problem. What is going on with this article?

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にアクセスして動画閲覧

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした