将视频存储在IndexDB中以脱机播放

Question

我有一个正常运行的流应用程序，它使用ajax调用来确定在循环中播放的一组视频文件。我试图将这些文件存储在indexDB中以用于chrome应用程序。我成功地调用了数据库，但我相信我的代码会从那里消失，因为一旦浏览器失去了互联网连接，内容就会冻结。

$(document).ready(function(){

var dir = "http://www.rightmediasolutions.com/networks/gsplayer/";
var fileextension = ".mp4";
var srcfiles = $.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
   url: dir,
success: function (data) {
  //List all .mp4 file names in the page
    $(data).find("a:contains(" + fileextension + ")").each(function () 
       {
         var filename = $(this).attr("href").replace(window.location.host, "").replace("http://", "");

         $("#container").append("<div id='div1' class='video'><video id='video1' class='vidarray' preload='none' poster='bkg.png'><source src='"+ filename +"' type='video/mp4'></video></div>");

         window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB || window.OIndexedDB ||
window.msIndexedDB;

var IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.OIDBTransaction ||
window.msIDBTransaction;

var dbVersion = 1.0;
var indexedDB = window.indexedDB;

// Create/open database
var request = indexedDB.open("VideoFiles", dbVersion),
db,
createObjectStore = function (dataBase) {
dataBase.createObjectStore("Videos");
},

getVideoFile = function () {
var xhr = new XMLHttpRequest(),
blob;


// Get the Video file from the server.
xhr.open("GET", filename, true);
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
blob = xhr.response;
putVideoInDb(blob);

}
}, false);
xhr.send();
},

putVideoInDb = function (blob) {
var transaction = db.transaction(["Videos"], "readwrite");
var put = transaction.objectStore("Videos").put(blob, "savedvideo");
};

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

getVideoFile();

};

});

var videos = $('.video');
 //handle ending of video
videos.find('video').on('ended', function(){
playNextVideo(videos);
  });

  // start with the first one
  playNextVideo(videos);


function playNextVideo(videoList){
  var activeVideo = videoList.filter('.active').removeClass('active'), // 
identify active video and remove active class
  activeIndex = videoList.index(activeVideo), // get the active video index 
in the group
  nextVideo = videoList.eq(activeIndex+1), // get the next video in line
  actualVideo;

  // if there is no next video start from first
  if (nextVideo.length == 0) nextVideo = videoList.first(); 

  // pause all videos
  videoList.find('video').each(function(){this.pause();}) 

  // get reference to next video element
  actualVideo = nextVideo.find('video').get(0);

  // add active class to next video
  nextVideo.addClass('active');

  // load and play
 actualVideo.volume = 0.04;
 actualVideo.load();
 actualVideo.play();
}


  }

});





});