nginx でPseudo streaming（疑似ストリーミング）で動画配信を行ってみる（flv、mp4ディレクティブを使ってみた）

2013年3月4日 2017年8月8日

ご利用のブラウザは、JavaScript が無効となっていませんか？
このサイトでは、コンテンツの一部が非表示、あるいは、コメント、お問い合わせの投稿ができない、検索ができないことがあります。

nginx では、動画を制御するためのディレクティブとして flv,mp4 が用意されています。

flv,mp4 の両ディレクティブを使用するためには、それぞれ以下のコンパイルオプションを指定してビルドする必要があります。

flv → −−with-http_flv_module
mp4 → −−with-http_mp4_module

いずれのオプションも nginxの公式サイトで公開されているパッケージには含まていますので問題はないかと思います。ただ、個別に他の公開パッケージを利用されている方もおられると思いますので、そのような場合は、以下のようにnginx -Vにて確認しましょう。

$ nginx -V
nginx version: nginx/1.2.7
built by gcc 4.4.4 20100726 (Red Hat 4.4.4-13) (GCC)
TLS SNI support enabled
configure arguments: \
	--prefix=/etc/nginx \
	--sbin-path=/usr/sbin/nginx \
	--conf-path=/etc/nginx/nginx.conf \
	--error-log-path=/var/log/nginx/error.log \
	--http-log-path=/var/log/nginx/access.log \
	--pid-path=/var/run/nginx.pid \
	--lock-path=/var/run/nginx.lock \
	--http-client-body-temp-path=/var/cache/nginx/client_temp \
	--http-proxy-temp-path=/var/cache/nginx/proxy_temp \
	--http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp \
	--http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp \
	--http-scgi-temp-path=/var/cache/nginx/scgi_temp \
	--user=nginx \
	--group=nginx \
	--with-http_ssl_module \
	--with-http_realip_module \
	--with-http_addition_module \
	--with-http_sub_module \
	--with-http_dav_module \
	--with-http_flv_module \
	--with-http_mp4_module \
	--with-http_gzip_static_module \
	--with-http_random_index_module \
	--with-http_secure_link_module \
	--with-http_stub_status_module \
	--with-mail \
	--with-mail_ssl_module \
	--with-file-aio \
	--with-ipv6 \
	--with-cc-opt='-O2 \
	-g'

長いので改行しています。(¥ は改行マークの代わりです。)
もし、含まれいない場合は、nginx公開のパッケージをインストールするか、自前でビルドするか、いずれかで対応する必要があります。
以下は、その参考記事です。
CentOS,ScientificLinux

nginx公開パッケージをインストールする方法
- Nginxを公式サイトから最新版をインストールする(CentOS/ScientificLinux編)
再構築する方法
- Nginxの最新版ソースからバイナリパッケージ(rpm)を作成し、インストールする
- Nginx にリバースプロキシのキャッシュ削除モジュール nginx cache purge を組み込んで使ってみる(CentOS/ScientificLinux編)

Debina,Ubuntu

nginx公開パッケージをインストールする方法
- Debian(Ubuntu 12) で Dotdeb から最新のnginx をインストール、php-fprm を使ってphpを動かしてみる
- Nginxを公式サイトから最新版をインストールする(Debian/Ubuntu編)
再構築する方法
- Nginx にリバースプロキシのキャッシュ削除モジュール nginx cache purge を組み込んで使ってみる(Debian/Ubuntu編)

nginx では、このflv、mp4 ディレクティブで、動画のstartパラメータ(シーク)に対応することでPseudo streaming（疑似ストリーミング）を実現できます。
もちろん flv、mp4 のファイル形式のみの対応ではありますが、疑似とはいえストリーミングに対応できるという点では、おもしろいので使ってみました。

目次
1. startパラメータ(シーク)に対応できるということはどういう意味か
2. nginx で startパラメータ(シーク)に対応してみる
履歴

2013年3月4日初版

startパラメータ(シーク)に対応できるということはどういう意味か

ここまで、nginx で利用できる flv、mp4 ディレクティブで、
startパラメータ(シーク)に対応することができる
と書きましたが、これが、どういう意味か簡単に解説します。

簡単にいうと、いつでも動画を好きなところから見ることができる ということです。

例えば、以下のように動画を見ているとします。

