From 373097d2ba835b60abfa962ea5f157193a77dab4 Mon Sep 17 00:00:00 2001
From: unknown <scott.downe@gmail.com>
Date: Wed, 4 Dec 2013 00:23:08 -0500
Subject: [PATCH] Fix Bug 890250 - Get ie8 shim working on most recent popcorn.

---
 ie8/popcorn.ie8.html                          |  50 ++--
 ie8/popcorn.ie8.js                            | 132 ++++++++-
 popcorn.js                                    |  26 +-
 wrappers/common/popcorn._MediaElementProto.js | 266 ++++++++++--------
 .../popcorn.HTMLJWPlayerVideoElement.js       |  21 +-
 wrappers/null/popcorn.HTMLNullVideoElement.js |  21 +-
 .../popcorn.HTMLSoundCloudAudioElement.js     |  20 +-
 .../vimeo/popcorn.HTMLVimeoVideoElement.js    |  21 +-
 .../popcorn.HTMLYouTubeVideoElement.js        |  26 +-
 9 files changed, 374 insertions(+), 209 deletions(-)

diff --git a/ie8/popcorn.ie8.html b/ie8/popcorn.ie8.html
index ec6b1d92d..e29bb9ea8 100644
--- a/ie8/popcorn.ie8.html
+++ b/ie8/popcorn.ie8.html
@@ -4,17 +4,15 @@
     <title>Popcorn Youtube Player Example</title>
       <script src="popcorn.ie8.js"></script>
       <script src="../popcorn.js"></script>
-      <script src="../modules/player/popcorn.player.js"></script>
-      <script src="../players/youtube/popcorn.youtube.js"></script>
+      <script src="../wrappers/common/popcorn._mediaElementProto.js"></script>
+      <script src="../wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js"></script>
       <script src="../plugins/footnote/popcorn.footnote.js"></script>
       <script src="../plugins/flickr/popcorn.flickr.js"></script>
-      <script src="../plugins/attribution/popcorn.attribution.js"></script>
       <script src="../plugins/webpage/popcorn.webpage.js"></script>
       <script src="../plugins/googlefeed/popcorn.googlefeed.js"></script>
-      <script src="../plugins/image/popcorn.image.js"></script>
       <script src="../plugins/subtitle/popcorn.subtitle.js"></script>
       <script>
