media: Hide audio controls if there is no audio

_posts/2022/2022-01-10-h264-encoder-showdown.html

@@ -78,7 +78,7 @@ videos:
         {% endfor %}
       {% endfor %}
     {% endcapture %}
-    {% include blocks/media.liquid type="video" caption=caption poster=video.poster muted=true preload="none" player=true content=video_sources %}
+    {% include blocks/media.liquid type="video" caption=caption poster=video.poster preload="metadata" player=true content=video_sources %}
     </script>
   {% endcapture %}
   {% include blocks/details.liquid title=video.name content=capture_video level=1 open=true %}

assets/site.js

@@ -223,6 +223,17 @@ async function xmr_initialize_player(el) {
 	});
 	el.hideOverlay();
 
+	// Show/Hide Audio controls without audio.
+	function checkAudioPresence() {
+		let hasAudio = Boolean(media.mozHasAudio)
+			|| Boolean(media.webkitAudioDecodedByteCount)
+			|| Boolean(media.audioTracks && media.audioTracks.length);
+		audio_mute.style.display = hasAudio ? "" : "none";
+		audio_volume.style.display = hasAudio ? "" : "none";
+	}
+	media.addEventListener("loadedmetadata", () => { checkAudioPresence() });
+	checkAudioPresence();
+
 	// Variants
 	let variant = el.querySelector(".variant");
 	variant.update = function() {
@@ -257,7 +268,7 @@ async function xmr_initialize_player(el) {
 	variant.addEventListener("input", () => { variant.update(); });
 	variant.addEventListener("value", () => { variant.update(); });
 
-	// Add options from available sources.
+	// Variants - Add options from available sources.
 	let sources = el.querySelectorAll("source");
 	for (let k of sources) {
 		let option = document.createElement("option");
@@ -266,6 +277,9 @@ async function xmr_initialize_player(el) {
 		variant.appendChild(option);
 	}
 	variant.value = media.currentSrc;
+
+	// Signal the browser to try and load some information.
+	media.load();
 }
 
 async function xmr_initialize_players() {