Webkit2gtk doesn't work well with M3U8 streams

Trying to build an app that uses Webkit2gtk and Hls.js to view M3U8 videos. The videos start fine, but then something pausing, and always seeking in the video will cause the video to break entirely. Are there any ways this can be fixed? I hear gstreamer libs fixed it for someone, never said which ones.
I’m using svelte, and this code doesn’t work in the Tauri Webkit2gtk environment, when it works fine on Android, Windows, and chrome:

<script>
    import Hls from 'hls.js';
    import { onMount } from 'svelte';
  
    let player;
    let hls;
    let streamUrl = "https://sveltejs.github.io/assets/caminandes-llamigos.mp4";
  
    onMount(async () => {
      // Sets up link with video
      if (Hls.isSupported()) {
        hls = new Hls();
        hls.loadSource(streamUrl);
        hls.attachMedia(player);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          player.play();
        });
      } else if (player.canPlayType('application/vnd.apple.mpegurl')) {
        // Native support (e.g., in Safari)
        player.src = streamUrl;
        player.play();
      }
    });
  </script>
  
  <div id="player-box">
      <!-- svelte-ignore a11y-media-has-caption -->
      <video 
        bind:this={player}
        id="player"
        controls
      />
    </div>

OS: Manjaro Linux x86_64
Kernel: 6.9.12-3-MANJARO
DE: Plasma 6.0.5
CPU: 12th Gen Intel i7-12700K (20) @ 4.900GHz
GPU: AMD ATI Radeon RX 7900 XT/7900 XTX/7900M

Upon more inspection, I got these messages:

GStreamer element appsink not found. Please install it.

** (WebKitWebProcess:65393): WARNING **: 19:53:40.769: The GStreamer FDK AAC plugin is missing, AAC playback is unlikely to work.

I am unable to figure out what I need to install