Videoタグを用いた動画を疑似ストリーム再生できるようにするのに必要なサーバー側の機能について解説します。
簡易のWebサーバーは機能不足
前回HetimaDelphiniumという簡易のWebサーバーを作成しました。Getリクエストで指定されたファイルをレスポンスで返すだけのシンプルな物です。
しかし、この機能だけだと、動画を上手く再生できない事があります。
例えば、以下のようなVideoタグを持つWebページを表示して見ます。
例
<video src="xx.mp4"></video>
そして、コントロールを操作して、半分くらいの所から動画を再生してみます。
反応しません。コントロールで指定した位置で動画が再生されません。
再生に必要な部分だけダウンロードする機能が必要
途中から動画を再生したい場合は、一部分だけダウンロードできる必要があります。
一部分だけダウンロードするには、Rangeヘッダーに対応する必要があります。
Rangeヘッダーを含めてリクエストされる
実際な、<video>ヘッダーが指定されたWebページを読み込むと、"Range: bytes=36-"
と行ったヘッダーが追加された、Getリクエストが渡されます。
例
GET /hetima/BigBuckBunny_320x180.mp4 HTTP/1.1
Host: 0.0.0.0:18085
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.101 Safari/537.36
Accept: */*
Referer: http://0.0.0.0:18085/hetima/BigBuckBunny_320x180.mp4?preview=true
Accept-Language: ja,en-US;q=0.8,en;q=0.6
Range: bytes=36-
36バイト以降すべてのデータをダウンロードしたいと言う意味です。
Rangeヘッダーで指定された部分だけレスポンスする
Content-Rangeヘッダーを追加してデータを渡します。それ以外の部分は、通常のGetリクエストとおなじです。
例
HTTP/1.1 206 Partial Content
Connection: close
Content-Length: 64656991
Content-Type: video/mp4
Content-Range: bytes 36-64657026/64657027
上は64657027バイトのデータの36バイト〜64657026を配信するという意味です。※36,64657026バイト目のデータ含みます。
作ってみた
上記機能を実現する事で、mp4ファイルのストリーム再生が出来る事を確認しました。
サンプルまでにどうぞ
HetimaDelphinium
githubのソース
再生してみた動画
IPod5G用 320×180(62 MB)で動作するした。
https://peach.blender.org/index.php/download/