HTML5 Video - Get final src URL Ziel

Question

I Video-Inhalte von einem 3rd-Party-Service auf meiner Website bin Anzeige:

<video src="http://www.example.com/api/v1/media/video.mp4?status=true"></video> 

Der Dienst der Sprache des Benutzers erkennt Geo-Location und Browser und gibt Video, das diejenigen passen Parameter.

Abgesehen von der Medien-URL bietet der Dienst nicht den tatsächlichen Dateinamen, den der jeweilige Benutzer erhalten hat.

Wie kann ich den endgültigen Medienpfad/-namen abrufen? Ich habe versucht, mehrere Möglichkeiten, aber Iframes von X-Frame-Optionen blockiert: DENY und AJAX blockiert auch.

Answer 1

Die kurze Antwort ist, dass Sie dies wahrscheinlich nicht alle auf der Client-Seite tun können. Sie werden in same-origin Probleme auftreten. Darüber hinaus ist es nicht möglich, die HTTP-Header eines Elementsdirekt abzurufen.

Wenn der Dienstanbieter für die Videos CORS Unterstützung aktiviert, können Sie möglicherweise die endgültige URL über eine Problemumgehung erhalten. Selbst wenn CORS aktiviert ist, können Sie die HTTP-Header oder die finale URL des Videos nicht vom Elementabrufen.

Sie können dieses Problem umgehen:

1. eine Anfrage zweite HTTP Stellen (XMLHttpRequest, fetch, $.ajax, usw.) auf die gleiche URL.
2. Machen Sie eine HEAD Anfrage statt einer GET Anfrage. GET Anforderungen versuchen, die gesamte Datei abzurufen. HEAD Anfragen laden nicht den Körper, nur die Header, die genug für die Auflösung der Umleitung wäre.
3. Suchen Sie in den Kopfzeilen der HEAD-Antwort nach dem endgültigen URL-Pfad.

Hier ist ein Beispiel, das fetch verwendet:

var request = new Request(yourVideoUrl); 
request.mode = 'cors'; 
request.method = 'HEAD'; 

fetch(request) 
.then(function(res){ 
    console.log(res.url); // This should be the final URL 
});