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。预计很快就会在稳定的频道上登陆。