Merge branch 'videojs:main' into main

CHANGELOG.md

@@ -1,3 +1,25 @@
+<a name="7.20.3"></a>
+## [7.20.3](https://github.com/videojs/video.js/compare/v7.20.2...v7.20.3) (2022-09-09)
+
+### Bug Fixes
+
+* allow for techs that init slowly in rvfc ([#7864](https://github.com/videojs/video.js/issues/7864)) ([d736541](https://github.com/videojs/video.js/commit/d736541))
+* Use timeupdate as well as rvfc/raf for cues ([#7918](https://github.com/videojs/video.js/issues/7918)) ([9b81afe](https://github.com/videojs/video.js/commit/9b81afe)), closes [#7910](https://github.com/videojs/video.js/issues/7910) [#7902](https://github.com/videojs/video.js/issues/7902)
+* **package:** Update to [@videojs](https://github.com/videojs)/http-streaming 2.14.3 and videojs-vtt.js 0.15.4 ([#7907](https://github.com/videojs/video.js/issues/7907)) ([2810507](https://github.com/videojs/video.js/commit/2810507))
+
+### Chores
+
+* update FAQ redirect ([#7892](https://github.com/videojs/video.js/issues/7892)) ([3c70573](https://github.com/videojs/video.js/commit/3c70573)), closes [videojs/videojs.com#159](https://github.com/videojs/videojs.com/issues/159)
+* **docs:** use https URLs in noUITitleAtttributes example ([#7809](https://github.com/videojs/video.js/issues/7809)) ([0211d73](https://github.com/videojs/video.js/commit/0211d73))
+
+### Code Refactoring
+
+* fix typo in player.js ([#7805](https://github.com/videojs/video.js/issues/7805)) ([9ca2e87](https://github.com/videojs/video.js/commit/9ca2e87))
+
+### Documentation
+
+* update FAQ.md to match change in [#7892](https://github.com/videojs/video.js/issues/7892) ([#7893](https://github.com/videojs/video.js/issues/7893)) ([ed4524e](https://github.com/videojs/video.js/commit/ed4524e))
+
 <a name="7.20.2"></a>
 ## [7.20.2](https://github.com/videojs/video.js/compare/v7.20.1...v7.20.2) (2022-07-28)
 

docs/guides/faq.md

@@ -1,3 +1,3 @@
 # FAQ
 
-This guide has moved to the main videojs.com website: [FAQs](https://videojs.com/guides/faq/)
+This guide has moved to the main videojs.com website: [FAQs](https://videojs.com/guides/faqs/)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 video player that supports HLS and DASH with a common API and skin.",
-  "version": "7.20.2",
+  "version": "7.20.3",
   "main": "./dist/video.cjs.js",
   "module": "./dist/video.es.js",
   "style": "./dist/video-js.css",

src/js/tech/tech.js

@@ -869,7 +869,7 @@ class Tech extends Component {
   requestVideoFrameCallback(cb) {
     const id = Guid.newGUID();
 
-    if (this.paused()) {
+    if (!this.isReady_ || this.paused()) {
       this.queuedHanders_.add(id);
       this.one('playing', () => {
         if (this.queuedHanders_.has(id)) {

src/js/tracks/text-track.js

@@ -184,13 +184,15 @@ class TextTrack extends Track {
     const activeCues = new TextTrackCueList(this.activeCues_);
     let changed = false;
 
-    this.timeupdateHandler = Fn.bind(this, function() {
+    this.timeupdateHandler = Fn.bind(this, function(event = {}) {
       if (this.tech_.isDisposed()) {
         return;
       }
 
       if (!this.tech_.isReady_) {
-        this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
 
         return;
       }
@@ -205,7 +207,9 @@ class TextTrack extends Track {
         changed = false;
       }
 
-      this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      if (event.type !== 'timeupdate') {
+        this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      }
 
     });
 
@@ -368,14 +372,18 @@ class TextTrack extends Track {
   }
 
   startTracking() {
+    // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
     this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+    // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+    this.tech_.on('timeupdate', this.timeupdateHandler);
   }
 
   stopTracking() {
     if (this.rvf_) {
       this.tech_.cancelVideoFrameCallback(this.rvf_);
       this.rvf_ = undefined;
     }
+    this.tech_.off('timeupdate', this.timeupdateHandler);
   }
 
   /**

test/unit/tech/tech.test.js

@@ -770,3 +770,21 @@ QUnit.test('returns an empty object for getVideoPlaybackQuality', function(asser
   assert.deepEqual(tech.getVideoPlaybackQuality(), {}, 'returns an empty object');
   tech.dispose();
 });
+
+QUnit.test('requestVideoFrameCallback waits if tech not ready', function(assert) {
+  const tech = new Tech();
+  const cbSpy = sinon.spy();
+
+  tech.paused = sinon.spy();
+  tech.isReady_ = false;
+
+  tech.requestVideoFrameCallback(cbSpy);
+
+  assert.notOk(tech.paused.called, 'paused not called on tech that is not ready');
+
+  tech.trigger('playing');
+
+  assert.ok(cbSpy.called, 'callback was called on tech playing');
+
+  tech.dispose();
+});

test/unit/tracks/text-track.test.js

@@ -279,7 +279,9 @@ QUnit.test('does not fire cuechange before Tech is ready', function(assert) {
     return 0;
   };
 
+  // `playing` would trigger rvfc or raf, `timeupdate` for fallback
   player.tech_.trigger('playing');
+  player.tech_.trigger('timeupdate');
   assert.equal(changes, 0, 'a cuechange event is not triggered');
 
   player.tech_.on('ready', function() {
@@ -292,6 +294,11 @@ QUnit.test('does not fire cuechange before Tech is ready', function(assert) {
 
     assert.equal(changes, 2, 'a cuechange event trigger addEventListener and oncuechange');
 
+    player.tech_.trigger('timeupdate');
+    clock.tick(1);
+
+    assert.equal(changes, 2, 'a cuechange event trigger not duplicated by timeupdate');
+
     tt.off();
     player.dispose();
     clock.restore();
@@ -311,31 +318,45 @@ QUnit.test('fires cuechange when cues become active and inactive', function(asse
   const cuechangeHandler = function() {
     changes++;
   };
+  let fakeCurrentTime = 0;
+
+  player.tech_.currentTime = function() {
+    return fakeCurrentTime;
+  };
 
   tt.addCue({
     id: '1',
     startTime: 1,
     endTime: 5
   });
+  tt.addCue({
+    id: '2',
+    startTime: 11,
+    endTime: 14
+  });
 
   tt.oncuechange = cuechangeHandler;
   tt.addEventListener('cuechange', cuechangeHandler);
 
-  player.tech_.currentTime = function() {
-    return 2;
-  };
+  fakeCurrentTime = 2;
+  player.tech_.trigger('playing');
 
+  assert.equal(changes, 2, 'a cuechange event trigger addEventListener and oncuechange (rvfc/raf)');
+
+  fakeCurrentTime = 7;
   player.tech_.trigger('playing');
 
-  assert.equal(changes, 2, 'a cuechange event trigger addEventListener and oncuechange');
+  assert.equal(changes, 4, 'a cuechange event trigger addEventListener and oncuechange (rvfc/raf)');
 
-  player.tech_.currentTime = function() {
-    return 7;
-  };
+  fakeCurrentTime = 12;
+  player.tech_.trigger('timeupdate');
 
-  player.tech_.trigger('playing');
+  assert.equal(changes, 6, 'a cuechange event trigger addEventListener and oncuechange (timeupdate)');
+
+  fakeCurrentTime = 17;
+  player.tech_.trigger('timeupdate');
 
-  assert.equal(changes, 4, 'a cuechange event trigger addEventListener and oncuechange');
+  assert.equal(changes, 8, 'a cuechange event trigger addEventListener and oncuechange (timeupdate)');
 
   tt.off();
   player.dispose();
@@ -365,6 +386,7 @@ QUnit.test('enabled and disabled cuechange handler when changing mode to hidden'
     return 2;
   };
   player.tech_.trigger('playing');
+  player.tech_.trigger('timeupdate');
 
   assert.equal(changes, 1, 'a cuechange event trigger');
 
@@ -376,6 +398,7 @@ QUnit.test('enabled and disabled cuechange handler when changing mode to hidden'
     return 7;
   };
   player.tech_.trigger('playing');
+  player.tech_.trigger('timeupdate');
 
   assert.equal(changes, 0, 'NO cuechange event trigger');