HTML5 Video Preloader
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
js
videos
.gitignore
LICENSE.md
README.MD
index.html

README.MD

HTML5 Video Preloader

Created by: Rachel B arebe.us @roastbeest

Prototype Website: zebblerstudios.com/test/html5preloader

What's all this?

HTML5 Video Preloader is designed to:

  • pre-load a list of mp4 files, fully buffered, with fall-backs to webm
  • display videos once all of the playlist has loaded
  • minimal transport controls
  • supported by latest versions of Firefox, Chrome, Safari, and IE

How to use this module

Include the preloader.js file in your web application, along with references to its dependencies (included here in js/libs ).

Call the preloader by passing it a JSON object in the format:

var allVideos = {
    "options": {
      "controlsOn": "false",
      "playOn": "false",
      "volumeOn": "false",
      "muteOn": "false",
      "durationOn": "false",
      "seekOn": "false",
      "fullscOn": "false",
    },
    "videos": [
    {"title": "video 1",
    "h264": "videos/01-16s_h264.mp4",
    "webm": "videos/01-16s_h264.webm",
    "doubleplay": "true",
    "waitmessage": "The video will play again in 5 seconds."
    },
    {etc.},
    ]
}

Initialize the preloader with something like:

$(document).ready( preLoader(allVideos) );

License

Original code in this repo is licensed under MIT License. Its dependencies include Modernizr.js and jQuery (MIT license), and Video.js (Apache license).

HTML5 Video Preloader was produced for Zebbler Studios zebblerstudios.com