見たいところへ、赤枠部分のタイムスライダを動かしたくなりますね。
このとき一般的な動画プレイヤーは、タイムスライダのバックカラーが薄い灰色になった部分が、動画のダウンロードができた範囲になります。
何も動画(ストリーミング)対応がないウェブサーバーであっても、その範囲内で、好きなところへタイムスライダを動かすことができます。

でも、YouTube では、バックカラーが薄い灰色になっていないところへ、いきなりクリックできますね。

これが、いわゆる動画のシークというものです。
動画プレイヤーは、タイムスライダのクリック位置から動画の開始時間を割出しサーバーへ開始時間を通知します。(nginxでは、これをstartパラメータで通知します。) サーバーからは、その開始時間以降の動画情報を配信するという仕組みです。

例えば、nginxでは、以下のように要求することでその開始時間からの動画データを受信することができます。

http://example.com/sample.mp4?start=100

この例では、startパラメータに100としていますので、先頭から100秒後からの動画が配信されることになります。
もし、startパラメータに対応していない場合は、もちろん無視されますから、sample.mp4の先頭から動画配信されることになります。

動画ファイルはかなり大きなものがありますから、この機能は、動画配信する場合、必要な機能だと思います。

多少語弊がありますが、
これらのことを、一般的にストリーミング（リアルタイムにデータを受信しながら再生すること）と言います。
このストリーミングは、専用のサーバーが必要になりますが、ここでは、nginxを使ってそのストリーミングを疑似的ではありますが、それらしく見せることができるようにしてみます。

Pseudo streaming（疑似ストリーミング）とは、
一般的に動画を配信する場合、それ専用のサーバーを構築する必要があります。それを、通常のウェブサーバーで疑似的にストリーミング（リアルタイムにデータを受信しながら再生すること）を行わせることを言います。

nginx で startパラメータ(シーク)に対応してみる

nginx で startパラメータ(シーク)に対応してみるには、先に書いたように flv、mp4 ディレクティブで簡単に対応することができます。

では、早速、簡単に解説してみます。

nginx の設定ファイル(nginx.conf) を編集する

flv、mp4 ディレクティブに対応するように nginx の設定ファイル(/etc/nginx/nginx.conf) を編集します。

...
server {
    listen 80;
    server_name example.com;
    ...
    location  /video/ {
        mp4;
        mp4_buffer_size     128K;
        mp4_max_buffer_size 256K;
        flv;
    }
}
...

flv、mp4 ディレクティブは、locationの配下に指定します。
上記の例では、ディレクトリ /video/ の配下で flv、mp4 ディレクティブを有効にしています。
簡単に各ディレクティブを解説しておきます。

mp4 :

mp4ストリーミング配信を有効にします。

mp4_buffer_size :

mp4ファイルを処理する際に使用するバッファのサイズを設定します。(上記の例は、非常に小さい値に設定しています。デフォルト 512K です。)

mp4_max_buffer_size :

mp4ファイルを処理するために使用するバッファサイズの最大値を設定します。このサイズをNginxが超えた場合は、500ステータスコードを返します。また、ログファイルには、以下のように出力されます。

2013/03/04 14:28:19 [error] 13530#0: *68 "/var/www/html/video/sample.mp4" mp4 moov atom is too large:7474672, you may want to increase mp4_max_buffer_size, client: xxx.xxx.xxx.xxx, server: example.com, request: "GET /video/sample.mp4?start=4062.94 HTTP/1.1", host: "example.com", referrer: "http://example.com/video/flowplayer/flowplayer-3.2.16.swf"

(上記の例は、非常に小さい値に設定しています。デフォルト 10M です。あくまで参考ですが、この設定例だと、動画ファイルがおおよそ500MBあたりからエラーが発生しだしました。 )

flv :

flvストリーミング配信を有効にします。

また、locationの配下であれば、flv、mp4 ディレクティブは、記述できますから、以下のように拡張子指定でもOKです。

...
server {
    listen 80;
    server_name example.com;
    ...
    location ~ \.mp4$ {
      mp4;
    }
    location ~ \.flv$ {
      flv;
    }
}
...

nginx の設定ファイル(/etc/nginx/nginx.conf) の編集を終えたら、nginxの再読み込み(reload)、あるいは、再起動(restart)を実行します。

$ /etc/init.d/nginx restart

動画プレイヤーを設置する

mp4形式の動画を配信するために、動画プレイヤーにフラッシュプレイヤーを使用します。
HTML5では、videoタグが提供されますが、これもブラウザによってmp4形式に対応できていたり、できていなかったりしますので、ここでは、フラッシュプレイヤーを使用します。

