HTML5 видео загружается медленно в FireFox, но довольно быстро в Chrome
В настоящее время я внедряю прокси для потоковой передачи видео с другого сайта компании, прозрачно обрабатывая аутентификацию под капотом.
Кажется, что вся аутентификация, частичное содержимое и потоковая часть работают нормально, за исключением некоторых мелких деталей: он работает довольно быстро в Chrome и Edge, но очень медленно загружается в FireFox. Более того, это замедление в FireFox происходит только в том случае, если вы воспроизводите видео с самого начала; если вы пропустите несколько секунд, с этого момента он будет воспроизводиться нормально. Кроме того, как ни странно, если поддержка частичного контента удалена, видео нормально загружается в FireFox, но, конечно, пропуск вперед становится невозможным.
Одна вещь, которую я заметил до сих пор, заключается в том, что FireFox сначала делает запрос без заголовка range, а затем продолжает делать несколько запросов с заголовком range. Chrome, с другой стороны, делает только один запрос без 'range'; он только добавит "диапазон" к заголовку, если вы попытаетесь пропустить его.
Кроме того, FireFox, кажется, запрашивает один и тот же диапазон несколько раз, когда вы воспроизводите видео с самого начала.
Кто-нибудь знает, почему FireFox ведет себя так и что я могу сделать, чтобы изменить его поведение или предоставить то, что ему нужно?
'use strict'
const express = require('express');
const router = express.Router();
const request = require('request');
const setCookie = require('set-cookie-parser');
const _ = require('lodash');
const logger = require('./log').normal;
const CAMINHO_BASE = 'http://placewherethevideosaretakenfrom/';
let videoEstaAutenticado = false;
router.get('/video/*', (req, res) => {
let caminho = req.params[0];
logger.info('Video no caminho ' + caminho, {range: req.headers.range});
let caminhoCompleto = CAMINHO_BASE + caminho.split('/').map(encodeURIComponent).join('/');
logger.info('Caminho completo ' + caminhoCompleto);
request.debug = true; // FIXME: DEBUG
const headersOriginais = req.headers;
logger.info('Headers originais', {headersOriginais});
function proxyVideo() {
logger.info('Obtendo pedaço do vídeo.', req.headers);
let headers = _.chain(req.headers)
.pick(req.headers, 'accept', 'accept-encoding', 'connection', 'range', 'user-agent')
.value();
request(caminhoCompleto, {
headers: headers,
jar: true
})
.pipe(res);
}
if (videoEstaAutenticado) {
proxyVideo();
} else {
console.info('Autenticando vídeo', {caminho});
request.get(caminhoCompleto, {
auth: {
user: process.env.UNIVERSIDADE_USER,
pass: process.env.UNIVERSIDADE_PASS
},
jar: true
})
.on('response', response => {
videoEstaAutenticado = true;
proxyVideo();
});
}
});
module.exports = router;
Некоторая дополнительная информация: я также экспериментировал со статической передачей видео через Apache; он работает при локальном доступе, но если я использую ngrok ( https://ngrok.com/) для доступа к нему извне, происходит точно такая же ошибка; похоже, у FF есть проблемы с прокси / туннелированием или что-то в этом роде.
Видео в формате mp4 и тип контента video/mp4
,
Вот несколько примеров заголовков запроса / ответа.
Request URL: http://9e1f9fc2.ngrok.io/teste-temp/teste_1_digitacao.mp4
Status code: 200 OK
Response headers (263 B)
Accept-Ranges
bytes
Content-Length
23182123
Content-Type
video/mp4
Date
Tue, 12 Dec 2017 11:26:04 GMT
ETag
"161bb2b-55fbc97ec7340"
Last-Modified
Thu, 07 Dec 2017 09:21:30 GMT
Server
Apache/2.4.29 (Win32) OpenSSL/1.0.2l PHP/5.6.32
Request headers (421 B)
Accept
text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8
Accept-Encoding
gzip, deflate
Accept-Language
pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Connection
keep-alive
Cookie
_ga=GA1.2.1214318081.1511440374
Host
9e1f9fc2.ngrok.io
Upgrade-Insecure-Requests
1
User-Agent
Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/57.0
===
Request URL: http://9e1f9fc2.ngrok.io/teste-temp/teste_1_digitacao.mp4
Status code: 206 Partial Content
Response headers (324 B)
Accept-Ranges
bytes
Content-Length
20003627
Content-Range
bytes 3178496-23182122/23182123
Content-Type
video/mp4
Date
Tue, 12 Dec 2017 11:26:08 GMT
ETag
"161bb2b-55fbc97ec7340"
Last-Modified
Thu, 07 Dec 2017 09:21:30 GMT
Server
Apache/2.4.29 (Win32) OpenSSL/1.0.2l PHP/5.6.32
Request headers (467 B)
Accept
video/webm,video/ogg,video/*;q…q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language
pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Connection
keep-alive
Cookie
_ga=GA1.2.1214318081.1511440374
Host
9e1f9fc2.ngrok.io
Range
bytes=3178496-
Referer
http://9e1f9fc2.ngrok.io/teste-temp/teste_1_digitacao.mp4
User-Agent
Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/57.0
===
Request URL: http://9e1f9fc2.ngrok.io/teste-temp/teste_1_digitacao.mp4
Status code: 206 Partial Content
Response headers (324 B)
Accept-Ranges
bytes
Content-Length
20003627
Content-Range
bytes 3178496-23182122/23182123
Content-Type
video/mp4
Date
Tue, 12 Dec 2017 11:26:09 GMT
ETag
"161bb2b-55fbc97ec7340"
Last-Modified
Thu, 07 Dec 2017 09:21:30 GMT
Server
Apache/2.4.29 (Win32) OpenSSL/1.0.2l PHP/5.6.32
Request headers (467 B)
Accept
video/webm,video/ogg,video/*;q…q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language
pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Connection
keep-alive
Cookie
_ga=GA1.2.1214318081.1511440374
Host
9e1f9fc2.ngrok.io
Range
bytes=3178496-
Referer
http://9e1f9fc2.ngrok.io/teste-temp/teste_1_digitacao.mp4
User-Agent
Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/57.0