-        var attachEvent = function( element, event, callBack ) {
+        var addEventListenerHelper = function( element, event, callBack ) {
 
           if ( element.addEventListener ) {
 
@@ -34,7 +32,7 @@
 
         var done = false;
 
-        attachEvent( document, "DOMContentLoaded", function( e ) {
+        addEventListenerHelper( document, "DOMContentLoaded", function( e ) {
 
           if ( done ) {
 
@@ -44,9 +42,11 @@
           done = true;
 
           var paused = true,
+              media = new Popcorn.HTMLJWPlayerVideoElement( "#video" ),
               popcorn;
 
-          popcorn = Popcorn.youtube( "#video", "http://www.youtube.com/watch?v=nfGV32RNkhw&autoplay=0" );
+          media.src = "http://media.w3.org/2010/05/sintel/trailer.mp4?controls=1";
+          popcorn = Popcorn( media );
 
           popcorn = popcorn
             .footnote({
@@ -62,16 +62,6 @@
               numberofimages: "8",
               target: "flickrdiv"
             })
-            .attribution({
-              start: 5, // seconds
-              end: 60, // seconds
-              nameofwork: "Internet",
-              nameofworkurl: "http://www.archive.org/details/CC1232_internet",
-              copyrightholder: "The Computer Chronicles",
-              license: "CC-BY-NC-ND",
-              licenseurl: "http://creativecommons.org/licenses/by-nc-nd/2.0/",
-              target: "attribdiv"
-            })
             .subtitle({
               start: 5, // seconds
               end: 15, // seconds
@@ -94,13 +84,6 @@
                 title: "Planet Feed",
                 orientation: "Vertical"
             })*/
-            .image({
-              start: 5, // seconds
-              end: 15, // seconds
-              href: "http://www.drumbeat.org/",
-              src: "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
-              target: "imagediv"
-            })
           .listen( "durationchange", function() {
             element( "player-duration" ).innerHTML = popcorn.duration();
           })
@@ -125,7 +108,7 @@
 
           // Single play/pause button
 
-          attachEvent( element( "btn-play-pause" ), "click", function() {
+          addEventListenerHelper( element( "btn-play-pause" ), "click", function() {
 
             if ( paused ) {
               popcorn.play();
@@ -135,18 +118,18 @@
           }, false);
 
           // Seek
-          attachEvent( element( "btn-seek" ), "click", function() {
+          addEventListenerHelper( element( "btn-seek" ), "click", function() {
 
             popcorn.currentTime( 30 );
           }, false);
 
           // Volume
-          attachEvent( element( "btn-volume" ), "click", function() {
+          addEventListenerHelper( element( "btn-volume" ), "click", function() {
             var volume = ( popcorn.volume() === 1 ) ? 0.5 : 1;
             popcorn.volume( volume );
           }, false);
 
-          attachEvent( element( "btn-mute" ), "click", function() {
+          addEventListenerHelper( element( "btn-mute" ), "click", function() {
             popcorn.mute( !popcorn.media.muted );
           }, false );
         }, false );
@@ -155,7 +138,12 @@
   <body>
     <div>
       <div>
-        <div id="video" style="width: 360px; height: 300px;" ></div><br />
+        <!-- Base containing element needs some dimensions and somewhere down the line a parent element
+             is relatively positioned -->
+        <div id="video-container" style="width: 360px; height: 300px; position: relative;">
+          <!-- z-index of video target has to be lower than what's provided for plugins (1000)-->
+          <div id="video" style="width: 360px; height: 300px; z-index: 5;" ></div>
+        </div>
         <button class="simple" id="btn-play-pause">Play</button>
         <button class="seek" id="btn-seek">Seek to 30</button>
         <button class="volume" id="btn-volume">Toggle Volume</button>
@@ -185,7 +173,6 @@ <h4>Expected Events</h4>
         <ul>
           <li>From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.</li>
           <li>From 20 to 40 seconds, the a flickr stream of 8 images  tagged 'georgia' will appear below 'Flickr Area'.</li>
-          <li>From 5 to 60 seconds, the Creative Commons license will appear below 'Attributions Area'.</li>
           <li>From 5 to 15 seconds, the Mozilla Drumbeat logo will appear below 'Image Area'.</li>
           <li>From 5 to 15 seconds, the subtitle 'This is overlaid on top of the video. You can hightlight it!' will appear in front of the video.</li>
           <li>From 0 to 20 seconds, blogs from 'http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml' will appear below 'Google Feed Area'.</li>
@@ -195,9 +182,6 @@ <h4>Expected Events</h4>
       <div id="footnotediv" width="50%" height="50%">
         <strong>Footnote Area</strong><br />
       </div>
-      <div id="attribdiv" width="50%" height="50%">
-        <strong>Attributions Area</strong><br />
-      </div>
       <div id="flickrdiv" width="50%" height="50%">
         <strong>Flickr Area</strong><br />
       </div>
diff --git a/ie8/popcorn.ie8.js b/ie8/popcorn.ie8.js
index cbaa07f7f..2f2a50d3c 100644
--- a/ie8/popcorn.ie8.js
+++ b/ie8/popcorn.ie8.js
@@ -14,18 +14,41 @@
     document.detachEvent( event, callBack );
   };
 
+  window.addEventListener = window.addEventListener || function( event, callBack ) {
+
+    event = "on" + event;
+
+    window.attachEvent( event, callBack );
+  };
+
+  window.removeEventListener = window.removeEventListener || function( event, callBack ) {
+
+    event = "on" + event;
+
+    window.detachEvent( event, callBack );
+  };
+
   HTMLScriptElement.prototype.addEventListener = HTMLScriptElement.prototype.addEventListener || function( event, callBack ) {
 
     event = ( event === "load" ) ? "onreadystatechange" : "on" + event;
 
-    this.attachEvent( event, callBack );
+    if( event === "onreadystatechange" ){
+      callBack.readyStateCheck = callBack.readyStateCheck || function( e ){
+
+        if( self.readyState === "loaded" ){
+          callBack( e );
+        }
+      };
+    }
+
+    this.attachEvent( event, ( callBack.readyStateCheck || callBack ) );
   };
 
   HTMLScriptElement.prototype.removeEventListener = HTMLScriptElement.prototype.removeEventListener || function( event, callBack ) {
 
     event = ( event === "load" ) ? "onreadystatechange" : "on" + event;
 
-    this.detachEvent( event, callBack );
+    this.detachEvent( event, ( callBack.readyStateCheck || callBack ) );
   };
 
   document.createEvent = document.createEvent || function ( type ) {
@@ -197,4 +220,109 @@
     };
   }
   
+  // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+  if (!Object.keys) {
+    Object.keys = (function () {
+      'use strict';
+      var hasOwnProperty = Object.prototype.hasOwnProperty,
+          hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
+          dontEnums = [
+            'toString',
+            'toLocaleString',
+            'valueOf',
+            'hasOwnProperty',
+            'isPrototypeOf',
+            'propertyIsEnumerable',
+            'constructor'
+          ],
+          dontEnumsLength = dontEnums.length;
+
+      return function (obj) {
+        if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
+          throw new TypeError('Object.keys called on non-object');
+        }
+
+        var result = [], prop, i;
+
+        for (prop in obj) {
+          if (hasOwnProperty.call(obj, prop)) {
+            result.push(prop);
+          }
+        }
+
+        if (hasDontEnumBug) {
+          for (i = 0; i < dontEnumsLength; i++) {
+            if (hasOwnProperty.call(obj, dontEnums[i])) {
+              result.push(dontEnums[i]);
+            }
+          }
+        }
+        return result;
+      };
+    }());
+  }
+  
+  if ( !Object.defineProperties ) {
+    Object.defineProperties = function(obj, properties) {
+      function convertToDescriptor(desc) {
+        function hasProperty(obj, prop) {
+          return Object.prototype.hasOwnProperty.call(obj, prop);
+        }
+
+        function isCallable(v) {
+          // NB: modify as necessary if other values than functions are callable.
+          return typeof v === "function";
+        }
+
+        if (typeof desc !== "object" || desc === null)
+          throw new TypeError("bad desc");
+
+        var d = {};
+
+        if (hasProperty(desc, "enumerable"))
+          d.enumerable = !!obj.enumerable;
+        if (hasProperty(desc, "configurable"))
+          d.configurable = !!desc.configurable;
+        if (hasProperty(desc, "value"))
+          d.value = obj.value;
+        if (hasProperty(desc, "writable"))
+          d.writable = !!desc.writable;
+        if ( hasProperty(desc, "get") ) {
+          var g = desc.get;
+
+          if (!isCallable(g) && g !== "undefined")
+            throw new TypeError("bad get");
+          d.get = g;
+        }
+        if ( hasProperty(desc, "set") ) {
+          var s = desc.set;
+          if (!isCallable(s) && s !== "undefined")
+            throw new TypeError("bad set");
+          d.set = s;
+        }
+
+        if (("get" in d || "set" in d) && ("value" in d || "writable" in d))
+          throw new TypeError("identity-confused descriptor");
+
+        return d;
+      }
+
+      if (typeof obj !== "object" || obj === null)
+        throw new TypeError("bad obj");
+
+      properties = Object(properties);
+
+      var keys = Object.keys(properties);
+      var descs = [];
+
+      for (var i = 0; i < keys.length; i++)
+        descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+      for (var i = 0; i < descs.length; i++)
+        Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+      return obj;
+    };
+  }
+
 })();
diff --git a/popcorn.js b/popcorn.js
index 93cf80976..7b2335162 100644
--- a/popcorn.js
+++ b/popcorn.js
@@ -77,9 +77,11 @@
     put: function( dictionary ) {
       // For each own property of src, let key be the property key
       // and desc be the property descriptor of the property.
-      Object.getOwnPropertyNames( dictionary ).forEach(function( key ) {
-        this[ key ] = dictionary[ key ];
-      }, this);
+      for ( var key in dictionary ) {
+        if ( dictionary.hasOwnProperty( key ) ) {
+          this[ key ] = dictionary[ key ];
+        }
+      }
     }
   },
 
@@ -342,12 +344,9 @@
         }
       };
 
-      Object.defineProperty( this, "error", {
-        get: function() {
-
-          return self.media.error;
-        }
-      });
+      self.media.addEventListener( "error", function() {
+        self.error = self.media.error;
+      }, false );
 
       // http://www.whatwg.org/specs/web-apps/current-work/#dom-media-readystate
       //
@@ -1203,11 +1202,7 @@
     this.endIndex = 0;
     this.previousUpdateTime = -1;
 
-    Object.defineProperty( this, "count", {
-      get: function() {
-        return this.byStart.length;
-      }
-    });
+    this.count = 1;
   }
 
   function isMatch( obj, key, value ) {
@@ -1279,6 +1274,8 @@
       this.parent.data.trackEvents.endIndex++;
     }
 
+    this.count++;
+
   };
 
   TrackEvents.prototype.remove = function( removeId, state ) {
@@ -1385,6 +1382,7 @@
     this.byStart = byStart;
     this.byEnd = byEnd;
     this.animating = animating;
+    this.count--;
 
     historyLen = this.parent.data.history.length;
 
diff --git a/wrappers/common/popcorn._MediaElementProto.js b/wrappers/common/popcorn._MediaElementProto.js
index d641f7d7a..b441297c9 100644
--- a/wrappers/common/popcorn._MediaElementProto.js
+++ b/wrappers/common/popcorn._MediaElementProto.js
@@ -55,7 +55,7 @@
   };
 
   // Make sure the browser has MediaError
-  MediaError = MediaError || (function() {
+  window.MediaError = window.MediaError || (function() {
     function MediaError(code, msg) {
       this.code = code || null;
       this.message = msg || "";
@@ -70,11 +70,14 @@
   }());
 
 
-  function MediaElementProto(){}
-  MediaElementProto.prototype = {
-
-    _util: {
-
+  function MediaElementProto() {
+    var protoElement = {},
+        events = {},
+        parentNode;
+    if ( !Object.prototype.__defineGetter__ ) {
+      protoElement = document.createElement( "div" );
+    }
+    protoElement._util = {
       // Each wrapper stamps a type.
       type: "HTML5",
 
@@ -94,143 +97,186 @@
       },
 
       parseUri: parseUri
-
-    },
-
+    };
     // Mimic DOM events with custom, namespaced events on the document.
     // Each media element using this prototype needs to provide a unique
     // namespace for all its events via _eventNamespace.
-    addEventListener: function( type, listener, useCapture ) {
-      document.addEventListener( this._eventNamespace + type, listener, useCapture );
-    },
+    protoElement.addEventListener = function( evtName, fn ) {
 
-    removeEventListener: function( type, listener, useCapture ) {
-      document.removeEventListener( this._eventNamespace + type, listener, useCapture );
-    },
+      if ( !events[ evtName ] ) {
 
-    dispatchEvent: function( name ) {
-      var customEvent = document.createEvent( "CustomEvent" ),
-        detail = {
-          type: name,
-          target: this.parentNode,
-          data: null
-        };
+        events[ evtName ] = [];
+      }
 
-      customEvent.initCustomEvent( this._eventNamespace + name, false, false, detail );
-      document.dispatchEvent( customEvent );
-    },
+      events[ evtName ].push( fn );
+    };
 
-    load: Popcorn.nop,
+    protoElement.removeEventListener = function( evtName, fn ) {
+      var i,
+          listeners = events[ evtName ];
 
-    canPlayType: function( url ) {
-      return "";
-    },
+      if ( !listeners ){
 
-    // Popcorn expects getBoundingClientRect to exist, forward to parent node.
-    getBoundingClientRect: function() {
-      return this.parentNode.getBoundingClientRect();
-    },
+        return;
+      }
 
-    NETWORK_EMPTY: 0,
-    NETWORK_IDLE: 1,
-    NETWORK_LOADING: 2,
-    NETWORK_NO_SOURCE: 3,
+      // walk backwards so we can safely splice
+      for ( i = events[ evtName ].length - 1; i >= 0; i-- ) {
 
-    HAVE_NOTHING: 0,
-    HAVE_METADATA: 1,
-    HAVE_CURRENT_DATA: 2,
-    HAVE_FUTURE_DATA: 3,
-    HAVE_ENOUGH_DATA: 4
+        if( fn === listeners[ i ] ) {
 
-  };
+          listeners.splice( i, 1 );
+        }
+      }
+    };
+
+    protoElement.dispatchEvent = function( oEvent ) {
+
+      var evt,
+          self = this,
+          eventInterface,
+          eventName = oEvent.type;
 
-  MediaElementProto.prototype.constructor = MediaElementProto;
+      // A string was passed, create event object
+      if ( !eventName ) {
 
-  Object.defineProperties( MediaElementProto.prototype, {
+        eventName = oEvent;
+        eventInterface  = Popcorn.events.getInterface( eventName );
 
-    currentSrc: {
-      get: function() {
-        return this.src !== undefined ? this.src : "";
+        if ( eventInterface ) {
+
+          evt = document.createEvent( eventInterface );
+          evt.initEvent( eventName, true, true, window, 1 );
+        }
       }
-    },
 
-    // We really can't do much more than "auto" with most of these.
-    preload: {
-      get: function() {
-        return "auto";
+      if ( events[ eventName ] ) {
+
+        for ( var i = 0; i < events[ eventName ].length; i++ ) {
+
+          events[ eventName ][ i ].call( self, evt, self );
+        }
+      }
+    };
+
+    protoElement.load = Popcorn.nop;
+
+    protoElement.canPlayType = function( url ) {
+      return "";
+    };
+
+    // Popcorn expects getBoundingClientRect to exist, forward to parent node.
+    protoElement.getBoundingClientRect = function() {
+      return parentNode.getBoundingClientRect();
+    };
+
+    protoElement.NETWORK_EMPTY = 0;
+    protoElement.NETWORK_IDLE = 1;
+    protoElement.NETWORK_LOADING = 2;
+    protoElement.NETWORK_NO_SOURCE = 3;
+
+    protoElement.HAVE_NOTHING = 0;
+    protoElement.HAVE_METADATA = 1;
+    protoElement.HAVE_CURRENT_DATA = 2;
+    protoElement.HAVE_FUTURE_DATA = 3;
+    protoElement.HAVE_ENOUGH_DATA = 4;
+    Object.defineProperties( protoElement, {
+
+      currentSrc: {
+        get: function() {
+          return this.src !== undefined ? this.src : "";
+        }
+      },
+
+      parentNode: {
+        get: function() {
+          return parentNode;
+        },
+        set: function( val ) {
+          parentNode = val;
+        }
+      },
+      
+      // We really can't do much more than "auto" with most of these.
+      preload: {
+        get: function() {
+          return "auto";
+        },
+        set: Popcorn.nop
       },
-      set: Popcorn.nop
-    },
 
-    controls: {
-      get: function() {
-        return true;
+      controls: {
+        get: function() {
+          return true;
+        },
+        set: Popcorn.nop
       },
-      set: Popcorn.nop
-    },
 
-    // TODO: it would be good to overlay an <img> using this URL
-    poster: {
-      get: function() {
-        return "";
+      // TODO: it would be good to overlay an <img> using this URL
+      poster: {
+        get: function() {
+          return "";
+        },
+        set: Popcorn.nop
       },
-      set: Popcorn.nop
-    },
 
-    crossorigin: {
-      get: function() {
-        return "";
-      }
-    },
+      crossorigin: {
+        get: function() {
+          return "";
+        }
+      },
 
-    played: {
-      get: function() {
-        return _fakeTimeRanges;
-      }
-    },
+      played: {
+        get: function() {
+          return _fakeTimeRanges;
+        }
+      },
 
-    seekable: {
-      get: function() {
-        return _fakeTimeRanges;
-      }
-    },
+      seekable: {
+        get: function() {
+          return _fakeTimeRanges;
+        }
+      },
 
-    buffered: {
-      get: function() {
-        return _fakeTimeRanges;
-      }
-    },
+      buffered: {
+        get: function() {
+          return _fakeTimeRanges;
+        },
+        configurable: true
+      },
 
-    defaultMuted: {
-      get: function() {
-        return false;
-      }
-    },
+      defaultMuted: {
+        get: function() {
+          return false;
+        }
+      },
 
-    defaultPlaybackRate: {
-      get: function() {
-        return 1.0;
-      }
-    },
+      defaultPlaybackRate: {
+        get: function() {
+          return 1.0;
+        }
+      },
 
-    style: {
-      get: function() {
-        return this.parentNode.style;
-      }
-    },
+      style: {
+        get: function() {
+          return this.parentNode.style;
+        }
+      },
 
-    id: {
-      get: function() {
-        return this.parentNode.id;
+      id: {
+        get: function() {
+          return this.parentNode.id;
+        }
       }
-    }
 
-    // TODO:
-    //   initialTime
-    //   playbackRate
-    //   startOffsetTime
+      // TODO:
+      //   initialTime
+      //   playbackRate
+      //   startOffsetTime
 
-  });
+     });
+    return protoElement;
+  }
 
   Popcorn._MediaElementProto = MediaElementProto;
 
diff --git a/wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js b/wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js
index bd617df40..5b164ec7b 100644
--- a/wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js
+++ b/wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js
@@ -52,7 +52,7 @@
       throw "ERROR: HTMLJWPlayerVideoElement requires window.postMessage";
     }
 
-    var self = this,
+    var self = new Popcorn._MediaElementProto(),
       parent = typeof id === "string" ? document.querySelector( id ) : id,
       impl = {
         src: EMPTY_STRING,
@@ -548,26 +548,27 @@
         }
       }
     });
+
+    self._canPlaySrc = Popcorn.HTMLJWPlayerVideoElement._canPlaySrc;
+    self.canPlayType = Popcorn.HTMLJWPlayerVideoElement.canPlayType;
+
+    return self;
   }
 
-  HTMLJWPlayerVideoElement.prototype = new Popcorn._MediaElementProto();
-  HTMLJWPlayerVideoElement.prototype.constructor = HTMLJWPlayerVideoElement;
+  Popcorn.HTMLJWPlayerVideoElement = function( id ) {
+    return new HTMLJWPlayerVideoElement( id );
+  };
 
   // Helper for identifying URLs we know how to play.
-  HTMLJWPlayerVideoElement.prototype._canPlaySrc = function( url ) {
+  Popcorn.HTMLJWPlayerVideoElement._canPlaySrc = function( url ) {
     // Because of the nature of JWPlayer playing all media types,
     // it can potentially play all url formats.
     return "probably";
   };
 
   // This could potentially support everything. It is a bit of a catch all player.
-  HTMLJWPlayerVideoElement.prototype.canPlayType = function( type ) {
+  Popcorn.HTMLJWPlayerVideoElement.canPlayType = function( type ) {
     return "probably";
   };
 
-  Popcorn.HTMLJWPlayerVideoElement = function( id ) {
-    return new HTMLJWPlayerVideoElement( id );
-  };
-  Popcorn.HTMLJWPlayerVideoElement._canPlaySrc = HTMLJWPlayerVideoElement.prototype._canPlaySrc;
-
 }( Popcorn, window, document ));
diff --git a/wrappers/null/popcorn.HTMLNullVideoElement.js b/wrappers/null/popcorn.HTMLNullVideoElement.js
index bd25ad1cc..977fc5be4 100644
--- a/wrappers/null/popcorn.HTMLNullVideoElement.js
+++ b/wrappers/null/popcorn.HTMLNullVideoElement.js
@@ -74,7 +74,7 @@
 
   function HTMLNullVideoElement( id ) {
 
-    var self = this,
+    var self = new Popcorn._MediaElementProto(),
       parent = typeof id === "string" ? document.querySelector( id ) : id,
       elem = document.createElement( "div" ),
       playerReady = false,
@@ -445,26 +445,27 @@
         }
       }
     });
+
+    self._canPlaySrc = Popcorn.HTMLNullVideoElement._canPlaySrc;
+    self.canPlayType = Popcorn.HTMLNullVideoElement.canPlayType;
+
+    return self;
   }
 
-  HTMLNullVideoElement.prototype = new Popcorn._MediaElementProto();
-  HTMLNullVideoElement.prototype.constructor = HTMLNullVideoElement;
+  Popcorn.HTMLNullVideoElement = function( id ) {
+    return new HTMLNullVideoElement( id );
+  };
 
   // Helper for identifying URLs we know how to play.
-  HTMLNullVideoElement.prototype._canPlaySrc = function( url ) {
+  Popcorn.HTMLNullVideoElement._canPlaySrc = function( url ) {
     return ( temporalRegex ).test( url ) ?
       "probably" :
       EMPTY_STRING;
   };
 
   // We'll attempt to support a mime type of video/x-nullvideo
-  HTMLNullVideoElement.prototype.canPlayType = function( type ) {
+  Popcorn.HTMLNullVideoElement.canPlayType = function( type ) {
     return type === "video/x-nullvideo" ? "probably" : EMPTY_STRING;
   };
 
-  Popcorn.HTMLNullVideoElement = function( id ) {
-    return new HTMLNullVideoElement( id );
-  };
-  Popcorn.HTMLNullVideoElement._canPlaySrc = HTMLNullVideoElement.prototype._canPlaySrc;
-
 }( Popcorn, document ));
diff --git a/wrappers/soundcloud/popcorn.HTMLSoundCloudAudioElement.js b/wrappers/soundcloud/popcorn.HTMLSoundCloudAudioElement.js
index d9ce8d097..ca0f6e247 100644
--- a/wrappers/soundcloud/popcorn.HTMLSoundCloudAudioElement.js
+++ b/wrappers/soundcloud/popcorn.HTMLSoundCloudAudioElement.js
@@ -47,7 +47,7 @@
       throw "ERROR: HTMLSoundCloudAudioElement requires window.postMessage";
     }
 
-    var self = this,
+    var self = new Popcorn._MediaElementProto(),
       parent = typeof id === "string" ? Popcorn.dom.find( id ) : id,
       elem = document.createElement( "iframe" ),
       impl = {
@@ -670,24 +670,26 @@
         }
       }
     });
