Video preloader.

PxLoaderVideo.js

@@ -0,0 +1,111 @@
+// @depends PxLoader.js
+
+/**
+ * PxLoader plugin to load video elements
+ */
+function PxLoaderVideo(url, tags, priority) {
+    var self = this;
+    var loader = null;
+
+    try {
+        this.vid = new Video();
+    } catch(e) {
+        this.vid = document.createElement('video');
+    }
+
+    this.tags = tags;
+    this.priority = priority;
+
+    var onReadyStateChange = function () {
+        if (self.vid.readyState != 4) {
+            return;
+        }
+
+        removeEventHandlers();
+        loader.onLoad(self);
+    };
+
+    var onLoad = function() {
+        removeEventHandlers();
+        loader.onLoad(self);
+    };
+
+    var onError = function() {
+        removeEventHandlers();
+        loader.onError(self);
+    };
+
+    var removeEventHandlers = function() {
+        self.unbind('load', onLoad);
+        self.unbind('canplaythrough', onReadyStateChange);
+        self.unbind('error', onError);
+    };
+
+    this.start = function(pxLoader) {
+        // we need the loader ref so we can notify upon completion
+        loader = pxLoader;
+
+        // NOTE: Must add event listeners before the src is set. We
+        // also need to use the readystatechange because sometimes
+        // load doesn't fire when an video is in the cache.
+        self.bind('load', onLoad);
+        self.bind('canplaythrough', onReadyStateChange);
+        self.bind('error', onError);
+
+        self.vid.src = url;
+    };
+
+    // called by PxLoader to check status of video (fallback in case
+    // the event listeners are not triggered).
+    this.checkStatus = function() {
+        if (self.vid.readyState != 4) {
+            return;
+        }
+
+        removeEventHandlers();
+        loader.onLoad(self);
+    };
+
+    // called by PxLoader when it is no longer waiting
+    this.onTimeout = function() {
+        removeEventHandlers();
+        if (self.vid.readyState != 4) {
+            loader.onLoad(self);
+        } else {
+            loader.onTimeout(self);
+        }
+    };
+
+    // returns a name for the resource that can be used in logging
+    this.getName = function() {
+        return url;
+    };
+
+   // cross-browser event binding
+    this.bind = function(eventName, eventHandler) {
+        if (self.vid.addEventListener) {
+            self.vid.addEventListener(eventName, eventHandler, false);
+        } else if (self.vid.attachEvent) {
+            self.vid.attachEvent('on'+eventName, eventHandler);
+        }
+    };
+
+   // cross-browser event un-binding
+    this.unbind = function(eventName, eventHandler) {
+        if (self.vid.removeEventListener) {
+            self.vid.removeEventListener(eventName, eventHandler, false);
+        } else if (self.vid.detachEvent) {
+            self.vid.detachEvent('on'+eventName, eventHandler);
+        }
+    };
+
+}
+
+// add a convenience method to PxLoader for adding an image
+PxLoader.prototype.addVideo = function(url, tags, priority) {
+    var videoLoader = new PxLoaderVideo(url, tags, priority);
+    this.add(videoLoader);
+
+    // return the vid element to the caller
+    return videoLoader.vid;
+};