@nickygerritsen removed unused tracks when changing sources. Fixes #3000. closes #3002

CHANGELOG.md

@@ -14,6 +14,7 @@ CHANGELOG
 * @mboles added loadstart event to jsdoc ([view](https://github.com/videojs/video.js/pull/3370))
 * @hartman added default print styling ([view](https://github.com/videojs/video.js/pull/3304))
 * @ldayananda updated videojs to not do anything if no src is set ([view](https://github.com/videojs/video.js/pull/3378))
+* @nickygerritsen removed unused tracks when changing sources. Fixes #3000 ([view](https://github.com/videojs/video.js/pull/3002))
 
 --------------------
 

src/js/tech/html5.js

@@ -94,6 +94,9 @@ class Html5 extends Tech {
         tl.addEventListener('change', Fn.bind(this, this[`handle${capitalType}TrackChange_`]));
         tl.addEventListener('addtrack', Fn.bind(this, this[`handle${capitalType}TrackAdd_`]));
         tl.addEventListener('removetrack', Fn.bind(this, this[`handle${capitalType}TrackRemove_`]));
+
+        // Remove (native) trackts that are not used anymore
+        this.on('loadstart', this[`removeOld${capitalType}Tracks_`]);
       }
     });
 
@@ -138,6 +141,11 @@ class Html5 extends Tech {
         tl.removeEventListener('addtrack', this[`handle${capitalType}TrackAdd_`]);
         tl.removeEventListener('removetrack', this[`handle${capitalType}TrackRemove_`]);
       }
+      
+      // Stop removing old text tracks
+      if (tl) {
+        this.off('loadstart', this[`removeOld${capitalType}Tracks_`]);
+      }
     });
 
     Html5.disposeMediaElement(this.el_);
@@ -296,6 +304,9 @@ class Html5 extends Tech {
         tt.addEventListener('addtrack', this.handleTextTrackAdd_);
         tt.addEventListener('removetrack', this.handleTextTrackRemove_);
       }
+    
+      // Remove (native) texttracks that are not used anymore
+      this.on('loadstart', this.removeOldTextTracks_);
     }
   }
 
@@ -353,6 +364,60 @@ class Html5 extends Tech {
     this.audioTracks().removeTrack_(e.track);
   }
 
+  /**
+   * This is a helper function that is used in removeOldTextTracks_, removeOldAudioTracks_ and
+   * removeOldVideoTracks_
+   * @param {Track[]} techTracks Tracks for this tech
+   * @param {Track[]} elTracks Tracks for the HTML5 video element
+   * @private
+   */
+  removeOldTracks_(techTracks, elTracks) {
+    // This will loop over the techTracks and check if they are still used by the HTML5 video element
+    // If not, they will be removed from the emulated list
+    let removeTracks = [];
+    if (!elTracks) {
+      return;
+    }
+
+    for (let i = 0; i < techTracks.length; i++) {
+      let techTrack = techTracks[i];
+
+      let found = false;
+      for (let j = 0; j < elTracks.length; j++) {
+        if (elTracks[j] === techTrack) {
+          found = true;
+          break;
+        }
+      }
+
+      if (!found) {
+        removeTracks.push(techTrack);
+      }
+    }
+
+    for (let i = 0; i < removeTracks.length; i++) {
+      const track = removeTracks[i];
+      techTracks.removeTrack_(track);
+    }
+  }
+
+  removeOldTextTracks_() {
+    const techTracks = this.textTracks();
+    const elTracks = this.el().textTracks;
+    this.removeOldTracks_(techTracks, elTracks);
+  }
+
+  removeOldAudioTracks_() {
+    const techTracks = this.audioTracks();
+    const elTracks = this.el().audioTracks;
+    this.removeOldTracks_(techTracks, elTracks);
+  }
+
+  removeOldVideoTracks_() {
+    const techTracks = this.videoTracks();
+    const elTracks = this.el().videoTracks;
+    this.removeOldTracks_(techTracks, elTracks);
+  }
 
   /**
    * Play for html5 tech