Force Downloading Videos On Page Load - jQuery Blobber

Blobber is a lightweight and useful jQuery plugin that forces the browser to load and download the HTML5 videos via XMLHttpRequest for optimizing the video playback experience.

The plugin makes object URL for videos on each page. The URL lifetime is tied to the document in the window on which it was created.

How to use it:

1. Add jQuery JavaScript library together with the blobber.css and blobber.js to the web page.

<link rel="stylesheet" href="blobber.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="blobber.js"></script>

2. Add your HTML5 videos into a container like so.

<div id="video-container">
  <video id="video-1" muted controls src="1.mp4" class="active"></video>
  <video id="video-2" muted controls src="2.mp4"></video>
  <video id="video-3" muted controls src="3.mp4"></video>
  <video id="video-4" muted controls src="4.mp4"></video>
</div>

3. Call the function blobber() on the top container and done.

$("#video-container").blobber();

4. Customize the preloader and progressbar while loading/downloading videos.

$("#video-container").blobber({
  preloader               :   true,
  preloaderBackground     :   "#FFFFFF",
  progressBar             :   true,
  progressBarColor        :   "#000000",
  progressSpinner         :   true,
  progressSpinnerColor    :   "#000000",
  progressStatus          :   true,
  progressStatusColor     :   "#999999",
  preloaderAnimation      :   null
});

5. The plugin also provides a callback which will be triggered when the videos are completely loaded.

$("#video-container").blobber({
  complete:: function(){
    // do something
  }
});

---

This awesome jQuery plugin is developed by MehryarS. For more Advanced Usages, please check the demo page or visit the official website.