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) {