關于html5blob的信息
html5下講一個很大的二進制文件怎么傳入blob的第一個參數(shù)
很簡單。 var files=document.getElementsByName('picfile').files, fs=files.length, s=0;if(fs 10 ){ alert("上傳的文件數(shù)量超過10個了！請重新選擇！"); }else{ for(var i=0;i 1024*1024){ alert('"'+files[i].name + "這個文件大于1M
專注于為中小企業(yè)提供成都網站制作、成都做網站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)洮北免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。
html5 本地存儲有多少種方案
html5 本地存儲有五種方案。
1、LocalStorage
LocalStorage就是Key-Value的簡單鍵值對存儲結構，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，一般情況下localStorage較為常用，示例代碼如下：
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
2、Cookie
這種存儲方式存儲內容很有限，只適合做簡單信息存儲，存取接口設計得極其反人類，舉例如下：
function getCookieValue(name) {
if (document.cookie.length 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
3、Indexed Database API
IndexedDB可以存儲結構對象，可構建key和index的索引方式查找，目前各瀏覽器的已經逐漸支持IndexedDB的存儲方式，其使用代碼如下，需注意IndexedDB的很多操作接口類似NodeJS的異步回調方式，特別是查詢時連cursor的continue都是異步再次回調onsuccess函數(shù)的操作方式，因此和NodeJS一樣使用上不如同步的代碼容易。
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
4、FileSystem API
FileSystem API相當于操作本地文件的存儲方式，目前支持瀏覽器不多，其接口標準也在發(fā)展制定變化中，因此也可以動態(tài)生成圖片到本地文件，然后通過 filesystem:http:*** 的URL方式直接賦值給img的html元素的src訪問。
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
5、Application Cache
window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當前狀態(tài)：
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
初識 HTML5 Video Blob
為何會有一個 blob？直接點擊這個鏈接，返回了 404！什么情況？于是對此做了一番探索。
The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here .
首先創(chuàng)建變量名為 video 的 DOM 對象和變量名為 mediaSource 的 MediaSource 對象。通過函數(shù) createObjectURL 來將 DOM::video 對象的屬性 src 和 mediaSource 進行“連接”。接下來，通過注冊事件 Event::sourceopen 來觸發(fā)當上述“連接”結束之后的回調處理。回調處理就是需要賦值 視頻數(shù)據(jù) 的地方。 調用 MediaSource::addSourceBuffer 方法來構建一個存放視頻數(shù)據(jù)的 sourceBuffer。 在往 sourceBuffer 中存放數(shù)據(jù)結束之后會觸發(fā)事件 Event::updateend 。通過注冊這個事件的回調，可以知曉數(shù)據(jù)已經加載完畢，然后關閉數(shù)據(jù)流，調用 Video::play 函數(shù)通知瀏覽器播放視頻。至此，整個 Blob 運行機制講解完畢。
W3C 上有明確關于 MediaSource 擴展接口的文檔。擴展文檔中是這么定義的， 它允許 JS 腳本動態(tài)構建媒體流和允許 JS 傳送媒體塊到 H5 媒體元素。這種接口的應用可以讓 H5 播放器實現(xiàn)持續(xù)添加數(shù)據(jù)進行播放。
綜上，這個只是 HTML5 提供的新特性，但是截止目前還是處于試驗狀態(tài)。
在上面示例中使用的視頻格式不是普通的 MP4 而是 FMP4 。如果沒有注意到這個問題，就可能造成：
HTML5 MediaSource works with some mp4 files and not with others (same codecs)。
解決方案：
It works fine if mp4 is fragmented.
You can do that using Bento4's mp4fragment tool.
如何解析HTml5-video標簽已blob:開頭的地址？
這個暫時解釋不了。你知道blob是怎么生成出來的就知道為什么我會這么說了。
有人拿到b站的地址也是在中間生成blob的過程里，而不是生成blob后，去反向算出來。
這個真實地址都是在js里面。
分享文章：關于html5blob的信息
URL鏈接：http://chinadenli.net/article20/dsehijo.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、手機網站建設、網站維護、App設計、建站公司、品牌網站建設
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
