title: IndexedDB - Storing and Retrieving Videos
body: <p>I'm trying to make an application that stores and retrieves Video files to and from IndexedDB. However, I am having issues while retrieving in Firefox and while storing in Chrome. I'll post the code:</p>
  
  <pre><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 an 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 the responseType to blob
              xhr.responseType = "blob";
  
              xhr.addEventListener("load", function () {
                  if (xhr.status === 200) {
                      console.log("Video retrieved");
  
                      // Blob as response
                      blob = xhr.response;
                      console.log("Blob:" + blob);
  
                      // Put the received blob into IndexedDB
                      putEarthInDb(blob);
                  }
              }, false);
              // Send XHR
              xhr.send();
          },
  
          putEarthInDb = function (blob) {
              console.log("Putting earth in IndexedDB");
  
              // Open a transaction to the database
              var transaction = db.transaction(["earth"], "readwrite");
  
              // Put the blob into the dabase
              var put = transaction.objectStore("earth").put(blob, "video");
  
  
  
  
              // Retrieve the file that was just 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); /// THIS SHOWS : application/xml
  
                  // Get window.URL object
                  var URL = window.URL || window.webkitURL;
  
                  // Create and revoke ObjectURL
                  var vidURL = URL.createObjectURL(vidFile);
  
                  // Set vid src to 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 for Google Chrome to create an objectStore. Will be deprecated
          if (db.setVersion) {
              if (db.version != dbVersion) {
                  var setVersion = db.setVersion(dbVersion);
                  setVersion.onsuccess = function () {
                      createObjectStore(db);
                      getVideoFile();
                  };
              }
              else {
                  getVideoFile();
              }
          }
          else {
              getVideoFile();
          }
      }
  
      // For future use. Currently only in latest Firefox versions
      request.onupgradeneeded = function (event) {
          createObjectStore(event.target.result);
      };
  })();
  </code></pre>
  
  <p>Problem 1(Firefox): In Firefox, the line console.log('File Type: ' + vidFile.type); above shows "application/xml" while GETTING a video file (mp4, ogv, webm) and so the Video tag says "video format or mime type is not supported". 
  However when I GET an image file like png it shows "image/png" and works well if the src of an img tag is set.</p>
  
  <p>Problem 2(Chrome): In Chrome, both image and video are not even getting stored into the IndexedDB. At the following line:</p>
  
  <pre><code>var put = transaction.objectStore("earth").put(blob, "video");
  </code></pre>
  
  <p>Uncaught Error: DataCloneError: DOM IDBDatabase Exception 25  is thrown. </p>
  
  <p>I am new to IndexedDB and have no clue on how to solve this. All I need to do is store video files into indexedDB, retrieve it and show in Video tag.</p>
  
  <p>The HTML is shown below:
  (mp4):</p>
  
  <pre><code> &lt;div class="myVidDiv"&gt;
      &lt;video  id="earth" type="video/mp4" codecs="avc1.42e01e, mp4a.40.2" controls&gt;  &lt;/video&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>(ogv):</p>
  
  <pre><code> &lt;div class="myVidDiv"&gt;
      &lt;video  id="earth" type="video/ogg" codecs="theora, vorbis" controls&gt;&lt;/video&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Also tried without "codecs" attribute. Nothing works. I've been stuck with this for dayss together... Couldn't find any working example via google as well. Someone kindly help me with this.</p>