Czy istnieje sposób na włączenie niestandardowego nagłówka http w rozmowie źródłowej <video>?

Question

Mam prostego odtwarzacza html5, zaimplementowanego z wideoJS. Aby poprawnie pobrać pliki źródłowe z serwera, muszę ustawić niestandardowy nagłówek w żądaniu dla wideo.

Ponieważ aplikacja używa angularjs, ja wdrożył Interceptor ustawić nagłówek:

myApp.factory('headerInterceptor', function() { 
    return { 
    request: function (config) { 
     config.headers['my-header'] = 'test'; 
     return config; 
    } 
    }; 
}); 

myApp.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('headerInterceptor'); 
} 

problem z tym jest to, że wezwanie do filmu nie jest przechwycony przez nią, więc nie ma nagłówek jest ustawiony (to jest jednak dla innych zasobów). Tak kątowe nie ładuje filmów. Nic w tym dziwnego. Sprawdzanie karty sieciowej w dostarczaniu narzędzi programistycznych, okazało się, że videoJS inicjuje połączenie:

Ale znalezienie mój sposób na wtyczce videoJS było trudne, i nie znaleźli, gdzie są wykonane połączenia. Zastanawiam się tylko, czy istnieje prosty sposób na ustawienie nagłówka tego połączenia? nie ma znaczenia, czy jest to zwykły javascript, czy poprzez kanciasty, czy nawet modyfikujący wtyczkę wideoJS.

Answer 1

Wewnątrz bloku przebiegu kątowego można zastąpić funkcję XJR przed wypowiedzeniem wtyczką wideojs. YMMV, ale jeśli używasz wtyczki HLS na przykład, można zrobić coś takiego:

angular.module('app', []).run(function($localStorage) { 

    var _beforeRequest = _.isFunction(videojs.Hls.xhr.beforeRequest); 
    videojs.Hls.xhr.beforeRequest = function(options) { 
     if (_beforeRequest) { 
      options = _beforeRequest(options); 
     } 
     if ($localStorage.token) { 
      options.headers = options.headers || {}; 
      options.headers.Authorization = 'Token ' + $localStorage.token; 
     } 
     return options; 
    }; 
}); 

Answer 2

ja wpadłem na ten problem również. Chciałem wysłać nagłówek autoryzacji wraz z każdym filmem i obrazem żądanym do mojej witryny i użyć natywnego tagu wideo html5. Po długich poszukiwaniach nie mogłem znaleźć żadnego rozwiązania, które pozwalałoby na stosowanie niestandardowych nagłówków. Ostatecznie zdecydowałem się utworzyć plik cookie na początku aplikacji. Ponieważ pliki cookie są wysyłane na każde żądanie, mogłem skonfigurować mój interfejs Web API w celu wyszukania tego pliku cookie tylko wtedy, gdy wymagane są obrazy i filmy. W ten sposób reszta strony będzie nadal używać nagłówka autoryzacji.

ngCookies musiały być dodawane do aplikacji:

var app = angular.module('myApp', ['ngCookies']); 

Następnie na początku stosowania:

app.run(['$cookies', function ($cookies) { 
     $cookies.put("[COOKIE_NAME]", "[TOKEN]"); 
}