Add option to override native audio and video to html5 tech

src/js/tech/html5.js

@@ -200,6 +200,40 @@ class Html5 extends Tech {
     });
   }
 
+  /**
+   * Attempt to force override of native video tracks.
+   *
+   * @param {Boolean} override - If set to true native video will be overridden,
+   * otherwise native video will potentially be used.
+   */
+  overrideNativeTracks(override) {
+    const removeTracks = (trackType) => {
+      const props = TRACK_TYPES[trackType];
+      const elTracks = this.el()[props.getterName];
+
+      if (this.trackListeners[props.capitalName]) {
+        this.trackListeners[props.capitalName].forEach(trackListener => {
+          elTracks.removeEventListener(trackListener.eventName, trackListener.listener);
+        });
+      }
+    };
+
+    this.featuresNativeVideoTracks = !override;
+    this.featuresNativeAudioTracks = !override;
+
+    if (!this.trackListeners) {
+      this.trackListeners = [];
+    }
+
+    removeTracks('video');
+    removeTracks('audio');
+
+    this.trackListeners.Video = [];
+    this.trackListeners.Audio = [];
+
+    this.proxyNativeTracks_();
+  }
+
   /**
    * Proxy all native track list events to our track lists if the browser we are playing
    * in supports that type of track list.
@@ -217,22 +251,26 @@ class Html5 extends Tech {
           !elTracks.addEventListener) {
         return;
       }
-      const listeners = {
-        change(e) {
-          techTracks.trigger({
-            type: 'change',
-            target: techTracks,
-            currentTarget: techTracks,
-            srcElement: techTracks
-          });
-        },
-        addtrack(e) {
-          techTracks.addTrack(e.track);
-        },
-        removetrack(e) {
-          techTracks.removeTrack(e.track);
-        }
+
+      const listeners = {};
+
+      listeners.change = (e) => {
+        techTracks.trigger({
+          type: 'change',
+          target: techTracks,
+          currentTarget: techTracks,
+          srcElement: techTracks
+        });
+      };
+
+      listeners.addtrack = (e) => {
+        techTracks.addTrack(e.track);
+      };
+
+      listeners.removetrack = (e) => {
+        techTracks.removeTrack(e.track);
       };
+
       const removeOldTracks = function() {
         const removeTracks = [];
 
@@ -260,6 +298,16 @@ class Html5 extends Tech {
         const listener = listeners[eventName];
 
         elTracks.addEventListener(eventName, listener);
+
+        if (!this.trackListeners) {
+          this.trackListeners = [];
+        }
+
+        if (!this.trackListeners[props.capitalName]) {
+          this.trackListeners[props.capitalName] = [];
+        }
+
+        this.trackListeners[props.capitalName].push({ eventName, listener });
         this.on('dispose', (e) => elTracks.removeEventListener(eventName, listener));
       });
 
@@ -613,6 +661,10 @@ class Html5 extends Tech {
     this.setSrc(src);
   }
 
+  setSrc(src) {
+    super.setSrc(src);
+  }
+
   /**
    * Reset the tech by removing all sources and then calling
    * {@link Html5.resetMediaElement}.

src/js/tech/tech.js

@@ -1218,7 +1218,7 @@ Tech.withSourceHandlers = function(_Tech) {
       if (_Tech.nativeSourceHandler) {
         sh = _Tech.nativeSourceHandler;
       } else {
-        log.error('No source hander found for the current source.');
+        log.error('No source handler found for the current source.');
       }
     }
 

test/unit/tech/html5.test.js

@@ -535,6 +535,49 @@ if (Html5.supportsNativeAudioTracks()) {
     assert.equal(adds[1][0], rems[1][0], 'addtrack event handler removed');
     assert.equal(adds[2][0], rems[2][0], 'removetrack event handler removed');
   });
+
+  QUnit.test('should use overrideNativeTracks on audio correctly', function(assert) {
+    assert.expect(6);
+
+    const adds = [];
+    const rems = [];
+    const at = {
+      length: 0,
+      addEventListener: (type, fn) => {
+        adds.push({ type, fn });
+      },
+      removeEventListener: (type, fn) => {
+        rems.push({ type, fn });
+      }
+    };
+
+    const el = document.createElement('div');
+
+    el.audioTracks = at;
+
+    const htmlTech = new Html5({el});
+
+    assert.equal(adds.length, 3,
+      'should have added change, remove, add listeners');
+    assert.equal(rems.length, 0,
+      'no listeners should be removed');
+
+    htmlTech.overrideNativeTracks(true);
+
+    assert.equal(adds.length, 3,
+      'should not have added additional listeners');
+    assert.equal(rems.length, 3,
+      'should have removed previous three listeners');
+
+    htmlTech.overrideNativeTracks(false);
+
+    assert.equal(adds.length, 6,
+      'should have added 3 listeners back');
+    assert.equal(rems.length, 3,
+      'no listeners should be removed');
+
+    htmlTech.dispose();
+  });
 }
 
 if (Html5.supportsNativeVideoTracks()) {
@@ -603,6 +646,49 @@ if (Html5.supportsNativeVideoTracks()) {
     assert.equal(adds[1][0], rems[1][0], 'addtrack event handler removed');
     assert.equal(adds[2][0], rems[2][0], 'removetrack event handler removed');
   });
+
+  QUnit.test('should use overrideNativeTracks on video correctly', function(assert) {
+    assert.expect(6);
+
+    const adds = [];
+    const rems = [];
+    const vt = {
+      length: 0,
+      addEventListener: (type, fn) => {
+        adds.push({ type, fn });
+      },
+      removeEventListener: (type, fn) => {
+        rems.push({ type, fn });
+      }
+    };
+
+    const el = document.createElement('div');
+
+    el.videoTracks = vt;
+
+    const htmlTech = new Html5({el});
+
+    assert.equal(adds.length, 3,
+      'should have added change, remove, add listeners');
+    assert.equal(rems.length, 0,
+      'no listeners should be removed');
+
+    htmlTech.overrideNativeTracks(true);
+
+    assert.equal(adds.length, 3,
+      'should not have added additional listeners');
+    assert.equal(rems.length, 3,
+      'should have removed previous three listeners');
+
+    htmlTech.overrideNativeTracks(false);
+
+    assert.equal(adds.length, 6,
+      'should have added 3 listeners back');
+    assert.equal(rems.length, 3,
+      'no listeners should be removed');
+
+    htmlTech.dispose();
+  });
 }
 
 QUnit.test('should always return currentSource_ if set', function(assert) {