azure media player loading videos incorrectly

Question

I have implemented the azure media player into my react app and it will load the first video correctly, however when I then navigate to another page with another video it will then play the video but the video is incorrectly sized and black with no controls only the sound can be heard

and It is also trying to get my url localhost:3000/page/null and I get a 404 error, I'm not sure why this is happening?

How can I change it so my video plays correctly?

 function AzureVideo() {
    const myOptions = {
      nativeControlsForTouch: false,
      controls: true,
      autoplay: true,
      width: '640',
      height: '400',
    }
    const myPlayer = amp('azuremediaplayer', myOptions)
    myPlayer.src([
      {
        src: `{topic.media}`,
        type: 'application/vnd.ms-sstr+xml',
      },
    ])
  }

 <video
          id="azuremediaplayer"
          className="azuremediaplayer amp-default-skin amp-big-play-centered"
        />

Answer 1

等待大神答复