@gkatsev added a Player#reset method. Fixes #2852. closes #2880

CHANGELOG.md

@@ -5,6 +5,7 @@ CHANGELOG
 * @misteroneill updated videojs-ie8 to 1.1.1 ([view](https://github.com/videojs/video.js/pull/2869))
 * @gkatsev added Player#tech. Fixes #2617 ([view](https://github.com/videojs/video.js/pull/2883))
 * @nick11703 changed multiline comments in sass with single-line comments ([view](https://github.com/videojs/video.js/pull/2827))
+* @gkatsev added a Player#reset method. Fixes #2852 ([view](https://github.com/videojs/video.js/pull/2880))
 
 --------------------
 

src/js/player.js

@@ -1923,6 +1923,19 @@ class Player extends Component {
     return this;
   }
 
+  /**
+   * Reset the player. Loads the first tech in the techOrder,
+   * and calls `reset` on the tech`.
+   *
+   * @return {Player} Returns the player
+   * @method reset
+   */
+  reset() {
+    this.loadTech_(toTitleCase(this.options_.techOrder[0]), null);
+    this.techCall_('reset');
+    return this;
+  }
+
   /**
    * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
    * Can be used in conjuction with `currentType` to assist in rebuilding the current source object.

src/js/tech/html5.js

@@ -486,6 +486,15 @@ class Html5 extends Tech {
     this.el_.load();
   }
 
+  /**
+   * Reset the tech. Removes all sources and calls `load`.
+   *
+   * @method reset
+   */
+  reset() {
+    Html5.resetMediaElement(this.el_);
+  }
+
   /**
    * Get current source
    *
@@ -1092,6 +1101,29 @@ Html5.disposeMediaElement = function(el){
   }
 };
 
+Html5.resetMediaElement = function(el){
+  if (!el) { return; }
+
+  let sources = el.querySelectorAll('source');
+  let i = sources.length;
+  while (i--) {
+    el.removeChild(sources[i]);
+  }
+
+  // remove any src reference.
+  // not setting `src=''` because that throws an error
+  el.removeAttribute('src');
+
+  if (typeof el.load === 'function') {
+    // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+    (function() {
+      try {
+        el.load();
+      } catch (e) {}
+    })();
+  }
+};
+
 Component.registerComponent('Html5', Html5);
 Tech.registerTech('Html5', Html5);
 export default Html5;

src/js/tech/tech.js

@@ -233,6 +233,13 @@ class Tech extends Component {
     super.dispose();
   }
 
+  /**
+   * Reset the tech. Removes all sources and resets readyState.
+   *
+   * @method reset
+   */
+  reset() {}
+
   /**
    * When invoked without an argument, returns a MediaError object
    * representing the current error state of the player or null if

test/unit/player.test.js

@@ -884,3 +884,53 @@ test('Player#tech alerts and throws without the appropriate input', function() {
   ok(alertCalled, 'we called an alert');
   window.alert = oldAlert;
 });
+
+test('player#reset loads the Html5 tech and then techCalls reset', function() {
+  let loadedTech;
+  let loadedSource;
+  let techCallMethod;
+
+  let testPlayer = {
+    options_: {
+      techOrder: ['html5', 'flash'],
+    },
+    loadTech_(tech, source) {
+      loadedTech = tech;
+      loadedSource = source;
+    },
+    techCall_(method) {
+      techCallMethod = method;
+    }
+  };
+
+  Player.prototype.reset.call(testPlayer);
+
+  equal(loadedTech, 'Html5', 'we loaded the html5 tech');
+  equal(loadedSource, null, 'with a null source');
+  equal(techCallMethod, 'reset', 'we then reset the tech');
+});
+
+test('player#reset loads the first item in the techOrder and then techCalls reset', function() {
+  let loadedTech;
+  let loadedSource;
+  let techCallMethod;
+
+  let testPlayer = {
+    options_: {
+      techOrder: ['flash', 'html5'],
+    },
+    loadTech_(tech, source) {
+      loadedTech = tech;
+      loadedSource = source;
+    },
+    techCall_(method) {
+      techCallMethod = method;
+    }
+  };
+
+  Player.prototype.reset.call(testPlayer);
+
+  equal(loadedTech, 'Flash', 'we loaded the Flash tech');
+  equal(loadedSource, null, 'with a null source');
+  equal(techCallMethod, 'reset', 'we then reset the tech');
+});

test/unit/tech/html5.test.js

@@ -304,3 +304,50 @@ test('should fire makeup events when a video tag is initialized late', function(
   testStates({ networkState: 1, readyState: 3 }, ['loadstart', 'loadedmetadata', 'loadeddata', 'canplay']);
   testStates({ networkState: 1, readyState: 4 }, ['loadstart', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough']);
 });
+
+test('Html5.resetMediaElement should remove sources and call load', function() {
+  let selector;
+  let removedChildren = [];
+  let removedAttribute;
+  let loaded;
+
+  let children = ['source1', 'source2', 'source3'];
+  let testEl = {
+    querySelectorAll(input) {
+      selector = input;
+      return children;
+    },
+
+    removeChild(child) {
+      removedChildren.push(child);
+    },
+
+    removeAttribute(attr) {
+      removedAttribute = attr;
+    },
+
+    load() {
+      loaded = true;
+    }
+  };
+
+  Html5.resetMediaElement(testEl);
+  equal(selector, 'source', 'we got the source elements from the test el');
+  deepEqual(removedChildren, children.reverse(), 'we removed the children that were present');
+  equal(removedAttribute, 'src', 'we removed the src attribute');
+  ok(loaded, 'we called load on the element');
+});
+
+test('Html5#reset calls Html5.resetMediaElement when called', function() {
+  let oldResetMedia = Html5.resetMediaElement;
+  let resetEl;
+
+  Html5.resetMediaElement = (el) => resetEl = el;
+
+  let el = {};
+  Html5.prototype.reset.call({el_: el});
+
+  equal(resetEl, el, 'we called resetMediaElement with the tech\'s el');
+
+  Html5.resetMediaElement = oldResetMedia;
+});