そこで、無料で使えるフラッシュプレイヤーで、Pseudo streaming（疑似ストリーミング）に対応している(シークができる)プレイヤーとして、Flowplayerがあります。今回は、そのFlowplayerを使って、動画配信を確認してみます。

では、早速、以下の手順で動画プレイヤーを設置します。

以下のURLからFlowplayer Flash版をダウンロードします。

http://flash.flowplayer.org/download/
商用版は、有料となります。ここでは、試用が目的なのでGPLライセンスの元ダウンロードします。
以下のURLから Pseudostreaming プラグインをダウンロードします。

http://flash.flowplayer.org/plugins/streaming/pseudostreaming.html
ページの最下部にダウンロードの箇所があります。

ダウンロードしたファイルを解凍します。

ここでは、公開ディレクトリ /video の配下に構築したいので、以下のように解凍します。

/video
  + /flowplayer ← ここに  Flowplayer Flash版 を解凍します
  |   + flowplayer-3.2.12.min.js
  |   + flowplayer-3.2.16.swf
  |   + flowplayer.controls-3.2.15.swf
  |
  + /flowplayer.pseudostreaming ← ここに  Pseudostreaming プラグイン を解凍します
      + flowplayer.pseudostreaming-3.2.12.swf
      + flowplayer.pseudostreaming-byterange-3.2.12.swf

動画を見るためのページを作成します。

ここでは、公開ディレクトリ /video の直下に flowplayer.html というファイル名で作成します。
準備するものとして、以下の２つを準備します。

最初に見せるタイトル画面イメージ

→ ここでは、 title.jpg として/video の直下に配置します。
mp4動画ファイル

→ ここでは、 sample.mp4 として/video の直下に配置します。

ここまで準備ができたら、flowplayer.html を以下のように編集します。

<!doctype html>
<html>
<head>
    <title>MP4 pseudo-streaming : Flowplayer</title>
</head>
<body>
<script src="/video/flowplayer/flowplayer-3.2.12.min.js"></script>
<a style="display:block;width:350px;height:240px;" id="player" style="cursor: pointer;">
<img border=0 src="title.jpg" style="width:350px;height:240px;" alt="title image" />
</a>
<br clear="all" />
 
<script>
flowplayer("player", "http://example.com/video/flowplayer/flowplayer-3.2.16.swf", {
    plugins: {
        pseudo: {
            url: "http://example.com/video/flowplayer.pseudostreaming/flowplayer.pseudostreaming-3.2.12.swf"
        }
    },
    clip: {
        provider: 'pseudo',
        url: 'http://example.com/video/sample.mp4'
    }
});
</script>
</body>
</html>

7行目

ここで、Flowplayer Flash版のJavaScriptを読み込んでいます。
8行目

ここで、Flowplayer Flash版を表示する aタグを指定しています。 style で、幅、高さを指定しています。サンプル動画の幅、高さに合わせてください。
9行目

Flowplayer Flash版を起動する前に仮表示するための画像を指定します。
14-23行目

Flowplayer Flash版の設定です。
“player” : aタグのIDを指定します。
“…/flowplayer-3.2.16.swf” : Flowplayer Flash版の本体を指定します。
pseudo : プラグインIDになります。
“…/flowplayer.pseudostreaming-3.2.12.swf” : pseudostreamingプラグインの本体を指定します。
provider: ‘pseudo’ : プラグインIDを指定します。
url: ‘…/sample.mp4’ : 動画ファイルを指定します。

flv形式のファイルでも同じように設置できます。
先の url: ‘…/sample.mp4’ の箇所をflvファイル名を指定するだけでOKです。

実際にmp4を見てみましょう

さて、ここまでできたら、実際にmp4を見てみましょう。
上記の例でいうと、”http://example.com/video/flowplayer.html” へアクセスしてみてください。

まず、以下のように最初に見せるタイトル画面イメージ ( title.jpg ) が表示されたと思います。
タイトル画面をクリックすると動画が始まります。

タイムスライダの見たいところをクリックしてみます。
flowplayer3

ちゃんと見たいところへ移動できればOKです。
この際、nginxは、以下のように startパラメータを含んだロギングを出力しているでしょう。

xxx.xxx.xxx.xxx- - [03/Mar/2013:16:17:50 +0900] "GET /video/sample.mp4?start=105.01 HTTP/1.1" 200 13151484 "http://example.comjp/video/flowplayer/flowplayer-3.2.16.swf" "Mozilla/5.0 (Windows NT 6.2; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0"

