javascript - IndexedDB - Storing and Retrieving Videos -

i'm trying make application stores , retrieves video files , indexeddb. however, having issues while retrieving in firefox , while storing in chrome. i'll post code:

(function () {     // indexeddb     var indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb || window.oindexeddb || window.msindexeddb,         idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.oidbtransaction || window.msidbtransaction,         dbversion = 1.0;      // create/open database     var request = indexeddb.open("videofiles", dbversion);         var db;         var createobjectstore = function (database) {             // create objectstore             console.log("creating objectstore")             database.createobjectstore("earth");         },          getvideofile = function () {             // create xhr             var xhr = new xmlhttprequest(),                 blob;              xhr.open("get", "day_the_earth_stood_still.ogv", true);             // set responsetype blob             xhr.responsetype = "blob";              xhr.addeventlistener("load", function () {                 if (xhr.status === 200) {                     console.log("video retrieved");                      // blob response                     blob = xhr.response;                     console.log("blob:" + blob);                      // put received blob indexeddb                     putearthindb(blob);                 }             }, false);             // send xhr             xhr.send();         },          putearthindb = function (blob) {             console.log("putting earth in indexeddb");              // open transaction database             var transaction = db.transaction(["earth"], "readwrite");              // put blob dabase             var put = transaction.objectstore("earth").put(blob, "video");                 // retrieve file stored             transaction.objectstore("earth").get("video").onsuccess = function (event) {                 var vidfile = event.target.result;                 console.log("got earth!" + vidfile);                 console.log('file type: ' + vidfile.type); /// shows : application/xml                  // window.url object                 var url = window.url || window.webkiturl;                  // create , revoke objecturl                 var vidurl = url.createobjecturl(vidfile);                  // set vid src objecturl                  var videarth = document.getelementbyid("earth");                 videarth.setattribute("src", vidurl);                     // revoking objecturl                 url.revokeobjecturl(vidurl);             };         };      request.onerror = function (event) {         console.log("error creating/accessing indexeddb database");     };      request.onsuccess = function (event) {         console.log("success creating/accessing indexeddb database");         db = request.result;          db.onerror = function (event) {             console.log("error creating/accessing indexeddb database");         };          // interim solution google chrome create objectstore. deprecated         if (db.setversion) {             if (db.version != dbversion) {                 var setversion = db.setversion(dbversion);                 setversion.onsuccess = function () {                     createobjectstore(db);                     getvideofile();                 };             }             else {                 getvideofile();             }         }         else {             getvideofile();         }     }      // future use. in latest firefox versions     request.onupgradeneeded = function (event) {         createobjectstore(event.target.result);     }; })(); 

problem 1(firefox): in firefox, line console.log('file type: ' + vidfile.type); above shows "application/xml" while getting video file (mp4, ogv, webm) , video tag says "video format or mime type not supported". when image file png shows "image/png" , works if src of img tag set.

problem 2(chrome): in chrome, both image , video not getting stored indexeddb. @ following line:

var put = transaction.objectstore("earth").put(blob, "video"); 

uncaught error: datacloneerror: dom idbdatabase exception 25 thrown.

i new indexeddb , have no clue on how solve this. need store video files indexeddb, retrieve , show in video tag.

the html shown below: (mp4):

 <div class="myviddiv">     <video  id="earth" type="video/mp4" codecs="avc1.42e01e, mp4a.40.2" controls>  </video>  </div> 

(ogv):

 <div class="myviddiv">     <video  id="earth" type="video/ogg" codecs="theora, vorbis" controls></video>  </div> 

also tried without "codecs" attribute. nothing works. i've been stuck dayss together... couldn't find working example via google well. kindly me this.

ok, i'll try sum came out comments.

1. firefox

it seems that, originally, blob object ajax request has content type application/xml, because that's in response server. can problem of misconfiguration.

if have access http server's configuration, may solved quite easily. if it's apache, can add line:

addtype video/ogg .ogv 

save, restart apache , should ok. if can't change server's configuration, you'll have change blob's content type in order match desired one:

blob = xhr.response.slice(0, xhr.response.size, "video/ogg"); 

note memory expensive because you're making copy of (probably) large file, xhr.response should sent garbage after couple of steps.

2. chrome

it seems chrome still doesn't support blob , file storing.

it seems they've fixed problem, haven't deployed fix yet. wonder they're waiting :[

update: of july 1st, 2014, chrome dev supports storing blobs indexeddb. it's expected land on stable channel.