+
+    self._canPlaySrc = Popcorn.HTMLSoundCloudAudioElement._canPlaySrc;
+    self.canPlayType = Popcorn.HTMLSoundCloudAudioElement.canPlayType;
+
+    return self;
   }
 
-  HTMLSoundCloudAudioElement.prototype = new Popcorn._MediaElementProto();
+  Popcorn.HTMLSoundCloudAudioElement = function( id ) {
+    return new HTMLSoundCloudAudioElement( id );
+  };
 
   // Helper for identifying URLs we know how to play.
-  HTMLSoundCloudAudioElement.prototype._canPlaySrc = function( url ) {
+  Popcorn.HTMLSoundCloudAudioElement._canPlaySrc = function( url ) {
     return (/(?:https?:\/\/www\.|https?:\/\/|www\.|\.|^)(soundcloud)/).test( url ) ?
       "probably" : EMPTY_STRING;
   };
 
   // We'll attempt to support a mime type of audio/x-soundcloud
-  HTMLSoundCloudAudioElement.prototype.canPlayType = function( type ) {
+  Popcorn.HTMLSoundCloudAudioElement.canPlayType = function( type ) {
     return type === "audio/x-soundcloud" ? "probably" : EMPTY_STRING;
   };
 
-  Popcorn.HTMLSoundCloudAudioElement = function( id ) {
-    return new HTMLSoundCloudAudioElement( id );
-  };
-  Popcorn.HTMLSoundCloudAudioElement._canPlaySrc = HTMLSoundCloudAudioElement.prototype._canPlaySrc;
-
 }( Popcorn, window, document ));
