HTML5视频在FireFox上加载缓慢,但在Chrome

时间:2017-11-24 11:07:40

标签: node.js google-chrome firefox html5-video http-proxy

我目前正在实施一个代理,用于从公司的另一个站点流式传输视频,透明地处理引擎下的身份验证。

到目前为止,整个身份验证,部分内容和流媒体部分似乎都运行良好,除了一些小细节:它在Chrome和Edge上运行得相当快,但在FireFox上加载速度非常慢。而且,只有从一开始播放视频时才会出现FireFox的这种缓慢;如果你跳过几秒钟,它会从那一点开始正常播放。此外,奇怪的是,如果支持部分内容被删除,视频在FireFox上加载正常,但当然,跳过前面变得不可能。

到目前为止,我注意到的一件事是,FireFox似乎首先发出没有'range'标头的请求,然后它继续使用'range'标头发出多个请求。另一方面,Chrome只提出一个没有“范围”的请求;如果您尝试跳过,它只会在标题中添加“范围”。

此外,当您从一开始播放视频时,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 个答案:

没有答案