コンテキストを示すために、node.js サーバーのメソッドを指す属性を<video>
持つタグがあります。src
このメソッドは、ブラウザによって指定された HTTP ヘッダー に応じて、mp4
別のサーバーからファイル、またはファイルの一部を取得します。mp4
Range
Range:bytes=0-
期待される動作 (Chrome の動作)
私のnode.jsサーバーがサードパーティのサーバーからファイル全体をダウンロードするのを防ぐために、一度にダウンロードするために約5MBの最大バッファを実装しました。したがって、ユーザーがヘッダー付きのビデオを取得するためにリクエストを送信した場合
GET /play-test/videoId HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
Accept: */*
Referer: http://127.0.0.1:8000/movie/99861
Accept-Language: en-US,en;q=0.8,es;q=0.6
Range: bytes=0-
..その後、サーバーは次のように応答します
HTTP/1.1 206 Partial Content
X-Powered-By: Express
Content-Range: bytes 0-5000000/415473786
Connection: keep-alive
Accept-Ranges: bytes
Content-Length: 5000001
Content-Type: video/mp4
Date: Tue, 20 Oct 2015 12:50:42 GMT
これは十分に一般的なパターンだと思います。クライアント (この場合はブラウザー) が要求したbytes=0-
(開始から終了まで) にもかかわらず、私は代わりに最初の 5MB で応答し、最も重要なことに、応答には合計 415MB のうちの 5MB ( Content-Range: bytes 0-5000000/415473786
)。206
応答には、応答が部分的な応答であることを示すステータスもあります。
Chrome では、これは期待どおりに機能します。ビデオが最初の 5 MB のビデオの再生を終了する直前に、同じエンドポイントにヘッダーを使用して別のリクエストを行います。
GET /play-test/videoId HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
Accept: */*
Referer: http://127.0.0.1:8000/movie/99861
Accept-Language: en-US,en;q=0.8,es;q=0.6
Range: bytes=5000001-
繰り返しますが、最大5MBで応答します...
HTTP/1.1 206 Partial Content
X-Powered-By: Express
Content-Range: bytes 5000001-10000001/415473786
Connection: keep-alive
Accept-Ranges: bytes
Content-Length: 5000001
Content-Type: video/mp4
Date: Tue, 20 Oct 2015 12:51:08 GMT
このパターンは、動画が終了するまで続きます。ユーザーがシーク バーを使用して一時停止またはスキップすると、ブラウザは必要な時間の特定のバイト範囲を要求します。私が言ったように、すべてがChromeでうまく機能します。
Firefox の動作
Firefox の動作を説明することは、正しい動作を説明することよりもはるかに簡単です!
Firefox リクエスト
Host: 127.0.0.1:8000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: en-US,en;q=0.5
Range: bytes=0-
Referer: http://127.0.0.1:8000/movie/272
Connection: keep-alive
応答
206 Partial Content
Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 5000001
Content-Range: bytes 0-5000000/415473786
Content-Type: video/mp4
Date: Tue, 20 Oct 2015 13:15:49 GMT
X-Powered-By: Express
それだけです - Firefox はビデオの最初の 5MB を再生し、それ以上のリクエストはサーバーに対して行われません。シーク バーにはビデオの正しい再生時間が表示されますが、シーク バーは機能しません。ユーザーがビデオをシークしようとすると、最初にスキップして最初の 5MB をもう一度再生します。
どんな助けでも大歓迎です。