Youtube-Blob-urls funktionieren nicht im Browser aber in der src

Ich weiß, dass es keine blob-urls werden nur Objekte.

Machte ich meine eigenen blob-Objekt für den video-Puffer und dann habe ich es in ein src von video-tag, das ist so etwas wie blob://website.com/blablobbla . Ich öffnete diese url im browser funktionierte es

als ich öffnete die url des youtube-video-src (blob-url in einem neuen tab, es hat nicht funktioniert, aber mir video src blob (url) gearbeitet

Möchte ich wissen, wie kann ich das gleiche mit meinem blob-urls, so dass Sie nur die Arbeit in den src des html-video-tag und geben Fehler oder funktionieren nicht in der externen tab/Fenster des Browsers.Ich möchte nur wissen, die Technologie, die hinter dieser-und blob-Objekte und Ihre url-Eigenschaften.

Und braucht man bei dieser Frage gleichen problem bin ich vor. habe versucht zu suchen, eine Menge, aber immer noch mit leeren Händen. 🙁
Öffnen Sie ein youtube-video fügen Sie diesen code in der Konsole-Dokument.querySelector("video").src-jetzt kopieren Sie die " src " und fügen ihn in die browser-url-Abschnitt und drücken Sie die EINGABETASTE, es werde nicht funktionieren, erstellen Sie jetzt Ihre eigene website, in denen es einen blog, in dem src-video kopieren, in die url-Abschnitt und überraschen Ihre arbeiten wie Charme

InformationsquelleAutor Waqas Tahir | 2015-06-28

8

Die Frage scheint etwas vage zu mir, also hier ist, was ich interpretieren (auch aus dem code in der fiddle-Bilder, die in Ihrer Frage):
- erhalten Sie eine Blob (Bild binäre Daten) durch ein XMLHttpRequest() GET-Anfrage (responseType = 'blob')
- erstellen Sie eine Blob URL mit URL.createObjectURL() im URL Store für XMLHttpRequest() response-Objekt (die Blob halten, werden die binären Daten)
- legen Sie die resultierende Blob URL-string als src für ein Bild (und fügen Sie das Bild in das Dokument, damit zeigt das Bild, das Sie gerade heruntergeladen haben)
- Sie "nicht wollen, dass es in new tab" ("es" als Blob URL-string nehme ich an).
In Ihre Kommentare, die Sie sagen:
- In der fiddle-ich überprüft das Bild und kopiert die src und dann klebte es in einem neuen tab und es funktionierte und zeigte das Bild ich will nicht das Bild gezeigt werden soll, direkt mit dem blob-url.
- Wenn Sie gehen zu youtube und öffnen Sie den src des video in einem neuen tab : Es wird nicht funktionieren, ich wollen, dass dies geschehen
Erscheint es mir, dass Sie nicht möchten, die der Benutzer zum anzeigen/laden der blob-wenn Sie kopieren Sie die Blob URL-string (durch untersuchen der live-Quelle oder einfach right-click-on-image>>Copy Imagelocation) und fügen Sie es in einem neuen tab/Fenster (für die, die Sie geben, youtube als Beispiel).

Aber Sie sind auch reden Videos.

TL;DR: Es scheint, Ihre Frage/bounty könnte die Vermischung der 2 verschiedene Arten von URL zurückgegeben window.URL.createObjectURL();:
- Blob-URL Referenzierung (Objekte) "raw lokale Daten" (wie auch (Lokal-)Datei, Blob, etc.)
  
  Für diese, die Sie wollen, um automatisch (oder programmgesteuert) widerrufen die Blob URL des Browsers URL Store (die Sie könnte erwägen, eine vereinfachte lokalen webserver im browser, nur, dass der browser).
  - var myBlobURL=Fenster.URL.createObjectURL(Objekt, flag_oneTimeOnly);
    
    gibt ein re-usable Blob URL die kann widerrufen werden, mit: Fenster.URL.revokeObjectURL(myBlobURL) (fügt die Blob URL string an die Revocation List).
    
    _{Hinweis: es verwendet werden, um eine zweite argument flag_oneTimeOnly die verwendet wird, zum Widerruf der Blob URL wird automatisch nach der ersten Benutzung, aber das ist aktuell nicht mehr Teil der spec! Auch diese fahne oft nicht funktioniert trotzdem (zumindest in firefox).}
  - var myBlobURL=Fenster.URL.createFor(Objekt);
    
    gibt eine Blob URL ist automatisch gesperrt, nachdem Sie nach der ersten Verwendung.
    
    _{Hinweis: einige Browser die 'spät' zu implementieren ist.}
- MediaSource-Objekt-URL verweisen auf eine Besondere MediaSource-Objekt
  
  Diese URL ' s sind
  - sollte nur zur Verknüpfung src einer HTMLMediaElement (denke <audo> & <video> Elemente), um die Besondere MediaSource Object
    
    _{Hinweis: einem neuen tab/Fenster ist nicht ein HTMLMediaElement}
  - der automatisch gesperrt
    
    _{Hinweis: obwohl Sie erstellt wurden, durch window.URL.createObjectURL();}
Hier ist passiert, was für die Geige, die in Ihrer Frage das Bild und ähnliche Codes, die heruntergeladen ein video als Blob (in dem Sie die heruntergeladene video-Datei/Binär auf den server mit einem xhr) oder andere "lokale" Daten:

Sie sind im wesentlichen mit der 'nackten' 'un-enhanced' Datei-API.

Die URL Store nur beibehalten, während einer Sitzung (so wird es überleben, ein page-refresh, da es immer noch die gleiche session) und gehen verloren, wenn das Dokument entladen wird.

Also, wenn Sie Ihre Geige ist noch offen, dann fiddle-Dokument (das Dokument, das erstellt, die Blob URL) ist offensichtlich nicht aber noch nicht geladen, und deshalb ist es Blob URLs zur Verfügung stehen, der browser (jeder tab/Fenster), solange es nicht widerrufen!

Dies ist ein relevanter Funktion: Sie bauen können/download/ändern Blob im browser, erstellen Sie eine Blob URL und legen Sie es als href auf ein Datei-download-link (das kann der Benutzer mit der rechten Maustaste und öffnen in einem neuen tab/Fenster!!)

Schließen Sie die fiddle, widerrufen oder die Blob URL von der URL Store und die Blob URL ist nicht mehr erreichbar (auch nicht in einem anderen tab/Fenster).

Versuchen Sie, sich selbst mit Ihrer modifizierten fiddle: https://jsfiddle.net/7cyoozwv/

In diesem fiddle-es sollte nun nicht mehr möglich sein, laden Sie Ihre Beispiel-Bild in einem anderen tab/Fenster, nachdem Sie kopiert die Bild-url (wenn das Bild angezeigt wird auf der Seite).

Hier habe ich widerrufen Sie den URL manuell ( revokeObjectURL() ), wie es derzeit der beste cross-browser-Methode (teilweise durch die api noch nicht vollständig stabilisiert wird).

Beachten Sie auch: ein element ist onload Veranstaltung können Sie einen eleganten Ort, um jederzeit Ihre Blob URL.

Hier ist, was geschieht, um eine <audio> oder <video> Quelle verknüpft mit einer MediaSource Object mit einem MediaSource object URL zurückgegeben window.URL.createObjectURL(MediaSource):

Die Media Source Extensions (MSE) auch verlängern die File-API's window.URL.createObjectURL() zu akzeptieren MediaSource Object. Die (derzeitigen Entwurf) URL-Objekt Erweiterung gibt an, dass:

Dieser Algorithmus soll Spiegel das Verhalten der createObjectURL()[FILE-API] - Methode mit autoRevoke auf true gesetzt.

^{Beachten Sie, dass die aktuelle Spezifikation der File API's window.URL.createObjectURL() nicht mehr hat eine autoRevoke (oder flag_oneTimeOnly) boolean flag zugänglich für den Programmierer, der sollte mit window.URL.createFor() für diesen Zweck statt. Ich Frage mich, wenn die Media-Source-spec wird imitieren (und für die Abwärtskompatibilität alias Ihre createObjectURL() zu einem neuen createFor() extension (scheint besser geeignet als das ist, wie es zu sein scheint, sollte die Arbeit derzeit)).}

Diese resultierende automatisch widerrufen URL-Zeichenfolgen sind nur gedacht der link zu der src einer HTMLMediaElement (denke <audo> & <video> Elemente), um die Besondere MediaSource Object.

_{ich glaube nicht, dass eine leere Document (aus einem neuen tab/Fenster) ist eine <audo> oder <video> element.}

Vielleicht "Ein schnelles tutorial auf MSE"^{(Quelle: MSDN)} könnte helfen, klären den Unterschied und Grundlagen:
Zur Nutzung der MSE-API, gehen Sie folgendermaßen vor:
1. Definieren eine HTML5 - video - element im HTML-Bereich einer Seite.
2. Erstellen Sie eine MediaSource - Objekt in JavaScript.
3. Erstellen Sie eine virtuelle URL mit createObjectURL mit der MediaSource - Objekt als Quelle.
4. Ordnen Sie die virtuelle URL, um das video-element ist src Eigenschaft.
5. Erstellen Sie eine SourceBuffer mit addSourceBuffer mit dem mime-Typ des Videos, das Sie hinzufügen.
6. Die video-Initialisierung segment aus der media-Datei, online und fügen Sie es in die SourceBuffer mit appendBuffer.
7. Holen Sie sich die Segmente von video-Daten aus der media-Datei, fügen Sie diese in die SourceBuffer mit appendBuffer.
8. Rufen Sie die play - Methode für das video-element.
9. Wiederholen Sie Schritt 7, bis getan.
10. Bereinigen.
Du (oder ein big-time-player wie youtube, der dynamisch auszuwählen, unterstützende Technologien für die Wiedergabe auf der client-Plattform (es gibt also keinen Weg, zu sagen, für sicher, welche Art von youtube-video-URL die Sie sprechen)) könnte werden mit der neuen special MediaSource Object zur Wiedergabe von video (oder audio).

Dies fügt Puffer-basierte Quelle-Optionen, um HTML5-video für streaming-Unterstützung (im Gegensatz zum herunterladen von einer kompletten video-Datei vor der Wiedergabe, oder verwenden Sie ein add-on wie Silverlight oder Adobe Flash zum streamen von Medien).

Hoffe dies ist was Sie nach!
- Ich habe jetzt alles. ThanksAlso.
- OMG Ihre Antwort war sehr lange zu Lesen.Nur halten Sie es einfach, Sie zu verstehen.
- Danke (für akzeptieren und bounty), und Sie sind herzlich willkommen! Für was es Wert ist, denke ich, ein bounty-Antwort sollte alle relevanten Referenz und Quelle, ohne Erklärung wäre die Antwort eigentlich nur sein: "Widerrufs-und Document !== HTMLMediaElement". Ich auch gefühlt es war wichtig, darauf hinzuweisen, wie die counter-intuitive createObjectURL() macht ganz verschiedene Sachen, je nachdem, wie Sie es verwenden (ich bin immer mit einem Kampf zu kombinieren, kurz und abgeschlossen). Ich habe gerade neu überprüft, meine Geige, war die Arbeit ok. Ich nehme an, du hast es am Ende funktionieren?
InformationsquelleAutor GitaarLAB
5

Tatsächlich, die URL, die Sie sich beziehen, ist nur ein "string" Verweis auf die BLOB selbst (die erstellt wird, mithilfe der Funktion window.URL.createObjectURL), So dass Sie können es verwenden, wie eine normale URL. Und der Umfang ist auch nur bis das Dokument entladen wird.

So, ich glaube nicht, dass es möglich ist, für Sie zu öffnen, die URL nur mit dem browser. Auch habe ich versucht, neu zu erstellen, was du sagst, aber ohne Erfolg (in meiner eigenen website, erstellen einer blob, und setzen Sie die URL in browser).

Unten ist der code
```
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://kurrik.github.io/hackathons/static/img/sample-128.png");
xhr.responseType = "blob";
xhr.onload = function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   console.log(imageUrl);
   var imgDOM = document.createElement("img");

   imgDOM.src = imageUrl;
   document.getElementById("divImage").appendChild(imgDOM);
};
xhr.send();
```
Geige hier

Update :

Ok, nachdem ich sah Sie an. scheint wie youtube ist mit Medien-Quelle das video zu streamen.

Habe ich nicht aktualisiert, die Geige (nicht ein video gefunden, das ich verwenden kann). Aber, im Grunde, Er immer noch mit der gleichen Funktion (createObjectURL) zu erstellen, die blob-URL. Aber anstatt sich mit den source (Bild, video, etc) zur übergabe an die Funktion. Sie sollte passieren die MediaSource - Objekt in der Funktion.

Dann, Sie verwenden die blob-URL und übergeben es in die video.src. Daher, wenn Sie versuchen, öffnen Sie die blob-link. Sollten Sie nicht in der Lage sein zu sehen, das video wieder.
- genau das, was passiert in dem code oben. versuchen Sie, öffnen Sie den Wert in imageUrl in einer anderen Registerkarte, und Sie werden sehen 😉 (aber offensichtlich nicht mit htaccess zu tun)
- In fiddle begutachtete ich das Bild und kopiert die src und dann klebte es in einem neuen tab und es funktionierte und zeigte das Bild, das ich don T wollen das Bild angezeigt werden-die direkt mit der blob-url.
- Nun, können Sie mir die URL, die Sie verwenden? denn wenn ich es versuche, es wird immer eine 404-Seite.
- Wenn ich übergeben Sie die url, um Sie es werde nicht funktionieren in Ihrem browser, da die url, die erstellt wird, mithilfe von Zufallszahlen durch den browser.
- Erste, mehr wie UUID als Zufallszahlen. Zweitens, ich fange an zu Rätseln, wie genau Sie versucht, um das Bild zu öffnen?. Scheint, Sie verwechseln die URL, die der BLOB bezieht sich auf die Reale URL, die wirklich die Umleitung auf die Datei. So, könnten Sie benötigen, um eine Schritt-für-Schritt, wie genau Sie dies tun (wenn möglich mit screenshot zur Verdeutlichung) auf die Frage.
InformationsquelleAutor kucing_terbang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.