IndexedDB - 存儲和檢索視頻

Question

我正在試圖製作一個應用程序，用於存儲和從IndexedDB中檢索視頻文件。但是，我在使用Firefox進行檢索並在Chrome中進行存儲時遇到了問題。我會後的代碼：

(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); 
    }; 
})(); 

問題1（火狐）：在Firefox中，行的console.log（ '文件類型：' + vidFile.type）;在獲取視頻文件（mp4，ogv，webm）時顯示「application/xml」，因此Video標籤顯示「不支持視頻格式或MIME類型」。 但是，當我獲取像png這樣的圖像文件時，它顯示「image/png」，並且如果設置了img標籤的src，則效果很好。

問題2（Chrome）：在Chrome中，圖像和視頻都沒有存儲到IndexedDB中。在以下行上：

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

未捕獲的錯誤：DataCloneError：DOM引發了IDBDatabase異常25。

我是IndexedDB的新手，對如何解決這個問題毫無頭緒。我需要做的只是將視頻文件存儲到indexedDB中，然後檢索並顯示在Video標籤中。

的HTML如下： （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> 

也試過沒有 「編解碼器」 屬性。什麼都沒有我一直被困在一起的這一天... ...通過谷歌找不到任何工作示例。有人會幫助我。

Answer 1

好的，我會試着總結一下它從評論中得出的結論。

1.火狐

看來，原來，該Blob對象從AJAX請求獲得具有內容類型application/xml的，因爲這是你在從服務器獲得響應。這可能是錯誤配置的問題。

如果您有權訪問HTTP服務器的配置，可能會很容易解決。如果是Apache，你可以簡單的添加下面這行：

AddType video/ogg .ogv 

保存，重啓Apache，你應該沒問題。如果你不能改變服務器的配置，你就必須改變以匹配所需的一個Blob的內容類型：

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

注意，因爲你正在做的，這可能是昂貴的內存（可能）大文件的副本，但xhr.response應在幾個步驟後發送到垃圾。

2.鍍鉻

看來，Chrome仍然會doesn't support Blob and File storing。

似乎他們已經解決了問題，但尚未部署該修復程序。我想知道他們在等待什麼：[

UPDATE：截至2014年7月1日，Chrome dev supports storing blobs進入IndexedDB。預計很快就會在穩定的頻道上登陸。