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

0 ответов

Другие вопросы по тегам