Skip to content
Browse files

Video preloader.

  • Loading branch information...
1 parent 5fc7d9d commit 17886c2072e82aed0f12b70569c8a1980640705c @karbassi karbassi committed
Showing with 111 additions and 0 deletions.
  1. +111 −0 PxLoaderVideo.js
View
111 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;
+};

0 comments on commit 17886c2

Please sign in to comment.
Something went wrong with that request. Please try again.