いかがだったでしょうか？
おもしろいとは思いますが、YouTube全盛の今にあって、どれだけの需要があるのかは、ちょっと疑問もありますが、
とりあえず、個別にどうしても動画を見せたい・・・という場合には、独自に配信できるので便利だと思います。

ただ、やっぱり動画が負荷が高いです。サーバーの負荷もネットワークの負荷も高くなりますから、十分、注意して利用する必要があるでしょうね。
例えば、以下にようにlimit_rateディレクティブを使って帯域制限をかけておく・・・などの対策は必要かを思います。

...
server {
    listen 80;
    server_name example.com;
    ...
    location  /video/ {
        mp4;
        mp4_buffer_size     128K;
        mp4_max_buffer_size 256K;
        flv;
        limit_rate 100K;
    }
}
...

100K : 100kByte/Sec の意味
帯域制限の詳細は、 nginx で帯域制限をかける(limit_rate を使ってみる) を参照してください。

動画サイトとなるとやっぱり高負荷というイメージですね。実際高負荷ですし、かなりディスクをガリガリやります。
こんなサイトにさくらのVPSの SSDプランがおすすめなんでしょうね。

1 件コメントがあります。コメントを投稿する

Ezreal
2015年5月6日, 9:09 AM

初めまして、Ezrealと申します。
nginx でPseudo streaming（疑似ストリーミング）で動画配信を行ってみるというこの記事を参考に自分で実際にやってみました。

自宅マンション　マンション共有光
環境：CentOS 6.6 64bit
動画情報 mp4ファイル（ゲーム動画）容量1GB

きになる点が1つありまして、宜しければご回答頂けませんでしょうか？
①5秒ほど動画を再生するとくるくるマークが表示され読み込みが長時間発生して再開されるの繰り返しで、ストレスたまりながらの動画閲覧となってしまっています。

nginxの設定で
mp4_buffer_size 128K;
mp4_max_buffer_size 256K
ここらへんの値を1000Mとかにしてもダメでした。
（コメントアウトしても結果が変わりません。効果まったくなし？）

limit_rateなどの制限も一切かけていません。

改善する余地があるのならば方法を教えて頂けませんでしょうか？
よろしくお願い致します。

コメントを投稿 :

(amazon )	インフラエンジニア教本2――システム管理・構築技術解説 (SoftwareDesign別冊)に寄稿しました。「ログを読む技術」の再掲載になります。 8月号を見逃された方は、是非、ご一読くださいませ。
(amazon )	Software Design 8月号に寄稿しました。「ログを読む技術」について寄稿しました。興味のある方は、是非、ご一読くださいませ。
また、執筆や当サイトにおける広告のご依頼などございましたら、お問い合わせページよりご一報ください。

nginx でPseudo streaming（疑似ストリーミング）で動画配信を行ってみる（flv、mp4ディレクティブを使ってみた）

startパラメータ(シーク)に対応できるということはどういう意味か

nginx で startパラメータ(シーク)に対応してみる

nginx の設定ファイル(nginx.conf) を編集する

動画プレイヤーを設置する

実際にmp4を見てみましょう

最近投稿の記事

さくらのVPS 全プランリニューアルです。（石狩(北海道)も選択可）

カテゴリ

Serverman@VPS 完全1ヶ月無料キャンペーン実施中です。

リンク

KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。

KVM採用お名前.com VPS(KVM) 2G プラン初期設定費無料キャンペーン実施です。

nginx でPseudo streaming（疑似ストリーミング）で動画配信を行ってみる（flv、mp4ディレクティブを使ってみた）

startパラメータ(シーク)に対応できるということはどういう意味か

nginx で startパラメータ(シーク)に対応してみる

nginx の設定ファイル(nginx.conf) を編集する

動画プレイヤーを設置する

実際にmp4を見てみましょう

最近投稿の記事

さくらのVPS 全プラン リニューアルです。（石狩(北海道)も選択可）

カテゴリ

Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。

リンク

KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。

KVM採用 お名前.com VPS(KVM) 2G プラン 初期設定費無料 キャンペーン 実施です。

さくらのVPS 全プランリニューアルです。（石狩(北海道)も選択可）

Serverman@VPS 完全1ヶ月無料キャンペーン実施中です。

KVM採用お名前.com VPS(KVM) 2G プラン初期設定費無料キャンペーン実施です。