feat: add tech method to allow override native audio and video (#5074)

src/js/tech/html5.js

@@ -200,6 +200,43 @@ class Html5 extends Tech {
     });
   }
 
+  /**
+   * Attempt to force override of native audio/video tracks.
+   *
+   * @param {Boolean} override - If set to true native audio/video will be overridden,
+   * otherwise native audio/video will potentially be used.
+   */
+  overrideNativeTracks(override) {
+    // If there is no behavioral change don't add/remove listeners
+    if (override !== (this.featuresNativeAudioTracks && this.featuresNativeVideoTracks)) {
+      return;
+    }
+
+    if (this.audioTracksListeners_) {
+      Object.keys(this.audioTracksListeners_).forEach((eventName) => {
+        const elTracks = this.el().audioTracks;
+
+        elTracks.removeEventListener(eventName, this.audioTracksListeners_[eventName]);
+      });
+    }
+
+    if (this.videoTracksListeners_) {
+      Object.keys(this.videoTracksListeners_).forEach((eventName) => {
+        const elTracks = this.el().videoTracks;
+
+        elTracks.removeEventListener(eventName, this.videoTracksListeners_[eventName]);
+      });
+    }
+
+    this.featuresNativeVideoTracks = !override;
+    this.featuresNativeAudioTracks = !override;
+
+    this.audioTracksListeners_ = null;
+    this.videoTracksListeners_ = null;
+
+    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.
@@ -256,6 +293,8 @@ class Html5 extends Tech {
         }
       };
 
+      this[props.getterName + 'Listeners_'] = listeners;
+
       Object.keys(listeners).forEach((eventName) => {
         const listener = listeners[eventName];
 

src/js/tech/tech.js

@@ -785,6 +785,16 @@ class Tech extends Component {
    */
   setPlaysinline() {}
 
+  /**
+   * Attempt to force override of native audio.video tracks.
+   *
+   * @param {Boolean} override - If set to true native audio/video will be overridden,
+   * otherwise native audio/video will potentially be used.
+   *
+   * @abstract
+   */
+  overrideNativeTracks() {}
+
   /*
    * Check if the tech can support the given mime-type.
    *
@@ -1219,7 +1229,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,61 @@ 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(8);
+
+    const adds = [];
+    const rems = [];
+    const at = {
+      length: 0,
+      addEventListener: (type, fn) => {
+        adds.push({ type, fn });
+      },
+      removeEventListener: (type, fn) => {
+        rems.push({ type, fn });
+      }
+    };
+    const vt = {
+      length: 0,
+      addEventListener: (type, fn) => null,
+      removeEventListener: (type, fn) => null
+    };
+    const el = document.createElement('div');
+
+    el.audioTracks = at;
+    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(true);
+
+    assert.equal(adds.length, 3,
+      'no state change so do not add listeners');
+    assert.equal(rems.length, 3,
+      'no state change so do not remove listeners');
+
+    htmlTech.overrideNativeTracks(false);
+
+    assert.equal(adds.length, 6,
+      'should add listeners because native tracks should be proxied');
+    assert.equal(rems.length, 3,
+      'should not remove listeners because there where none added on previous state');
+
+    htmlTech.dispose();
+  });
 }
 
 if (Html5.supportsNativeVideoTracks()) {
@@ -603,6 +658,61 @@ 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(8);
+
+    const adds = [];
+    const rems = [];
+    const vt = {
+      length: 0,
+      addEventListener: (type, fn) => {
+        adds.push({ type, fn });
+      },
+      removeEventListener: (type, fn) => {
+        rems.push({ type, fn });
+      }
+    };
+    const at = {
+      length: 0,
+      addEventListener: (type, fn) => null,
+      removeEventListener: (type, fn) => null
+    };
+    const el = document.createElement('div');
+
+    el.audioTracks = at;
+    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(true);
+
+    assert.equal(adds.length, 3,
+      'no state change so do not add listeners');
+    assert.equal(rems.length, 3,
+      'no state change so do not remove listeners');
+
+    htmlTech.overrideNativeTracks(false);
+
+    assert.equal(adds.length, 6,
+      'should add listeners because native tracks should be proxied');
+    assert.equal(rems.length, 3,
+      'should not remove listeners because there where none added on previous state');
+
+    htmlTech.dispose();
+  });
 }
 
 QUnit.test('should always return currentSource_ if set', function(assert) {