diff --git a/wrappers/vimeo/popcorn.HTMLVimeoVideoElement.js b/wrappers/vimeo/popcorn.HTMLVimeoVideoElement.js
index 56e15917d..b61dde41d 100644
--- a/wrappers/vimeo/popcorn.HTMLVimeoVideoElement.js
+++ b/wrappers/vimeo/popcorn.HTMLVimeoVideoElement.js
@@ -49,7 +49,7 @@
       throw "ERROR: HTMLVimeoVideoElement requires window.postMessage";
     }
 
-    var self = this,
+    var self = new Popcorn._MediaElementProto(),
       parent = typeof id === "string" ? Popcorn.dom.find( id ) : id,
       elem = document.createElement( "iframe" ),
       impl = {
@@ -598,25 +598,26 @@
         }
       }
     });
+
+    self._canPlaySrc = Popcorn.HTMLVimeoVideoElement._canPlaySrc;
+    self.canPlayType = Popcorn.HTMLVimeoVideoElement.canPlayType;
+
+    return self;
   }
 
-  HTMLVimeoVideoElement.prototype = new Popcorn._MediaElementProto();
-  HTMLVimeoVideoElement.prototype.constructor = HTMLVimeoVideoElement;
+  Popcorn.HTMLVimeoVideoElement = function( id ) {
+    return new HTMLVimeoVideoElement( id );
+  };
 
   // Helper for identifying URLs we know how to play.
