fix: volume control showing up on iOS (#7550)

This is a follow-up to #7514. But turns out, that we still had a timing
issue around when we were doing the check and when the volume control
was created.

Instead, we should make `featuresVolumeControl` not be a lazy property,
so, that we do that check as early as possible. Also, we should
default this property to `false` in this case, so, that we assume we
can't until we confirm we can.

Additionally, added a null check for Html5, to be extra defensive since
the timeout isn't tied to a player.

src/js/tech/html5.js

@@ -1042,8 +1042,13 @@ Html5.canControlVolume = function() {
     // Since `features` doesn't currently work asynchronously, the value is manually set.
     if (canControl && browser.IS_IOS) {
       window.setTimeout(() => {
-        Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+        if (Html5 && Html5.prototype) {
+          Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+        }
       });
+
+      // default iOS to false, which will be updated in the timeout above.
+      return false;
     }
 
     return canControl;
@@ -1241,7 +1246,6 @@ Html5.Events = [
  * @default {@link Html5.supportsNativeAudioTracks}
  */
 [
-  ['featuresVolumeControl', 'canControlVolume'],
   ['featuresMuteControl', 'canMuteVolume'],
   ['featuresPlaybackRate', 'canControlPlaybackRate'],
   ['featuresSourceset', 'canOverrideAttributes'],
@@ -1252,6 +1256,8 @@ Html5.Events = [
   defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
 });
 
+Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
 /**
  * Boolean indicating whether the `HTML5` tech currently supports the media element
  * moving in the DOM. iOS breaks if you move the media element, so this is set this to