Next.js Azure 媒体播放器警告：预期的服务器 HTML 在 <div> 中包含匹配的 <video>答案

【问题标题】：Next.js Azure Media Player Warning: Expected server HTML to contain a matching <video> in <div>Next.js Azure 媒体播放器警告：预期的服务器 HTML 在 <div> 中包含匹配的 <video>
【发布时间】：2020-11-07 22:22:39
【问题描述】：

在我的 Next.js 应用程序中，我想在 Azure 媒体服务中嵌入一个媒体播放器。我遵循了文档中的设置过程：

1.在自定义Head组件中添加这2个标签

<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>

在页面中粘贴了这个视频标签

<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>

但是，媒体播放器不起作用，我在控制台中收到此错误

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

我猜它与SSR有关..我应该如何处理这个问题？

【问题讨论】：

你可以参考这篇文章，希望对你有所帮助。 stackoverflow.com/questions/46865880/…

标签： next.js server-side-rendering azure-media-services

【解决方案1】：

我想你可以使用next.js with react-router 来解决这个问题。

在 React 中，您可以check answers in this post。看了答案，我想我们也可以通过BrowserRouter来解决问题。

【讨论】：