-  HTMLVimeoVideoElement.prototype._canPlaySrc = function( url ) {
+  Popcorn.HTMLVimeoVideoElement._canPlaySrc = function( url ) {
     return ( (/player.vimeo.com\/video\/\d+/).test( url ) ||
              (/vimeo.com\/\d+/).test( url ) ) ? "probably" : EMPTY_STRING;
   };
 
   // We'll attempt to support a mime type of video/x-vimeo
-  HTMLVimeoVideoElement.prototype.canPlayType = function( type ) {
+  Popcorn.HTMLVimeoVideoElement.canPlayType = function( type ) {
     return type === "video/x-vimeo" ? "probably" : EMPTY_STRING;
   };
 
-  Popcorn.HTMLVimeoVideoElement = function( id ) {
-    return new HTMLVimeoVideoElement( id );
-  };
-  Popcorn.HTMLVimeoVideoElement._canPlaySrc = HTMLVimeoVideoElement.prototype._canPlaySrc;
-
 }( Popcorn, window, document ));
diff --git a/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js b/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js
index b4779b69a..c300e1184 100644
--- a/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js
+++ b/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js
@@ -57,7 +57,7 @@
       throw "ERROR: HTMLYouTubeVideoElement requires window.postMessage";
     }
 
-    var self = this,
+    var self = new Popcorn._MediaElementProto(),
       parent = typeof id === "string" ? document.querySelector( id ) : id,
       elem = document.createElement( "div" ),
       impl = {
@@ -114,6 +114,7 @@
     }
 
     function onPlayerReady( event ) {
+
       var onMuted = function() {
         if ( player.isMuted() ) {
           // force an initial play on the video, to remove autostart on initial seekTo.
@@ -401,6 +402,7 @@
       var xhrURL = "https://gdata.youtube.com/feeds/api/videos/" + aSrc + "?v=2&alt=jsonc&callback=?";
       // Get duration value.
       Popcorn.getJSONP( xhrURL, function( resp ) {
+
         var warning = "failed to retreive duration data, reason: ";
         if ( resp.error ) {
           console.warn( warning + resp.error.message );
@@ -742,29 +744,31 @@
           });
 
           return timeRanges;
-        }
+        },
+        configurable: true
       }
     });
