using azure streaming video not loading in react

Question

I have azure streaming videos that I have implemented, however initially they don't load, I just see the default html5 video player skin and the video attempts to load but then doesn't, if the page refreshes I see the azure skin and the video loads correctly, this happens with every video on the site.

How can I change it so the video loads correctly?

        <video
          id={topic.id}
          className="azuremediaplayer amp-default-skin amp-big-play-centered"
          autoPlay
          controls
          width="640"
          height="400"
          data-setup='{"nativeControlsForTouch": false}'
        >
          <source
            src={topic.url}
          />
          <p className="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser
            that supports HTML5 video
          </p>
        </video>

Answer 1

等待大神答复