HTML not picking up mp3/mp4 file in data-media-src

Question

This is for an interactive transcript showing a media element. I would like to call the media file (mp3/mp4) from my device, but it is not working.

This is to call the media, but it doesn't seem to be working:

<video id="hyperplayer" class="hyperaudio-player" style="z-index: 5000000; position:relative; width:400px" controls>
<track id="hyperplayer-vtt" label="English" kind="subtitles" srclang="en" src="">
</video>

This is the div containing the interactive transcript. The entity seems to be calling the media element, and I'm wondering how to call my mp3/mp4 file from here? This is what it looks like:

<div> id ="hypertranscript" class="hyperaudio-transcript" style="overflow-y:scroll; height:600px; position:relative; border-style:dashed; border-width: 1px; border-color:#999; padding: 8px">

<article data-wm="$ilp.uphold.com/123article">

  <section data-media-src="https://lab.hyperaud.io/video/BBC/education.mp4" data-wm="$ilp.uphold.com/123section">

<h5 data-m="0">How do we make people more aware of their personal data?</h5>

<p data-wm="$ilp.uphold.com/123Doc">
      <span data-m="4470" data-d="0" class="speaker">Doc: </span>
      <span data-m="4470" data-d="270">We </span>
      <span data-m="4740" data-d="240">have </span>
      <span data-m="5010" data-d="300">two </span>
       

.... 
</p> </section></article></div>

Part of the Javascript for this:

const hyperaudioPlayerOptions = {


"native": nativePlayer,
  "soundcloud": soundcloudPlayer,
  "youtube": youtubePlayer,
  "videojs": videojsPlayer,
  "vimeo": vimeoPlayer,
  "spotify": spotifyPlayer
     }
const mediaSrc = this.transcript.querySelector('[data-media-src]');

    if (mediaSrc !== null &&  mediaSrc !== undefined) {
  this.player.src = mediaSrc.getAttribute('data-media-src');
   }

    if (this.player.tagName == 'VIDEO' || this.player.tagName == 'AUDIO') {
  //native HTML media elements
  this.playerType = 'native';
   } else {
  //assume it is a SoundCloud or YouTube iframe
  this.playerType = this.player.getAttribute('data-player-type');
   }


function nativePlayer(instance) {
  this.player = instance.player;
  this.player.addEventListener('pause', instance.pausePlayHead, false);
  this.player.addEventListener('play', instance.preparePlayHead, false);
  this.paused = true;

 this.getTime = () => {
    return new Promise((resolve) => {
    resolve(this.player.currentTime);
  });
  }

  this.setTime = (seconds) => {
     this.player.currentTime = seconds;
   }

  this.play = () => {
    this.player.play();
    this.paused = false;
   }

  this.pause = () => {
this.player.pause();
this.paused = true;
   }
   }

I am a beginner coder, so I am not sure what is wrong and why the entity isn't working. If I can call the mp3/mp4 file from the data-media-src that would be fine as well just as long as the media element shows up and works

FYI everything else is showing up fine, it's just the media that is not playing or being called.