Gibt es eine Möglichkeit, einen benutzerdefinierten http-Header in einen <video>-Quellaufruf aufzunehmen?

Question

Ich habe einen einfachen HTML5-Player, mit videoJS implementiert. Um die Quelldateien ordnungsgemäß vom Server abrufen zu können, muss in der Anforderung für das Video ein benutzerdefinierter Header festgelegt werden.

Da die Anwendung AngularJS verwendet, ich implementiert eine Interceptor die Header zu setzen:

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 dabei ist, dass der Anruf an das Video wird durch sie nicht eingefangen, so dass keine Header (so dass er ist aber für andere Ressourcen). So eckig lädt die Videos nicht. Keine große Überraschung darin. Überprüfen des Netzwerk Registerkarte Entwicklertools, fand heraus, dass VideoJS den Anruf einleitet:

Doch die Suche nach dem Weg in der VideoJS Plugin schwierig war, und couln't finden, wo die Anrufe getätigt werden. Ich frage mich nur, gibt es eine einfache Möglichkeit, die Kopfzeile für diesen Anruf festzulegen? Es spielt keine Rolle, ob es sich um einfaches JavaScript handelt oder um eckiges oder sogar modifizierendes videoJS-Plugin.

Answer 1

Innerhalb eines Angular-Laufblocks können Sie das videojs-Plugin XHR beforeRequest-Funktion überschreiben. YMMV, aber wenn Sie HLS verwenden Plugin zum Beispiel, könnten Sie so etwas tun:

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

ich auch in dieser Ausgabe lief hatte. Ich wollte mit jedem Video und Bild, das für meine Website angefordert wurde, einen Autorisierungsheader senden und das native html5-Video-Tag verwenden. Nach langer Suche konnte ich keine Lösung finden, die benutzerdefinierte Header zulässt. Am Ende habe ich beschlossen, zu Beginn der Anwendung einen Cookie zu erstellen. Da Cookies bei jeder Anfrage gesendet werden, konnte ich meine Web-API so einrichten, dass sie nur dann nach diesem Cookie sucht, wenn Bilder und Videos angefordert werden. Auf diese Weise würde der Rest der Site weiterhin den Berechtigungsheader verwenden.

ngCookies die Anwendung zu haben hinzugefügt:

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

Dann zu Beginn der Anwendung:

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