我有很多问题与blob URL。
我在YouTube上搜索一个视频标签的src，我发现视频src是这样的:
src="blob:https://video_url"
我打开视频src中的blob URL，它给出了一个错误。我无法打开链接，但它与src标签一起工作。这怎么可能呢?
要求:
什么是blob URL? 为什么使用它? 我可以在服务器上创建自己的blob URL吗? 如果你有其他细节
当前回答
我已经修改了工作解决方案来处理这两种情况。当视频上传，当图像上传..希望能有所帮助。
HTML
<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>
Javascript
var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {
var file = e.target.files[0]; // selected file
if (!file) {
console.log("nothing here");
return;
}
console.log(file);
console.log('file.size-' + file.size);
console.log('file.type-' + file.type);
console.log('file.acutalName-' + file.name);
let start = performance.now();
var mime = file.type, // store mime for later
rd = new FileReader(); // create a FileReader
if (/video/.test(mime)) {
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {
type: mime
}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
//console.log(blob);
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
console.log('video.duration-' + video.duration);
console.log('video.videoHeight-' + video.videoHeight);
console.log('video.videoWidth-' + video.videoWidth);
//document.querySelector("div")
// .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
(URL || webkitURL).revokeObjectURL(url); // clean up
console.log(start - performance.now());
// ... continue from here ...
});
video.src = url; // start video load
};
} else if (/image/.test(mime)) {
rd.onload = function(e) {
var blob = new Blob([e.target.result], {
type: mime
}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
console.log('iamge');
console.dir('this.height-' + this.height);
console.dir('this.width-' + this.width);
URL.revokeObjectURL(this.src); // clean-up memory
console.log(start - performance.now()); // add image to DOM
}
img.src = url;
};
}
var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
rd.readAsArrayBuffer(chunk); // read file object
};
jsFiddle Url
https://jsfiddle.net/PratapDessai/0sp3b159/
其他回答
这个Javascript函数支持显示Blob File API和Data API之间的区别，以便在客户端浏览器中下载JSON文件:
/** * Save a text as file using HTML <a> temporary element and Blob * @author Loreto Parisi */ var saveAsFile = function(fileName, fileContents) { if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'}); var downloadLink = document.createElement("a"); downloadLink.download = fileName; if (window.webkitURL != null) { downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = document.body.removeChild(event.target); downloadLink.style.display = "none"; document.body.appendChild(downloadLink); } downloadLink.click(); } else { // Alternative 2: using Data var pp = document.createElement('a'); pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents)); pp.setAttribute('download', fileName); pp.onclick = document.body.removeChild(event.target); pp.click(); } } // saveAsFile /* Example */ var jsonObject = {"name": "John", "age": 30, "car": null}; saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));
该函数的调用方式与saveAsFile('out. exe)类似。json, jsonString);。它将创建一个ByteStream，浏览器将立即识别该ByteStream，浏览器将直接使用file API URL.createObjectURL下载生成的文件。
在else中，可以看到通过href元素加上Data API获得的相同结果，但这有一些Blob API没有的限制。
Blob url(参考W3C，官方名称)或object - url(参考MDN和方法名称)与Blob或File对象一起使用。
src = "团:https://crap。我打开了src中的blob url 视频给出了一个错误，我无法打开，但正在使用SRC 标签怎么可能?
Blob url只能由浏览器内部生成。URL.createObjectURL()将创建对Blob或File对象的特殊引用，稍后可以使用URL.revokeObjectURL()释放该引用。这些url只能在浏览器的单个实例和同一会话中本地使用。页面/文档的生命周期)。
什么是blob url? 为什么使用它?
Blob URL/Object URL是一个伪协议，允许Blob和File对象用作图像、二进制数据下载链接等内容的URL源。
例如，您不能将原始字节数据交给Image对象，因为它不知道如何处理它。例如，它要求通过url加载图像(二进制数据)。这适用于任何需要URL作为源的内容。与其上传二进制数据，然后通过URL返回，不如使用额外的本地步骤来直接访问数据，而不需要通过服务器。
它也是Data-URI的一个更好的选择，Data-URI是用Base-64编码的字符串。Data-URI的问题是每个字符在JavaScript中占用两个字节。在此基础上，由于Base-64编码，增加了33%。blob是纯二进制字节数组，不像Data-URI那样有任何显著的开销，这使得它们处理起来更快、更小。
我可以在服务器上做我自己的blob url吗?
不，Blob url /Object url只能在浏览器内部创建。您可以通过文件读取器API创建BLOB并获取文件对象，尽管BLOB只是表示二进制大对象并存储为字节数组。客户端可以请求数据以ArrayBuffer或Blob的形式发送。服务器应该将数据作为纯二进制数据发送。数据库也经常使用Blob来描述二进制对象，本质上我们基本上谈论的是字节数组。
如果你有那么额外的细节
你需要将二进制数据封装为一个BLOB对象，然后使用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
blob url的另一个用例是从服务器加载资源，应用hack，然后告诉浏览器解释它们。
一个这样的例子就是加载模板文件甚至scss文件。
下面是scss的例子:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.sync.min.js"></script>
function loadCSS(text) {
const head = document.getElementsByTagName('head')[0]
const style = document.createElement('link')
const css = new Blob([text], {type: 'text/css'})
style.href = window.URL.createObjectURL(css)
style.type = 'text/css'
style.rel = 'stylesheet'
head.append(style)
}
fetch('/style.scss').then(res => res.text()).then(sass => {
Sass.compile(sass, ({text}) => loadCSS(text))
})
现在，您可以将Sass.compile替换为任何类型的转换函数。
Blob url以这种方式保持你的DOM结构干净。
我相信现在你已经有了答案，所以这只是你可以用它做的另一件事。
我已经修改了工作解决方案来处理这两种情况。当视频上传，当图像上传..希望能有所帮助。
HTML
<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>
Javascript
var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {
var file = e.target.files[0]; // selected file
if (!file) {
console.log("nothing here");
return;
}
console.log(file);
console.log('file.size-' + file.size);
console.log('file.type-' + file.type);
console.log('file.acutalName-' + file.name);
let start = performance.now();
var mime = file.type, // store mime for later
rd = new FileReader(); // create a FileReader
if (/video/.test(mime)) {
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {
type: mime
}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
//console.log(blob);
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
console.log('video.duration-' + video.duration);
console.log('video.videoHeight-' + video.videoHeight);
console.log('video.videoWidth-' + video.videoWidth);
//document.querySelector("div")
// .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
(URL || webkitURL).revokeObjectURL(url); // clean up
console.log(start - performance.now());
// ... continue from here ...
});
video.src = url; // start video load
};
} else if (/image/.test(mime)) {
rd.onload = function(e) {
var blob = new Blob([e.target.result], {
type: mime
}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
console.log('iamge');
console.dir('this.height-' + this.height);
console.dir('this.width-' + this.width);
URL.revokeObjectURL(this.src); // clean-up memory
console.log(start - performance.now()); // add image to DOM
}
img.src = url;
};
}
var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
rd.readAsArrayBuffer(chunk); // read file object
};
jsFiddle Url
https://jsfiddle.net/PratapDessai/0sp3b159/
blob url用于显示用户上传的文件，但它们还有许多其他用途，比如它可以用于安全文件显示，就像不下载扩展名就很难将YouTube视频作为视频文件一样。但是，它们可能是更多的答案。我的研究主要是我使用Inspect试图获得一个YouTube视频和一篇在线文章。
