I am attempting to implement the Dashjs package for a Vue 3 video player, loosely based on the following: http://reference.dashif.org/dash.js/latest/samples/smooth-streaming/mss.html. So far, I have a simple video player view that I set up using Vue 3 with Dashjs.

<template>
  <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
      <div :v-model="modelValue" :style="`height: ${height}; width: ${width};`">
        <video id="video" style="width:100%; height:100%;" controls></video>
        <button outlined @click="videoPlayer">Render Video</button>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref } from 'vue'
import { MediaPlayer } from 'dashjs'

const player = ref()

const videoPlayer = () => {
  player.value = MediaPlayer().create();
  const video = document.getElementById('video')
  player.value.initialize()
  player.value.attachView(video)
  player.value.attachSource('<video URL>')
  console.log([video, player.value])
}
</script>

for player.value.attachSource('<video URL>') I was able to run an mpd formatted video just fine. However, when I add links to ISM formatted videos, the player does not seem to recognize ISM formatted videos. How can I configure this code to recognize ISM formatted videos?

Here is an ISM formatted video that I tried using:

http://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest