fix: need to determine featuresVideoFrameCallback before setting source (#7812)

the tech needs to know whether or not the underlying element supports requestVideoFrameCallback before calling setSource

Fixes #7807

Author: joeflateau

src/js/tech/html5.js

@@ -39,6 +39,8 @@ class Html5 extends Tech {
     const source = options.source;
     let crossoriginTracks = false;
 
+    this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
     // Set the source if one is provided
     // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
     // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
@@ -114,8 +116,6 @@ class Html5 extends Tech {
     // into a `fullscreenchange` event
     this.proxyWebkitFullscreen_();
 
-    this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
-
     this.triggerReady();
   }
 

test/unit/tech/html5.test.js

@@ -1035,7 +1035,10 @@ QUnit.test('supports getting available media playback quality metrics', function
 
 QUnit.test('featuresVideoFrameCallback is false for audio elements', function(assert) {
   const el = document.createElement('audio');
-  const audioTech = new Html5({el});
+  const audioTech = new Html5({
+    el,
+    source: [{src: 'https://example.org/stream.m3u8'}]
+  });
 
   assert.strictEqual(audioTech.featuresVideoFrameCallback, false, 'Html5 with audio element should not support rvf');