1

In my Next.js app I would like to embed a media player with Azure Media Services. I followed the set-up process in docs:

1. added these 2 tags in the custom Head component 
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

  1. pasted this video tag in the page

    <video id="vid1" className="azuremediaplayer amp-default-skin" autoPlay controls data-setup='{"nativeControlsForTouch": false}'> <source src='//amssamples.streaming.mediaservices.windows.net/3b970ae0-39d5-44bd-b3a3-3136143d6435/AzureMediaServicesPromo.ism/manifest' type="application/vnd.ms-sstr+xml" /> </video>

However, the media player doesn't work and I'm getting this error in the console

Warning: Expected server HTML to contain a matching <video> in <div>.

I guess it has something to do with SSR.. How should I handle this problem?

sinnerwithguts
  • 573
  • 7
  • 20
  • You can refer to this post and hope to help you. https://stackoverflow.com/questions/46865880/react-16-warning-expected-server-html-to-contain-a-matching-div-in-div-due?rq=1 – Jason Pan Jul 24 '20 at 08:19

1 Answers1

0

I think you can use next.js with react-router to solve the issue.

In React, you can check answers in this post. After read the answer, I think we also can figure the problem by BrowserRouter.

Jason Pan
  • 15,263
  • 1
  • 14
  • 29