Codecs for HTML video player, no sound in audio

Anki Card Design
1

Hi!

I’ve been trying to add a couple of short videos to my cards using this:

{{#vid1}}
<div style="text-align: center; margin-top: 15px;">
  <button id="btn-vid1" style="padding: 8px 12px; cursor: pointer;" onclick="toggleVid('vidPlayer1', '{{text:vid1}}')">
    Loading...
  </button>
  
  <div id="vidPlayer1-wrap" style="display:none; margin-top: 10px; width: 100%;">
    <video id="vidPlayer1" loop playsinline controls style="width: 60%; margin: 0 auto; display: block;"></video>
  </div>
</div>
<script>
  (function() {
    var fileName = "{{text:vid1}}";
    var dotIndex = fileName.lastIndexOf('.');
    var nameWithoutExt = dotIndex !== -1 ? fileName.substring(0, dotIndex) : fileName;
    document.getElementById('btn-vid1').innerText = "[" + nameWithoutExt + "]";
  })();
</script>
{{/vid1}}

.mp4 files would not play at all (H264), so I converted them to .webm (vp9) and it is working. However, sound is gone. I tried both opus and vorbis codecs. What am I doing wrong?

Also, what is the best codec for compatibility (PC, Android and iOS)? I was considering using the [sound:xxx.mp4] tag instead but I want the video to loop after pressing the button until I manually stop it.

Any suggestions?