在百家號(hào)上，發(fā)現(xiàn)視頻src如下所示：

src="blob:https://...

是可以播放和打開(kāi)，很神奇，我就去查了一下這塊。

那么問(wèn)題來(lái)了

• 什么是blob網(wǎng)址？
• 為什么使用它？
• 我可以在服務(wù)器上創(chuàng)建自己的Blob URL嗎？
• 如果你有任何額外的細(xì)節(jié)

Blob URL（參考W3C，官方名稱(chēng)）或Object-URL（參考MDN和方法名稱(chēng)）與Blob或File對(duì)象一起使用。

src =“blob：https：//crap.crap ”我打開(kāi)了視頻src中的blob url，它給出了一個(gè)錯(cuò)誤，我無(wú)法打開(kāi)，但與src標(biāo)簽一起工作，它有多可能？

Blob URL只能由瀏覽器在內(nèi)部生成。URL.createObjectURL()將創(chuàng)建一個(gè)特殊的Blob或File對(duì)象的引用，以后可以使用它來(lái)發(fā)布URL.revokeObjectURL()。這些URL只能在瀏覽器的單個(gè)實(shí)例中和同一個(gè)會(huì)話(huà)中（即頁(yè)面/文檔的生命周期）在本地使用。

什么是Blob網(wǎng)址？ 為什么使用它？

Blob URL / Object URL是一種偽協(xié)議，允許Blob和File對(duì)象用作圖像，下載二進(jìn)制數(shù)據(jù)鏈接等的URL源。

例如，不能處理Image對(duì)象的原始字節(jié)數(shù)據(jù)，因?yàn)樗恢廊绾翁幚硭?。它需要例如圖像（二進(jìn)制數(shù)據(jù)）通過(guò)URL加載。這適用于任何需要URL作為源的東西。不用上傳二進(jìn)制數(shù)據(jù)，而是通過(guò)URL提供回來(lái)，最好使用額外的本地步驟來(lái)直接訪問(wèn)數(shù)據(jù)而無(wú)需通過(guò)服務(wù)器。

對(duì)于編碼為Base-64的字符串的Data-URI也是更好的選擇。Data-URI的問(wèn)題是每個(gè)char在JavaScript中占用兩個(gè)字節(jié)。最重要的是，由于Base-64編碼增加了33％。Blob是純粹的二進(jìn)制字節(jié)數(shù)組，它不像Data-URI那樣具有任何重要的開(kāi)銷(xiāo)，這使得它們處理速度越來(lái)越快。

我可以在服務(wù)器上創(chuàng)建自己的Blob網(wǎng)址嗎？

否，Blob網(wǎng)址/對(duì)象網(wǎng)址只能在瀏覽器內(nèi)部制作?？梢酝ㄟ^(guò)文件讀取器API創(chuàng)建Blob并獲取File對(duì)象，盡管BLOB只是意味著B(niǎo)inary Large對(duì)象并以字節(jié)數(shù)組的形式存儲(chǔ)?？蛻?hù)端可以請(qǐng)求數(shù)據(jù)以ArrayBuffer或Blob的形式發(fā)送。服務(wù)器應(yīng)該將數(shù)據(jù)作為純二進(jìn)制數(shù)據(jù)發(fā)送。數(shù)據(jù)庫(kù)通常也使用Blob來(lái)描述二進(jìn)制對(duì)象，實(shí)際上我們基本上是在談?wù)撟止?jié)數(shù)組。

如果你有其他細(xì)節(jié)

需要將二進(jìn)制數(shù)據(jù)封裝為BLOB對(duì)象，然后使用它URL.createObjectURL()為其生成本地URL：

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
    url = URL.createObjectURL(blob),
    img = new Image();

img.onload = function() {
    URL.revokeObjectURL(this.src);     // clean-up memory
    document.body.appendChild(this);   // add image to DOM
}

img.src = url;                         // can now "stream" the bytes

請(qǐng)注意，URL可能會(huì)在webkit瀏覽器中添加前綴，因此請(qǐng)使用：

var url = (URL || webkitURL).createObjectURL(...);