Skip to content

Loading…

Video preloader #9

Merged
merged 1 commit into from

4 participants

@karbassi

No description provided.

@joelfillmore
Pixel Lab member

Ali - Sorry about the delay in merging, thanks for your contribution!

@joelfillmore joelfillmore merged commit f13f093 into thinkpixellab:master
@marcelinhov2

You guys are merged a Pull Request an year ago and still dont have any example?

Do you have any idea to makes some example for your users?

Thanks anyway!!!

@peschee

Does the video preloading work? Since a html5 video has multiple sources (mp4, ogg, webm) and the addVideo function only takes one url parameter, how should we use this? Any feedback would be appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 17, 2012
  1. @karbassi

    Video preloader.

    karbassi committed
This page is out of date. Refresh to see the latest.
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;
+};
Something went wrong with that request. Please try again.