+
+    self._canPlaySrc = Popcorn.HTMLYouTubeVideoElement._canPlaySrc;
+    self.canPlayType = Popcorn.HTMLYouTubeVideoElement.canPlayType;
+
+    return self;
   }
 
-  HTMLYouTubeVideoElement.prototype = new Popcorn._MediaElementProto();
-  HTMLYouTubeVideoElement.prototype.constructor = HTMLYouTubeVideoElement;
+  Popcorn.HTMLYouTubeVideoElement = function( id ) {
+    return new HTMLYouTubeVideoElement( id );
+  };
 
   // Helper for identifying URLs we know how to play.
-  HTMLYouTubeVideoElement.prototype._canPlaySrc = function( url ) {
+  Popcorn.HTMLYouTubeVideoElement._canPlaySrc = function( url ) {
     return (/(?:http:\/\/www\.|http:\/\/|www\.|\.|^)(youtu).*(?:\/|v=)(.{11})/).test( url ) ?
       "probably" :
       EMPTY_STRING;
   };
 
   // We'll attempt to support a mime type of video/x-youtube
-  HTMLYouTubeVideoElement.prototype.canPlayType = function( type ) {
+  Popcorn.HTMLYouTubeVideoElement.canPlayType = function( type ) {
     return type === "video/x-youtube" ? "probably" : EMPTY_STRING;
   };
 
-  Popcorn.HTMLYouTubeVideoElement = function( id ) {
-    return new HTMLYouTubeVideoElement( id );
-  };
-  Popcorn.HTMLYouTubeVideoElement._canPlaySrc = HTMLYouTubeVideoElement.prototype._canPlaySrc;
-
 }( Popcorn, window, document ));