为了提供一些背景信息,我有一个<video>
标签有一个src
指向我的 Node.js 服务器上的方法的属性。该方法得到一个mp4
来自另一台服务器的文件,或者更确切地说part of an mp4
文件,取决于Range
由浏览器指定的 HTTP 标头,例如 -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 中,这按预期工作 - 在视频播放完前 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=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 的行为比描述正确的行为要直接得多!
火狐请求
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
Response
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。
任何帮助,将不胜感激。