title: Store videos in IndexDB to play offline
body: <p>I have a functioning streaming application that uses an ajax call to determine a set of video files that play on a loop. I am trying to store these files in indexDB for a chrome application. I am successful in making the call to the database, but I believe my code fizzles from there as as soon as the browser loses internet connection the content freezes.</p>
  
  <pre><code>$(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("&lt;div id='div1' class='video'&gt;&lt;video id='video1' class='vidarray' preload='none' poster='bkg.png'&gt;&lt;source src='"+ filename +"' type='video/mp4'&gt;&lt;/video&gt;&lt;/div&gt;");
  
           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();
  }
  
  
    }
  
  });
  
  
  
  
  
  });
  </code></pre>