Additional tech 2.0 improvements from #2126

closes #2166
closes #2126

this.tech.emitTapEvents(); should be handled by the tech

De-dupe the bufferedPercent code in both Tech and Player

Have the player generate the tech ID

Added autoplay/preload/loop/muted to tech option

Remove the watch for native timeupdates

Fixed the JSDoc for bufferedPercent

Removed the unit test for native timeupdate

Added cute whitespaces

buffer should always return a TimeRange

CHANGELOG.md

@@ -31,6 +31,7 @@ CHANGELOG
 * @gkatsev added get and set global options methods ([view](https://github.com/videojs/video.js/pull/2115))
 * @heff added support for fluid widths, aspect ratios, and metadata defaults ([view](https://github.com/videojs/video.js/pull/1952))
 * @heff reorganized all utility functions in the codebase ([view](https://github.com/videojs/video.js/pull/2139))
+* @eXon made additional tech 2.0 improvements listed in #2126 ([view](https://github.com/videojs/video.js/pull/2166))
 
 --------------------
 

src/js/player.js

@@ -7,6 +7,7 @@ import * as browser from './utils/browser.js';
 import log from './utils/log.js';
 import toTitleCase from './utils/to-title-case.js';
 import { createTimeRange } from './utils/time-ranges.js';
+import { bufferedPercent } from './utils/buffer.js';
 import FullscreenApi from './fullscreen-api.js';
 import MediaError from './media-error.js';
 import Options from './options.js';
@@ -415,7 +416,12 @@ class Player extends Component {
     var techOptions = assign({
       'source': source,
       'playerId': this.id(),
-      'textTracks': this.textTracks_
+      'techId': `${this.id()}_${techName}_api`,
+      'textTracks': this.textTracks_,
+      'autoplay': this.options_.autoplay,
+      'preload': this.options_.preload,
+      'loop': this.options_.loop,
+      'muted': this.options_.muted
     }, this.options_[techName.toLowerCase()]);
 
     if (this.tag) {
@@ -510,9 +516,6 @@ class Player extends Component {
     this.on(this.tech, 'touchmove', this.handleTechTouchMove);
     this.on(this.tech, 'touchend', this.handleTechTouchEnd);
 
-    // Turn on component tap events
-    this.tech.emitTapEvents();
-
     // The tap listener needs to come after the touchend listener because the tap
     // listener cancels out any reportedUserActivity when setting userActive(false)
     this.on(this.tech, 'tap', this.handleTechTap);
@@ -1148,28 +1151,7 @@ class Player extends Component {
    * @return {Number} A decimal between 0 and 1 representing the percent
    */
   bufferedPercent() {
-    var duration = this.duration(),
-        buffered = this.buffered(),
-        bufferedDuration = 0,
-        start, end;
-
-    if (!duration) {
-      return 0;
-    }
-
-    for (var i=0; i<buffered.length; i++){
-      start = buffered.start(i);
-      end   = buffered.end(i);
-
-      // buffered end can be bigger than duration by a very small fraction
-      if (end > duration) {
-        end = duration;
-      }
-
-      bufferedDuration += end - start;
-    }
-
-    return bufferedDuration / duration;
+    return bufferedPercent(this.buffered(), this.duration());
   }
 
   /**

src/js/tech/flash.js

@@ -30,7 +30,7 @@ class Flash extends Tech {
     let { source, parentEl } = options;
 
     // Generate ID for swf object
-    let objId = options.playerId+'_flash_api';
+    let objId = options.techId;
 
     // Merge default flashvars with ones passed in to init
     let flashVars = assign({

src/js/tech/html5.js

@@ -109,7 +109,7 @@ class Html5 extends Tech {
 
         Dom.setElementAttributes(el,
           assign(attributes, {
-            id: this.options_.playerId + '_html5_api',
+            id: this.options_.techId,
             class: 'vjs-tech'
           })
         );

src/js/tech/tech.js

@@ -9,6 +9,7 @@ import TextTrackList from '../tracks/text-track-list';
 import * as Fn from '../utils/fn.js';
 import log from '../utils/log.js';
 import { createTimeRange } from '../utils/time-ranges.js';
+import { bufferedPercent } from '../utils/buffer.js';
 import window from 'global/window';
 import document from 'global/document';
 
@@ -21,7 +22,6 @@ import document from 'global/document';
 class Tech extends Component {
 
   constructor(options={}, ready=function(){}){
-    options = options || {};
     // we don't want the tech to report user activity automatically.
     // This is done manually in addControlsListeners
     options.reportTouchActivity = false;
@@ -50,6 +50,9 @@ class Tech extends Component {
     }
 
     this.initTextTrackListeners();
+
+    // Turn on component tap events
+    this.emitTapEvents();
   }
 
   /**
@@ -109,15 +112,15 @@ class Tech extends Component {
     this.progressInterval = this.setInterval(Fn.bind(this, function(){
       // Don't trigger unless buffered amount is greater than last time
 
-      let bufferedPercent = this.bufferedPercent();
+      let numBufferedPercent = this.bufferedPercent();
 
-      if (this.bufferedPercent_ !== bufferedPercent) {
+      if (this.bufferedPercent_ !== numBufferedPercent) {
         this.trigger('progress');
       }
 
-      this.bufferedPercent_ = bufferedPercent;
+      this.bufferedPercent_ = numBufferedPercent;
 
-      if (bufferedPercent === 1) {
+      if (numBufferedPercent === 1) {
         this.stopTrackingProgress();
       }
     }), 500);
@@ -127,33 +130,12 @@ class Tech extends Component {
     this.duration_ = this.duration();
   }
 
+  buffered() {
+    return createTimeRange(0, 0);
+  }
+
   bufferedPercent() {
-    let bufferedDuration = 0,
-        start, end;
-
-    if (!this.duration_) {
-      return 0;
-    }
-
-    let buffered = this.buffered();
-
-    if (!buffered || !buffered.length) {
-      buffered = createTimeRange(0,0);
-    }
-
-    for (var i=0; i<buffered.length; i++){
-      start = buffered.start(i);
-      end   = buffered.end(i);
-
-      // buffered end can be bigger than duration by a very small fraction
-      if (end > this.duration_) {
-        end = this.duration_;
-      }
-
-      bufferedDuration += end - start;
-    }
-
-    return bufferedDuration / this.duration_;
+    return bufferedPercent(this.buffered(), this.duration_);
   }
 
   stopTrackingProgress() {
@@ -166,21 +148,6 @@ class Tech extends Component {
 
     this.on('play', this.trackCurrentTime);
     this.on('pause', this.stopTrackingCurrentTime);
-    // timeupdate is also called by .currentTime whenever current time is set
-
-    // Watch for native timeupdate event only
-    var onTimeUpdate = function(e){
-      if (e.manuallyTriggered) return;
-
-      this.off('timeupdate', onTimeUpdate);
-
-      // Update known progress support for this playback technology
-      this.featuresTimeupdateEvents = true;
-      // Turn off manual progress tracking
-      this.manualTimeUpdatesOff();
-    };
-
-    this.on('timeupdate', onTimeUpdate);
   }
 
   manualTimeUpdatesOff() {

src/js/utils/buffer.js

@@ -0,0 +1,35 @@
+import { createTimeRange } from './time-ranges.js';
+
+/**
+ * Compute how much your video has been buffered
+ * @param  {Object} Buffered object
+ * @param  {Number} Total duration
+ * @return {Number} Percent buffered of the total duration
+ * @private
+ */
+export function bufferedPercent(buffered, duration) {
+  var bufferedDuration = 0,
+      start, end;
+
+  if (!duration) {
+    return 0;
+  }
+
+  if (!buffered || !buffered.length) {
+    buffered = createTimeRange(0, 0);
+  }
+
+  for (let i = 0; i < buffered.length; i++){
+    start = buffered.start(i);
+    end   = buffered.end(i);
+
+    // buffered end can be bigger than duration by a very small fraction
+    if (end > duration) {
+      end = duration;
+    }
+
+    bufferedDuration += end - start;
+  }
+
+  return bufferedDuration / duration;
+}

test/unit/tech/tech.test.js

@@ -39,23 +39,6 @@ test('should synthesize timeupdate events by default', function() {
   equal(timeupdates, 1, 'triggered at least one timeupdate');
 });
 
-test('stops timeupdates if the tech produces them natively', function() {
-  var timeupdates = 0, tech, expected;
-  tech = new Tech();
-  tech.on('timeupdate', function() {
-    timeupdates++;
-  });
-
-  tech.trigger('play');
-
-  // simulate a native timeupdate event
-  tech.trigger('timeupdate');
-
-  expected = timeupdates;
-  this.clock.tick(10 * 1000);
-  equal(timeupdates, expected, 'did not simulate timeupdates');
-});
-
 test('stops manual timeupdates while paused', function() {
   var timeupdates = 0, tech, expected;
   tech = new Tech();