Gli url del blob di Youtube non funzionano nei browser ma in src

Question

Innanzitutto, so che non ci sono solo oggetti blob URL.
Ho creato il mio oggetto blob per un buffer video e poi l'ho usato in un src di tag video che è qualcosa come blob: //website.com/blabla. Così ho aperto questo URL in una nuova scheda del mio browser Chrome ha funzionato perfettamente Ora quando ho provato ad aprire l'URL del video di YouTube su una nuova scheda che non funzionava, ma il mio BLOB ha funzionato come un fascino Perché è così?
Posso anche creare il mio sistema in modo che il blob non funzioni nei browser ma in src?
È questo qualsiasi tipo di codice htaccess che posso usare?

e io non voglio farlo funzionare in una nuova scheda.

Answer 1

la questione sembra un po 'vaga a me, ecco quello che io interpreto (anche dal codice nei violino-immagini nella tua domanda):

• Riceverete Blob (dati binari dell'immagine) attraverso un XMLHttpRequest()GET -request (responseType = 'blob')
• si crea un Blob URL con URL.createObjectURL() nelle URL Store per XMLHttpRequest()response -oggetto (i Blob contenenti i dati binari)
• imposta la stringa risultante come src per un'immagine (e aggiungi l'immagine al documento, mostrando in tal modo l'immagine appena scaricata)
• "Non vuoi che funzioni in una nuova scheda" ("it" essendo la stringa Blob URL presumo).

Nei tuoi commenti che dicono:

• In violino ho ispezionato l'immagine e copiato lo src e poi incollate nella nuova scheda e ha funzionato e ha mostrato l'immagine I don Non voglio che l'immagine venga mostrata direttamente con l'url blob.

• Se vai a youtube e apre lo src del video in nuova scheda: Non funzionerà ,, voglio che questo accada

Sembra me che lo fai non vuoi che l'utente sia in grado di visualizzare/scaricare il blob quando copia lo Blob URL -string (esaminando la fonte live o semplicemente right-click-on-image>>Copy Imagelocation) e incollarlo in in una nuova scheda/finestra (per la quale si dà a youtube come esempio).

Ma sei anche parlando di video.

TL; DR: Sembra tua domanda/taglie potrebbe essere mescolando fino 2 diversi tipi di URL restituiti da window.URL.createObjectURL();:

• Blob URL riferimento (oggetti che rappresentano) 'dati locali raw' (come (locale-) File, Macchia, etc.)
  per queste si desidera automaticamente (oa livello di programmazione) revoca il Blob URL dal browser URL Store (che si potrebbe prendere in considerazione un server web locale semplificata all'interno del browser, disponibile solo a quella del browser) .
  • var myBlobURL=window.URL.createObjectURL(object, flag_oneTimeOnly);
    restituisce un riutilizzabile Blob URL che può essere revocata con:window.URL.revokeObjectURL(myBlobURL) (aggiunge la stringa Blob URL al Revocation List).
    _{Nota: c'era un secondo argomento flag_oneTimeOnly che veniva utilizzato per revocare automaticamente lo Blob URL dopo il primo utilizzo, ma attualmente non fa più parte della specifica! Anche questa bandiera spesso non ha funzionato comunque (almeno in Firefox).}
  • var myBlobURL=window.URL.createFor(object);
    restituisce un Blob URL che viene automaticamente revocata dopo che è primo utilizzo.
    _{Nota: alcuni browser erano "in ritardo" per implementare questo.}
• MediaSource object URL riferimento a un specialiMediaSource Object
  Questi URL del sono
  • solo destinato a collegare src di un HTMLMediaElement (si pensi <audo> & <video> elementi) alla speciale MediaSource Object
    _{Nota: una nuova tab/window non è un HTMLMediaElement}
  • alreadyautomatically revoked
    _{Nota: anche se sono create per mezzo di window.URL.createObjectURL();}

---

Ecco cosa sta accadendo per il violino nel codice immagine e simili della sua domanda che ha scaricato un video come Blob (dove hai scaricato l'intero file del file video/binario sul server utilizzando una xhr) o qualsiasi altro dato "locale":
Si sta essenzialmente utilizzando il 'nudo' 'non potenziato' File-API.
URL Store viene mantenuto solo durante una sessione (quindi sopravviverà a un aggiornamento della pagina, poiché è sempre la stessa sessione) e perso quando il documento viene scaricato.
Quindi, se il vostro violino è ancora aperto, quindi violino-documento (il documento che ha creato il Blob URL) è ovviamente non ancora scaricato, e quindi è Blob URL s sono disponibili per il browser (qualsiasi scheda/finestra) il più a lungo non è revocato!
Si tratta di una rilevante caratteristica: si può costruire/download/modificare un Blob nel browser, creare un Blob URL e impostarla come href ad un collegamento file-download (che l'utente può fare clic destro e apri una nuova scheda/finestra !!)
Chiudere il violino o revocare lo Blob URL dal URL Store e lo Blob URL non è più accessibile (anche non in una scheda/finestra diversa).

Provate voi stessi con il violino modificato:https://jsfiddle.net/7cyoozwv/
In questo violino ora dovrebbe essere più possibile caricare la vostra immagine di esempio in una diversa scheda/finestra dopo aver copiato l'URL dell'immagine (una volta che l'immagine viene visualizzata in la tua pagina).
Qui ho revocato l'URL manualmente (revokeObjectURL()) poiché è attualmente il miglior metodo di cross-browser (parzialmente dovuto all'api non ancora completamente stabilizzato).
Nota: l'evento onload di un elemento può essere un luogo elegante per revocare il numero Blob URL.

---

Ecco quello che succede ad una sorgente <audio> o <video> legata ad un MediaSource Object utilizzando un MediaSource object URL restituito dal window.URL.createObjectURL(MediaSource):
Il Media Source Extensions (MSE)estendono anche s' window.URL.createObjectURL() il File-API di accettare una MediaSource Object. L'(attuale progetto di) URL Object Extension precisa che:

Questo algoritmo è destinato a riflettere il comportamento della createObjectURL() metodo [FILE-API] con autoRevoke impostato su vero.

^{Nota che l'attuale specifica di s' del File APIwindow.URL.createObjectURL()non è più ha un autoRevoke (o flag_oneTimeOnly) flag booleano accessibili al programmatore che dovrebbe essere utilizzato per questo scopo window.URL.createFor() invece. Mi chiedo quando la specifica Media-Source lo imiterà (e per compatibilità con la versione precedente alias il loro createObjectURL() a una nuova estensione createFor() (sembra più appropriato in quanto sembra essere destinato a funzionare al momento)).}

Questi derivanti revocati automaticamente URL-stringhe sono destinate solo per collegare la src di un HTMLMediaElement (si pensi <audo> & <video> elementi) per lo speciale MediaSource Object.
_{Non penso che uno Document vuoto (da una nuova scheda/finestra) sia un elemento <audo> o <video>.}

Forse "Un rapido tutorial su MSE" ^{(fonte: MSDN)} potrebbe contribuire a chiarire la differenza e l'uso di base:

Per utilizzare l'API MSE, attenersi alla seguente procedura:

1. Definire un elemento HTML5 video nella sezione HTML di una pagina.
2. Creare un oggetto MediaSource in JavaScript.
3. Creare un URL virtuale utilizzando createObjectURL con l'oggetto MediaSource come origine.
4. Assegnare l'URL virtuale alla proprietà src dell'elemento video.
5. Creare un SourceBuffer utilizzando addSourceBuffer, con il tipo di mime del video che si sta aggiungendo.
6. Ottieni il segmento di inizializzazione del video dal file multimediale online e aggiungilo allo SourceBuffer con appendBuffer.
7. Ottenere i segmenti di dati video dal file multimediale, aggiungerli allo SourceBuffer con appendBuffer.
8. Chiamare il metodo play sull'elemento video.
9. Ripetere il passaggio 7 fino al termine.
10. Pulire.

---

È (o un giocatore di big-time come YouTube che dinamicamente selezionare supportato le tecnologie per la riproduzione sulla piattaforma del cliente (quindi non c'è modo di sapere con certezza che tipo di URL del video di YouTube vi stiamo parlando)) potrebbe utilizzare il nuovo speciale MediaSource Object per riprodurre video (o audio).
Questo aggiunge opzioni di origine basate su buffer a video HTML5 per il supporto dello streaming (rispetto al download di un file video completo prima di riprodurre o utilizzare un componente aggiuntivo come Silverlight o Adobe Flash per lo streaming multimediale).

Spero che questo sia quello che cercavi!

Answer 2

In realtà, l'URL a cui si fa riferimento è solo un riferimento "string" allo BLOB (che viene creato utilizzando la funzione window.URL.createObjectURL); Quindi, puoi usarlo come un normale URL. E l'ambito è anche solo fino a quando il documento non viene scaricato.

Quindi, non penso sia possibile per voi aprire l'URL usando solo il browser. E inoltre ho provato a ricreare quello che stai dicendo, ma senza alcun risultato (nel mio sito web, creare un blob e inserire l'URL nel browser).

Di seguito si riporta il codice

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(); 

Il violino here

---

Aggiornamento:

Ok, dopo che ho guardato. sembra che YouTube stia utilizzando media-source per trasmettere il video in streaming.

Non ho aggiornato il violino (non riesco a trovare un video che possa essere utilizzato). Ma, in pratica, utilizza ancora la stessa funzione (createObjectURL) per creare l'URL BLOB. Ma, invece di usare la fonte (immagine, video, ecc.) Per passare alla funzione. È necessario passare l'oggetto MediaSource nella funzione.

E quindi, si utilizza l'URL BLOB e lo si passa nello video.src. Pertanto, quando si tenta di aprire il collegamento BLOB. Non dovresti essere in grado di vedere di nuovo il video.